Zenn
🐘

ゼロから学ぶ React, Next.js⑬【Learn Next.js】Chapter6

2024/05/25に公開
Next.js
React
tech

【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リポジトリを選択してインポートできる画面が表示されます：

ユーザーのGitHubリポジトリのリストを含むインポートプロジェクト画面を示すVercelダッシュボードのスクリーンショット

プロジェクト名を付けて、[Deploy]をクリックします。

プロジェクト名フィールドとデプロイボタンを示すデプロイ画面

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

プロジェクト名、ドメイン、デプロイ状態を示すプロジェクト概要画面

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

Postgresデータベースの作成

次に、データベースをセットアップするには、[Continue to Dashboard]をクリックし、プロジェクトダッシュボードから[Storage]タブを選択します。[Connect Store] → [Create New] → [Postgres] → [Continue]を選択します。

KV、Blob、Edge Configと共にPostgresオプションを示すConnect Store画面

利用規約に同意し、データベースに名前を割り当て、データベースリージョンがワシントンD.C（iad1）に設定されていることを確認します。これは、すべての新しいVercelプロジェクトのデフォルトのリージョンでもあります。データベースをアプリケーションコードと同じリージョンまたはその近くに配置することで、データリクエストのレイテンシを削減できます。

データベース名とリージョンを示すデータベース作成モーダル

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

接続したら、[.env.local]タブに移動し、[Show secret]をクリックして[Copy Snippet]をクリックします。

非表示のデータベースシークレットを示す.env.localタブ

コードエディターに移動し、.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に追加します：

/package.json
 "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を使用しているためです。

./scripts/seed.js
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が見つかります。

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

次の章

https://zenn.dev/gunjo/articles/997416db0375c0

Discussion