🐕

Vercel Postgres をさくっと試せる環境を作る

2023/05/03に公開

Next.js

はじめに

先日、3つの Storage サービスが公開されました🎉

Vercel KV
Vercel Postgres
Vercel Blob

その中でも個人的に気になった Vercel Postgres を試してみようと思います。
https://vercel.com/blog/vercel-storage

環境構築

Vercel Postgres を試すためのテンプレートがいくつか用意されています。（ありがたい...）

上記は全て Next.js 用のテンプレートですが、他にも Sveltekit、Nuxt 用のテンプレートも用意されています。今回は Prisma を使いたかったので、 Vercel Postgres + Prisma Next.js Starter のテンプレートを使用してみます。

テンプレートを使って環境構築する

Vercel Postgres + Prisma Next.js Starter テンプレートを使う

まずは、https://vercel.com/templates/next.js/postgres-prisma に遷移し、『Deploy』ボタンをクリックします。

リポジトリを作成する

次に作成するリポジトリの名前などを設定します。今回はデフォルトのまま進めるので、そのまま『Create』ボタンをクリックします。

ストレージを追加する

次はストレージを追加していきます。まずは Add Storage の中にある『Add』ボタンをクリックします。

利用規約のモーダルが表示されるので、『Accept』をクリックします。

次にデータベース名とリージョンの選択を求められます。リージョンは Singapore (Southeast) - sin1 を選択しました。

最後にどの環境で利用するかを選択します。今回は変更せずそのまま『Connect』をクリックします。

すると、デプロイが始まります。

デプロイ後、発行された URL に遷移して下記の画面が表示されれば Production 環境は構築完了です🎉

ローカルで動かせるようにする

次はこちらを参考にローカルで試せるようにします。

テンプレートを使って作成したリポジトリをローカルに clone した後、下記を実行します。

npm i @vercel/postgres
npm i -g vercel@latest

この時点で開発サーバーを立ち上げて http://localhost:3000/ に遷移すると、

npm run dev

下記のようなエラーが表示されます。これは development 用の環境変数が設定されていないためです。

development 用の環境変数を反映するには下記のコマンドを実行します。

vercel env pull .env.development.local

Error: Your codebase isn’t linked to a project on Vercel. Run `vercel link` to begin. のエラーが発生した場合

ローカル環境と Vercel のプロジェクトの紐付けが済んでいないので、先に下記のコマンドを実行してください。

vercel link

すると、ルートディレクトリに.env.development.local が作成されていると思います。

この状態で開発サーバーを起動し、再度 http://localhost:3000/ に遷移してみます。

yarn dev

下記のような画面が表示されていればOKです🎉

Production 環境の DB の中身を確認する

登録されているデータを確認するには、Vercel のダッシュボード → 作成したプロジェクト → Storage タブ → 作成したDBを選択 → Data セクションまでスクロールします。
確認方法は下記の2種類あります。

Browse
- 該当のテーブル名を選択するだけで確認できる。全てのレコードを確認する場合はこれで良さそう。
Query
- 直接 SQL を流して確認でき、条件付きで取得することも可能。

Browse はデータが増えてくると遅くなりそうなので、Query の方が使いそうかなと思いました。

（おまけ）Vercel Postgres + Prisma Next.js Starter テンプレートの中身を覗いてみる

テンプレートの中身はこちら。

Seed の投入はこの辺りでやってそうです。

データの取得はこの辺り。

ビルド時に Migration や Seed の投入などをやってるようです。