データベースのセットアップ

ダッシュボードでの作業を続ける前に、データが必要です。このチャプターでは、Vercelのマーケットプレイス統合のいずれかからPostgreSQLデータベースをセットアップします。すでにPostgreSQLに慣れていて、独自のデータベースプロバイダーを使用したい場合は、このチャプターをスキップして独自にセットアップすることもできます。そうでない場合は、続けましょう！

このチャプターで...

取り上げるトピックはこちらです

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

Vercelアカウントを設定し、GitHubリポジトリをリンクして、即時プレビューとデプロイを実現する。

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

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

GitHubリポジトリを作成する

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

リポジトリのセットアップに支援が必要な場合は、GitHubのこのガイドを参照してください。

豆知識

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

Vercelアカウントを作成する

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

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

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

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

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

GitHubリポジトリを接続すると、mainブランチに変更をプッシュするたびに、Vercelが追加の設定なしで自動的にアプリケーションを再デプロイします。プルリクエストを開くと、即時プレビューURLも利用でき、これによりデプロイエラーを早期に発見し、プロジェクトのプレビューをチームメンバーと共有してフィードバックを得ることができます。

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

次に、データベースをセットアップするために、ダッシュボードへ進むをクリックし、プロジェクトダッシュボードからストレージタブを選択します。データベースを作成を選択します。Vercelアカウントの作成時期によっては、NeonやSupabaseなどのオプションが表示される場合があります。ご希望のプロバイダーを選択し、続行をクリックします。

必要に応じて、リージョンとストレージプランを選択します。すべてのVercelプロジェクトのデフォルトリージョンはワシントンD.C. (iad1)であり、データリクエストのレイテンシーを減らすために、利用可能であればこれを選択することをお勧めします。

接続後、.env.localタブに移動し、秘密情報を表示をクリックし、スニペットをコピーします。コピーする前に必ず秘密情報を表示してください。

コードエディターに移動し、.env.exampleファイルを.envにリネームします。Vercelからコピーした内容を貼り付けます。

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

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

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

ブラウザからアクセスできるAPIが含まれており、これによってシードスクリプトが実行され、データベースに初期データセットが投入されます。

このスクリプトはSQLを使用してテーブルを作成し、作成後にplaceholder-data.tsファイルからデータを使用してそれらを投入します。

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

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

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

クエリの実行

すべてが期待どおりに機能しているか確認するために、クエリを実行してみましょう。別のルーターハンドラーapp/query/route.tsを使用してデータベースにクエリを実行します。このファイル内には、以下のSQLクエリを持つlistInvoices()関数があります。

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

ファイルのコメントを解除し、Response.json()ブロックを削除して、ブラウザでlocalhost:3000/queryにアクセスします。請求書のamountとnameが返されるはずです。