はじめに
2023年5月2日に、Vercel Storageが発表されました。
この記事では、Vercel Storageの一つであるVercel Postgresを試してみた結果を簡単にまとめます。
Vercel Storageとして発表されたのは、以下の3つのサービスです。
- Vercel Postgres: サーバーレスなPostgres（提携：Neon）
- Vercel KV: サーバレスなRedis（提携：Upstash）
- Vercel Blob: エッジファイルストレージサービス（提携：Cloudflare R2）
Vercel Postgresを試してみる
今回は、サクッとVercel Postgresを試すことができるスターターテンプレート、Vercel Postgres Next.js StarterのOne-Click Deployを試してみました。
Vercel Postgres Next.js Starterにアクセスし、「Deploy」ボタンをクリックします。
適当なリポジトリ名をつけて、「Create」ボタンをクリックします。
次に「Add Strage」の「Add」をクリックします。
データベース名を入力し、Regionを選択します。
選択できるRegionは以下になります。
- Cleveland, USA
- Washington, D.C., USA
- Portland, USA
- Frankfurt, Germany
- Singapore
データベース作成後にRegionを変更することはできません。
Regionを変更したいときは、新しいデータベースを作成し、データを移行する必要があります。
最後に「Deploy」ボタンをクリックすると、デプロイできました！
https://postgres-starter-nine.vercel.app/
ブラウザからデータベースを操作する
次に、追加されたデータベースをブラウザから操作してみます。
1. ブラウザからデータベースの中身を見る
Vercelの「Storage」→データベース名をクリックすると、データベースの詳細ページが表示されます。
データベースの詳細ページの下部の「Data」→「Browse」で、テーブルを選ぶと中身が表示されます。
2. ブラウザからクエリを実行する
データベースの詳細ページの下部の「Data」→「Query」をクリックすると、クエリを実行することができます。
試しに、usersテーブルにphoneカラムを追加してみます。
usersテーブルの中身を見てみると、phoneカラムが追加されていました！
ローカルからDBに接続する
最後に、先程デプロイしたリポジトリをローカルにcloneして、ローカルからDBに接続してみます。
1. 環境変数を設定する
リポジトリをcloneしたら、まずは環境変数を設定します。
下記のコマンドで.env.exampleファイルをコピーします。
% cp .env.example .env.local
Vercelの「Storage」→該当のデータベース名をクリックします。
.env.local ボタンをクリックすると環境変数が表示されるので、「Copy Snippet」ボタンを押してコピーし、.env.local ファイルに貼り付けます。
2. 動作確認する
ローカル環境で動かしてみます。
% pnpm install
% pnpm dev
デプロイしたときと同じように、データベースに入っているデータが表示されました！
3. ローカルからデータベースを操作してみる
今回は、推奨されているsql()を使って、ローカルからデータベースを操作してみます。
まずはpostsテーブルを追加してみます。
import { sql } from '@vercel/postgres';
...
await sql`CREATE TABLE posts (likes INT);`
ブラウザでデータベースを確認すると、postsテーブルが追加されていました。
次はpostsテーブルにデータを追加してみます。
await sql`INSERT INTO posts (likes) VALUES (200)`;
ブラウザで確認すると、データが追加されていました。
その他のクエリの例や、sql()以外を使う方法についてはこちらのドキュメントをご覧ください。
まとめ
Vercel Postgresを試してみた結果、とても簡単にブラウザからもローカルからもデータベースを操作できることがわかりました。
Vercel KVやVercel Blobについても、試してまとめていきたいと思います。