データベースの設定

ダッシュボードの作業を続ける前に、データが必要です。この章では、`@vercel/postgres` を使用してPostgreSQLデータベースを設定します。PostgreSQLに精通しており、独自のProviderを使用したい場合は、この章をスキップして独自に設定できます。それ以外の場合は、続行しましょう！

この章では…

以下に、取り上げるトピックを示します。

プロジェクトをGitHubにプッシュします。

Vercelアカウントを設定し、インスタントプレビューとデプロイのためにGitHubリポジトリをリンクします。

Postgresデータベースを作成し、プロジェクトにリンクします。

初期データでデータベースをシードします。

GitHubリポジトリを作成する

まず、まだ行っていない場合は、リポジトリをGitHubにプッシュしましょう。これにより、データベースの設定とデプロイが容易になります。

リポジトリの設定に助けが必要な場合は、GitHubのこのガイドをご覧ください。

知っておくと良いこと

• GitLabやBitbucketなどの他のGitプロバイダーも使用できます。
• GitHubを初めて使用する場合は、簡素化された開発ワークフローのためにGitHub Desktopアプリを推奨します。

Vercelアカウントを作成する

vercel.com/signupにアクセスしてアカウントを作成してください。「無料のホビー」プランを選択してください。「GitHubで続ける」を選択して、GitHubアカウントとVercelアカウントを接続します。

プロジェクトを接続してデプロイする

次に、作成したばかりのGitHubリポジトリを選択して**インポート**できる画面が表示されます。

プロジェクトに名前を付け、「デプロイ」をクリックします。

やった！🎉 プロジェクトがデプロイされました。

GitHubリポジトリを接続することで、**main**ブランチに変更をプッシュするたびに、Vercelは構成なしでアプリケーションを自動的に再デプロイします。プルリクエストを開くと、インスタントプレビューも利用でき、デプロイエラーを早期に検出し、チームメンバーとプロジェクトのプレビューを共有してフィードバックを得ることができます。

Postgresデータベースを作成する

次に、データベースを設定するには、「ダッシュボードへ進む」をクリックし、プロジェクトダッシュボードから「ストレージ」タブを選択します。「ストアに接続」→「新規作成」→「Postgres」→「続行」を選択します。

利用規約に同意し、データベースに名前を付け、データベースリージョンを**ワシントンD.C (iad1)**に設定します。これは、新しいVercelプロジェクトすべてに対するデフォルトリージョンでもあります。データベースをアプリケーションコードと同じリージョンまたは近くに配置することで、データ要求のレイテンシを削減できます。

**知っておくと良いこと**: データベースが初期化された後は、データベースリージョンを変更できません。異なるリージョンを使用する場合は、データベースを作成する前に設定する必要があります。

接続したら、`.env.local`タブに移動し、「シークレットを表示」をクリックして「スニペットをコピー」します。コピーする前にシークレットを必ず表示してください。

コードエディターに移動し、`.env.example`ファイルを**`.env`**に名前変更します。Vercelからコピーした内容を貼り付けます。

**重要**: `.gitignore`ファイルに移動し、GitHubにプッシュする際にデータベースシークレットが公開されないように、無視するファイルに`.env`が含まれていることを確認してください。

最後に、ターミナルで`pnpm i @vercel/postgres`を実行して、Vercel Postgres SDKをインストールします。

データベースをシードする

データベースが作成されたので、初期データでシードしましょう。

`/app`内には`seed`というフォルダがあります。このファイルのコメントを外してください。このフォルダには、データベースのシードに使用されるNext.js Route Handler（`route.ts`）が含まれています。これにより、ブラウザでアクセスできるサーバーサイドエンドポイントが作成され、データベースへのデータの入力を開始できます。

コードのすべての動作を理解していなくても心配ありませんが、概要として、このスクリプトは**SQL**を使用してテーブルを作成し、`placeholder-data.ts`ファイルのデータを使用して、テーブル作成後にそれらを移入します。

ローカル開発サーバーがpnpm run devで実行されていることを確認し、ブラウザでlocalhost:3000/seedにアクセスしてください。完了すると、ブラウザに「Database seeded successfully」というメッセージが表示されます。完了したら、このファイルは削除できます。

トラブルシューティング:

• .envファイルにコピーする前に、データベースのシークレットを必ず確認してください。
• このスクリプトは、ユーザーのパスワードのハッシュにbcryptを使用しています。bcryptがご使用の環境と互換性がない場合は、スクリプトを更新してbcryptjsを使用するように変更できます。
• データベースのシード中に問題が発生し、スクリプトを再度実行する必要がある場合は、データベースのクエリインターフェースでDROP TABLE tablenameを実行して、既存のテーブルを削除できます。詳細は、以下のクエリの実行セクションを参照してください。ただし、このコマンドはテーブルとそのすべてのデータを削除するため、注意が必要です。これはプレースホルダーデータを使用しているサンプルアプリでは問題ありませんが、本番アプリでは実行しないでください。
• Vercel Postgresデータベースのシード中に問題が発生し続ける場合は、GitHubでディスカッションを開始してください。

データベースの確認

データベースの内容を確認しましょう。Vercelに戻り、サイドナビの**データ**をクリックします。

このセクションには、users、customers、invoices、revenueの4つの新しいテーブルがあります。

各テーブルを選択すると、そのレコードを表示し、placeholder-data.tsファイルのデータと一致していることを確認できます。

クエリの実行

"クエリ"タブに切り替えて、データベースを操作できます。このセクションは標準SQLコマンドをサポートしています。例えば、DROP TABLE customersを入力すると、「customers」テーブルとそのすべてのデータが削除されます - **ご注意ください**！

最初のデータベースクエリを実行しましょう。次のSQLコードをVercelインターフェースに貼り付けて実行します。

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;