Zenn
💡

Vercel Postgres試してみた

2023/06/29に公開
Next.js
PostgreSQL
Vercel
tech

概要

2023年5月頃、VercelでStorageサービスが公開されました。公開されたサービスにはVercel KV(Redis), Vercel Postgresなどがあり、Next.jsのフルスタック化がかなり進んだと感じました。そこで、今回はVercel Postgresを試してみたいと思います！

環境構築

pnpmの導入

brew install pnpm

アプリをスターターキットから作成

ターミナル
pnpm create next-app --example https://github.com/vercel/examples/tree/main/storage/postgres-prisma

コマンドを実行すると、以下のような出力が得られると思います！

出力
Library/pnpm/store/v3/tmp/dlx-54128      |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/yuuki/Library/pnpm/store/v3
  Virtual store is at:             Library/pnpm/store/v3/tmp/dlx-54128/node_modules/.pnpm
Library/pnpm/store/v3/tmp/dlx-54128      | Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ What is your project named? … next-psql
Creating a new Next.js app in /Users/yuuki/Desktop/workspace/next-psql.

Downloading files from repo https://github.com/vercel/examples/tree/main/storage/postgres-prisma. This might take a moment.

Installing packages. This might take a couple of minutes.

Downloading registry.npmjs.org/typescript/5.0.4: 7.05 MB/7.05 MB, done
Downloading registry.npmjs.org/next/13.3.2: 12.1 MB/12.1 MB, done
Packages: +369
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are copied from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/yuuki/Library/pnpm/store/v3
  Virtual store is at:             node_modules/.pnpm
Downloading registry.npmjs.org/turbo-darwin-arm64/1.9.3: 12.3 MB/12.3 MB, done
Downloading registry.npmjs.org/@next/swc-darwin-arm64/13.3.2: 33.1 MB/33.1 MB, done
node_modules/.pnpm/@prisma+engines@4.13.0/node_modules/@prisma/engines: Running postinstall script, done in 2.3s
Progress: resolved 382, reused 0, downloaded 369, added 369, done
node_modules/.pnpm/turbo@1.9.3/node_modules/turbo: Running postinstall script, done in 328ms
node_modules/.pnpm/prisma@4.13.0/node_modules/prisma: Running preinstall script, done in 53ms
node_modules/.pnpm/@prisma+client@4.13.0_prisma@4.13.0/node_modules/@prisma/client: Running postinstall script, done in 738ms

dependencies:
+ @prisma/client 4.13.0
+ @types/node 18.15.11
+ @types/react 18.0.37
+ @types/react-dom 18.0.11
+ autoprefixer 10.4.14
+ eslint 8.38.0
+ eslint-config-next 13.3.0
+ ms 2.1.3
+ next 13.3.2
+ postcss 8.4.22
+ react 18.2.0
+ react-dom 18.2.0
+ tailwindcss 3.3.1
+ ts-node 10.9.1
+ typescript 5.0.4

devDependencies:
+ @types/ms 0.7.31
+ prisma 4.13.0
+ turbo 1.9.3

Done in 16.8s

Initialized a git repository.

Success! Created next-psql at /Users/yuuki/Desktop/workspace/next-psql
Inside that directory, you can run several commands:

  pnpm run dev
    Starts the development server.

  pnpm run build
    Builds the app for production.

  pnpm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd next-psql
  pnpm run dev

Vercel Postgresの作成

公式に飛んで、Get Startedを押してください。もしくは、VercelのダッシュボードからStorageへ移動してください。

すると、以下のページに遷移すると思います。

ここで、Postgres(Beta)を選択してください。

選択後、規約に同意するか聞かれます。読んだ後、Acceptを押してください。

同意後、以下のモーダルに遷移します。設定は以下のような感じでOKです。
地域に関しては、お住まいの地域に近い国を選びましょう。

作成できました！！

環境変数

1度だけ以下のコマンドを実行し、環境変数を作成します。

cp .env.example .env

そして、先ほど作成したPostgresの以下の画面を表示し、Quickstartに掲載されている .env.local を選び、Copy Snippetをクリック後、先ほど作成した .envにコピペしましょう。

Seed

ローカルで実行できるようにするには、Vercelの PostgreSQLでテーブルの作成からSeedまで入れるという作業が必要です。

pnpm prisma generate
pnpm prisma db push
pnpm prisma db seed

Seedが入ったかどうかはVercel Storageから確認できます。
以下の画像のように、サイドメニューのdataにあるQueryで実際にUserテーブルに値があるかSQLを発行してみましょう。

動作確認

pnpm dev

これで開発環境のサーバーが起動します。
URL：http://localhost:3000/

以下のようなページになっていると思います！

補足（デプロイについて）

デプロイする場合はまた別のやり方になりますが、以下の手順です。

  1. Githubにソースコードをアップロード
  2. Vercelでプロジェクトを作成する
  3. Vercel Storageと連携させる（環境変数はよしなに入れてくれます）
  4. デプロイする

参考文献

https://vercel.com/storage/postgres

https://vercel.com/templates/next.js/postgres-prisma

Discussion