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

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

GitHubリポジトリの作成

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

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

知っておくと便利:

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

Vercelアカウントの作成

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

プロジェクトの接続とデプロイ

次に、この画面に移動し、作成したGitHubリポジトリを選択してimportします:

プロジェクト名を入力し、Deployをクリックします。

おめでとうございます！ 🎉 プロジェクトがデプロイされました。

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

Postgresデータベースの作成

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

必要に応じてリージョンとストレージプランを選択します。すべてのVercelプロジェクトのデフォルトリージョンは**Washington 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() blockを削除して、ブラウザでlocalhost:3000/queryに移動します。請求書のamountとnameが返されるのが確認できるはずです。