Vercel Postgresを試してみた

# はじめに

2023年5月2日に、[Vercel Storage](https://vercel.com/blog/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](https://vercel.com/templates/next.js/postgres-starter)のOne-Click Deployを試してみました。

[Vercel Postgres Next.js Starter](https://vercel.com/templates/next.js/postgres-starter)にアクセスし、「Deploy」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/e9921f3d-44f3-b7d2-eacc-62d0429a2154.png)

適当なリポジトリ名をつけて、「Create」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/9182291a-dcd0-51e3-1790-a0d538e2bd76.png)

次に「Add Strage」の「Add」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/130eeef0-9a6f-5e5e-e3b6-29dff7252169.png)

データベース名を入力し、Regionを選択します。
選択できるRegionは以下になります。
- Cleveland, USA
- Washington, D.C., USA
- Portland, USA
- Frankfurt, Germany
- Singapore

:::note warn
データベース作成後にRegionを変更することはできません。
Regionを変更したいときは、新しいデータベースを作成し、データを移行する必要があります。
:::

![image (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/8556fdea-e1c8-d123-44d6-0814a2cf8aaf.png)

最後に「Deploy」ボタンをクリックすると、デプロイできました！
https://postgres-starter-nine.vercel.app/
![image (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/b7c5fc1b-b80e-1089-537b-b25ecbe1ead0.png)

## ブラウザからデータベースを操作する
次に、追加されたデータベースをブラウザから操作してみます。

### 1. ブラウザからデータベースの中身を見る
Vercelの「Storage」→データベース名をクリックすると、データベースの詳細ページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/c7102705-f9da-4a7e-46a0-5abe9a60edbe.png)

データベースの詳細ページの下部の「Data」→「Browse」で、テーブルを選ぶと中身が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/a796f14f-6369-d86b-f1bc-b5f304ad4b3c.png)

### 2. ブラウザからクエリを実行する
データベースの詳細ページの下部の「Data」→「Query」をクリックすると、クエリを実行することができます。

試しに、`users`テーブルに`phone`カラムを追加してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/91f67848-f6ca-cf4c-1ae4-c563b55566f5.png)

`users`テーブルの中身を見てみると、`phone`カラムが追加されていました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/f6857b7a-bc0f-8abb-771f-3ed8556ab7e5.png)

## ローカルからDBに接続する
最後に、先程デプロイしたリポジトリをローカルにcloneして、ローカルからDBに接続してみます。

### 1. 環境変数を設定する

リポジトリをcloneしたら、まずは環境変数を設定します。
下記のコマンドで`.env.example`ファイルをコピーします。
```
% cp .env.example .env.local
```

Vercelの「Storage」→該当のデータベース名をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/1515fbdb-f743-641d-8560-be032b532099.png)

`.env.local` ボタンをクリックすると環境変数が表示されるので、「Copy Snippet」ボタンを押してコピーし、`.env.local` ファイルに貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/2e5f0fe3-765b-62e2-0736-d554995fcaa4.png)

### 2. 動作確認する

ローカル環境で動かしてみます。
```
% pnpm install
% pnpm dev
```

デプロイしたときと同じように、データベースに入っているデータが表示されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/ef0112ef-7a30-bce3-460c-acaa612473f7.png)

### 3. ローカルからデータベースを操作してみる

今回は、推奨されている`sql()`を使って、ローカルからデータベースを操作してみます。

まずは`posts`テーブルを追加してみます。
```
import { sql } from '@vercel/postgres';
...
await sql`CREATE TABLE posts (likes INT);`
```

ブラウザでデータベースを確認すると、`posts`テーブルが追加されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/4ff79ce9-e0cc-09ab-933e-babed9dba0a8.png)

次は`posts`テーブルにデータを追加してみます。
```
await sql`INSERT INTO posts (likes) VALUES (200)`;
```

ブラウザで確認すると、データが追加されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120309/b61f34db-0405-8bb1-ff3e-483264dbf6fa.png)

その他のクエリの例や、`sql()`以外を使う方法については[こちらのドキュメント](https://vercel.com/docs/storage/vercel-postgres/sdk)をご覧ください。

# まとめ
Vercel Postgresを試してみた結果、とても簡単にブラウザからもローカルからもデータベースを操作できることがわかりました。

Vercel KVやVercel Blobについても、試してまとめていきたいと思います。