ゼロから学ぶ React, Next.js⑬【Learn Next.js】Chapter6
【Chapter6】データベースのセットアップ
ダッシュボードの作業を続ける前に、データが必要になります。この章では、@vercel/postgresを使用してPostgreSQLデータベースをセットアップします。PostgreSQLに精通しており、独自のプロバイダを使用することを好む場合は、この章をスキップして自分でセットアップできます。そうでない場合は、続けましょう!
この章で扱うトピック
- 🐱 プロジェクトをGitHubにプッシュする方法
- 🔼 Vercelアカウントを設定し、GitHubリポジトリをリンクしてインスタントプレビューとデプロイを行う方法
- 🐘 Postgresデータベースを作成し、プロジェクトにリンクする方法
- 🗄️ 初期データでデータベースをシードする方法
GitHubリポジトリの作成
まず、まだ行っていない場合は、リポジトリをGithubにプッシュしましょう。これにより、データベースのセットアップとデプロイが容易になります。
リポジトリのセットアップに関するヘルプが必要な場合は、GitHubのこのガイドを参照してください。
知っておくと良いこと:
- GitLabやBitbucketなどの他のGitプロバイダも使用できます。
- GitHubを初めて使用する場合は、開発ワークフローを簡素化するためにGitHub Desktop アプリをお勧めします。
Vercelアカウントの作成
vercel.com/signupにアクセスしてアカウントを作成します。無料の「ホビー」プランを選択します。[Continue with GitHub]を選択して、GitHubとVercelのアカウントを接続します。
プロジェクトの接続とデプロイ
次に、作成したGitHubリポジトリを選択してインポートできる画面が表示されます:
プロジェクト名を付けて、[Deploy]をクリックします。
hooray!🎉プロジェクトがデプロイされました。
GitHubリポジトリを接続することで、mainブランチに変更をプッシュするたびに、Vercelは構成なしでアプリケーションを自動的に再デプロイします。プルリクエストを開くときにも、インスタントプレビューがあり、デプロイエラーを早期に発見し、プロジェクトのプレビューをチームメンバーと共有してフィードバックを得ることができます。
Postgresデータベースの作成
次に、データベースをセットアップするには、[Continue to Dashboard]をクリックし、プロジェクトダッシュボードから[Storage]タブを選択します。[Connect Store] → [Create New] → [Postgres] → [Continue]を選択します。
利用規約に同意し、データベースに名前を割り当て、データベースリージョンがワシントンD.C(iad1)に設定されていることを確認します。これは、すべての新しいVercelプロジェクトのデフォルトのリージョンでもあります。データベースをアプリケーションコードと同じリージョンまたはその近くに配置することで、データリクエストのレイテンシを削減できます。
知っておくと良いこと:データベースリージョンは、初期化後に変更できません。別のリージョンを使用したい場合は、データベースを作成する前に設定する必要があります。
接続したら、[.env.local]タブに移動し、[Show secret]をクリックして[Copy Snippet]をクリックします。
コードエディターに移動し、.env.example
ファイルの名前を.env
に変更します。Vercelからコピーした内容を貼り付けます。
重要:.gitignore
ファイルに移動し、.env
が無視されるファイルに含まれていることを確認して、GitHubにプッシュするときにデータベースのシークレットが公開されないようにします。
最後に、nextjs-dashboardディレクトリでnpm i @vercel/postgres
を実行して、Vercel Postgres SDKをインストールします。
データベースのシード
データベースが作成されたので、初期データのシードを作成しましょう。これにより、ダッシュボードを構築する際に使用するデータが得られます。
プロジェクトの/scripts
フォルダーには、seed.js
というファイルがあります。このスクリプトには、invoices
、customers
、user
、revenue
テーブルを作成してシードを作成するための手順が含まれています。
コードが何をしているのかすべてを理解できなくても心配しないでください。概要を説明すると、このスクリプトはSQLを使用してテーブルを作成し、placeholder-data.js
ファイルからのデータを使用して、作成後にそれらを入力します。
次に、package.json
ファイルで、以下の行をscripts
に追加します:
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
+ "seed": "node -r dotenv/config ./scripts/seed.js"
},
これは、seed.js
を実行するコマンドです。
これで、npm run seed
を実行します。スクリプトが実行中であることを示すために、ターミナルにいくつかのconsole.log
メッセージが表示されるはずです。
メモ: -r dotenv/config
コマンドを分解すると、以下のようになります:
-r dotenv/config
は、.env
ファイルを解析し、そこで定義された変数をprocess.env
オブジェクトに追加します。
このコマンドが./scripts/seed.js
よりも前に実行されている理由はseed.js内でVercel Postgresを使用しているためです。
const { db } = require('@vercel/postgres');
DBに接続するために先ほど.envファイルで設定した環境変数を上記モジュールで使用しているため、-r dotenv/config
がseed.js
実行前に必要になります。
クイズの時間です!
知識をテストし、学んだことを確認しましょう。データベースの文脈における「シード」とは何ですか?
A. データベース内のすべてのデータを削除する
B. データベースのスキーマをインポートする
C. 初期データセットでデータベースに値を入力する
D. データベース内のテーブル間の関係を作成する
解答
C. 初期データセットでデータベースに値を入力する
Seedingは、アプリケーションを構築する際に、作業するためのデータが欲しい場合に便利です。
トラブルシューティング:
-
.env
ファイルにコピーする前に、データベースのシークレットを公開していることを確認してください。 - このスクリプトでは、ユーザーのパスワードをハッシュ化するために
bcrypt
を使用しています。bcrypt
が環境と互換性がない場合は、代わりにbcryptjs
を使用するようにスクリプトを更新できます。 - データベースのシードに問題が発生し、スクリプトを再度実行する場合は、データベースクエリインターフェイスで
DROP TABLE tablename
を実行して、既存のテーブルを削除できます。詳細については、以下の「クエリの実行」セクションを参照してください。ただし、このコマンドはテーブルとそのすべてのデータを削除するので注意してください。プレースホルダーデータを使用しているサンプルアプリでは問題ありませんが、本番アプリではこのコマンドを実行しないでください。 - Vercel Postgresデータベースのシードに引き続き問題がある場合は、GitHubでディスカッションを開いてください。
データベースの探索
データベースがどのように見えるか確認しましょう。Vercelに戻り、サイドナビの[Data]をクリックします。
このセクションでは、4つの新しいテーブルusers
、customers
、invoices
、revenue
が見つかります。
各テーブルを選択すると、そのレコードを表示でき、エントリがplaceholder-data.js
ファイルのデータと一致していることを確認できます。
クエリの実行
「query」タブに切り替えると、データベースとやり取りできます。このセクションでは、標準の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;
クイズの時間です!
知識をテストし、学んだことを確認しましょう。この請求書はどの顧客に属していますか?
A. Lee Robinson
B. Evil Rabbit
C. Delba de Oliveira
D. Steph Dietz
解答
B. Evil Rabbit
次の章
Discussion