データベースの設定

ダッシュボードでの作業を続ける前に、データが必要になります。この章では、Vercelのマーケットプレイス統合のいずれかからPostgreSQLデータベースを設定します。PostgreSQLに既に慣れていて、独自のデータベースプロバイダーを使用したい場合は、この章をスキップして自分で設定してください。それ以外の場合は、続けてください！

このチャプターでは...

取り上げるトピックは以下の通りです。

プロジェクトをGitHubにプッシュしてください。

Vercelアカウントを設定し、GitHubリポジトリをリンクして、インスタントプレビューとデプロイメントを取得してください。

Postgresデータベースを作成し、プロジェクトにリンクしてください。

データベースに初期データを投入してください。

GitHubリポジトリを作成

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

リポジトリの設定にヘルプが必要な場合は、GitHubのこのガイドを参照してください。

知っておくと良いこと

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

Vercelアカウントを作成

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

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

次に、作成したばかりのGitHubリポジトリを選択してインポートできるこの画面に移動します。

プロジェクトに名前を付けて、Deployをクリックしてください。

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

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

Postgresデータベースを作成

次に、データベースを設定するために、Continue to Dashboardをクリックし、プロジェクトダッシュボードからStorageタブを選択します。Create Databaseを選択します。Vercelアカウントが作成された時期によっては、NeonやSupabaseのようなオプションが表示される場合があります。好みのプロバイダーを選択し、Continueをクリックしてください。

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

接続したら、.env.localタブに移動し、Show secretをクリックしてCopy Snippetをクリックします。コピーする前に必ずシークレットを表示してください。

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

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

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

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

ブラウザからアクセスできるAPIを用意しました。これにより、シードスクリプトを実行してデータベースを初期データセットで埋めることができます。

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

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

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

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

クエリの実行

すべてが期待どおりに動作していることを確認するために、クエリを実行しましょう。データベースにクエリを実行するために、別のRouter Handler、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が返されていることがわかるはずです。