はじめに
今回の記事では、Next.jsチュートリアル第6章「データベースのセットアップ」を進めていきます。
前回の記事
chapter6 データべ―スのセットアップ
- プロジェクトを GitHub にプッシュします
- Vercelアカウントをセットアップしデプロイする
- プロジェクトを作成し、Postgresデータベースにリンクします
- データベースに初期データをシードします
リモートリポジトリの作成
今までの記事で構築したローカル環境と紐づけるリモートリポジトリを作成していきます。
リポジトリ名は自由ですが今回はNext-tutolialとしました。
ローカルとリモートの連結
作ったフォルダにcdで移動し、コマンドラインで以下の内容を入力していきます。
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:ユーザー名/next-todo.git
git push -u origin main
リモートリポジトリとローカルの連携が完了しました。
Vercelアカウントを作成する
以下のリンクにアクセスしてアカウントを作成していきます。
無料のホビープランを選択して名前を入力します。その後表示される画面でGitHubで続行を選択して、GitHubアカウントとVercelアカウントを接続します。
アカウントを作成後以下の画面に遷移するのでgitリポジトリをインポートからアカウントを選択します。その後gitアカウントのリポジトリ一覧が表示されるのでデプロイしたいリポジトリを選択します。
プロジェクトに名前を付けて、デプロイをクリックします。
この画面が表示されればプロジェクトのデプロイ完了です！
GitHubリポジトリに接続すると、変更をメインブランチにプッシュするたびに、Vercelはアプリケーションを自動的に再デプロイしてくれます。
Postgres データベースを作成する
次にデータベースを構築していきます、プロジェクトダッシュボードからストレージタブを選択します。 「Connect Store」→ 「Postgres」→ 「Accept」を選択します。
データベース名を割り当て、データベースのリージョンがiad1になっていることを確認します。確認したら、「Create」→「Connect」でデータベースに接続します。
接続が完了したらタブに移動し.env.localを開きます。
ファイル内容が伏字になっているので画面右のほうにあるHide secretを押してCopy Snippetから内容をコピーします。
コード エディターに移動し、.env.exampleファイルの名前を.env。に変更しVercelからコピーした内容を貼り付けます。
重要
GitHubにプッシュするときデータベースの秘密が公開されないように、.gitignoreファイルに移動して無視されるファイルに.envが含まれていることを確認してください。
最後にターミナルで以下のコードを入力してVercel Postgres SDKをインストールします。
npm i @vercel/postgres
データベースをシードする
データベースが作成されたので、初期データをシードしてみましょう。これにより、ダッシュボードを構築するときにいくつかのデータを操作できるようになります。
/scriptsフォルダーのなかにseed.jsというファイルがあります、このスクリプトには、invoices、customers、userテーブルの作成とシードの手順が含まれています。
このシードデータを挿入するために、package.jsonを下記のように書き換えます。
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
"seed": "node -r dotenv/config ./scripts/seed.js"
},
npm run seedでシードデータの挿入が完了です。
おわりに
今回の記事ではプロジェクトのデプロイ、データベースの構築など中々に濃ゆい内容を進めていきましたが、かなりためになる内容でした。
結構長い記事になりましたが、ここまでお疲れさまでした。