Zenn
🔺

新発表のVercel Storageを使ってみる

2023/05/07に公開
Next.js
Vercel
PostgreSQL
tech

2023/5/1 ~ 5 にかけて、Next.jsの開発元であるVercelが5つ大きな発表をしました。

  • VercelでStorageを提供するよ
  • セキュリティを強化するVercel FirewallとSecure Computeを提供するよ
  • 連携したCMSで直接Webサイトを編集するVisual Edittingをサポートするよ
  • Next.13.4 をリリースしたよ。App Directoryが正式採用されたよ
  • Nuxt.js でもStorageやISRが使えるようになったよ

ざっくりと私が理解した限りでは以上の発表でした。
拙い英語力で流し読みをした程度なので、詳細は公式の発表を参照してください。
https://vercel.com/ship

その中で、一番理解しやすかったVercel Storageを使ってみることにしました。

Vercel Storage

Vercel Storageは、Vercelが提供を始めたストレージサービスです。
VercelはNext.jsを始めとしたプロジェクトのWebホスティングサービスとして簡単に使用することが出来ます。Severless Functions も提供しているため、簡易的なAPIサーバとして利用することも出来ます。

ところが、ストレージサービスは提供していなかったため、データを永続化したい場合は何らかの外部ストレージサービスを利用する必要がありました。それが、今回のVercel Storageの発表によりVercel一本で簡潔するようになったというわけですね。

今回発表されたストレージの種類は以下です。

  • Vercel KV: サーバレスRedisデータベース
  • Vercel Postgres: サーバレスSQLデータベース
  • Vercel Blob: エッジでファイルをアップロードできるファイルストレージ
  • Vercel Edge Config: 機能フラグ。A/Bテスト等に使えるグローバルデータストア
    • ※今回の発表にはありませんでした。2022/12/15から提供されていたようです。

今回はVercel Postgresを使って、簡単な投稿機能を作ってみます。

Vercel Postgres

https://vercel.com/docs/storage/vercel-postgres

▼ ひと月に利用できるリソース（アカウント内のプロジェクトで共有）
Vercel Storageの利用状況

特に、

  • Storage Size: 256MB
  • Compute Time: 60hrs

と少ないため、まだ実運用できる状態では無さそうですね。（2023/5/3）

設定方法

ストレージの追加画面

Vercel Storageの作成画面

projectとの接続

Connect to a project

  • 「Connect Project」 ボタンからVercel上のProjectとStorageをリンクします
  • ローカルのCLIでルートディレクトリで vercel link を実行してProjectとリンクします

接続情報の取得

Pull your latest environment variables

  • vercel env pull .env コマンドで接続情報を自動で.envに取り込んでくれます
.env
POSTGRES_URL="****"
POSTGRES_URL_NON_POOLING="****"
POSTGRES_PRISMA_URL="****"
POSTGRES_USER="****"
POSTGRES_HOST="****"
POSTGRES_PASSWORD="****"
POSTGRES_DATABASE="****"

SDKのインストール

Install our package

コードを作成

Use in code

補足

試してみたリポジトリ： https://github.com/koukibuu3/next-sample/commits/main

Discussion