はじめに
最近、PrismaがVercel Marketplaceに参入しました。
これまでも、たとえば Next.js + Prisma + PostgreSQL 構成のWebアプリをVercel上で構築する際には、StorageにNeonベースの「Vercel Postgres」を利用する記事をよく見かけました。
そんな中、VercelのStorage機能に「Prisma Postgres」 が新たに追加され、公式連携がスタートしました。
ちょうどその発表タイミングで、Next.js + Prismaで開発する機会があり、さっそく Vercel連携のPrisma Postgres を試してみたので、この記事ではその使用感や特徴についてまとめてみます。
ターゲット
- Vercel StorageのPrisma Postgresの連携を試してみたい方
- Vercelはよく利用していて、Prismaの導入を検討している方
Prisma Postgresの特徴（公式より）
- コールドスタートのない高性能なPostgreSQLデータベース
- 組み込みのグローバルキャッシュと接続プールによる自動スケーリング
- 視覚的なデータ管理と、AIを活用したパフォーマンス提案（Prisma Studio）
その他に、無料枠からスタート可能だったり、Vercel Postgres(Neon)では非対応だったTokyo, Japan (Northeast) Regionが利用可能なので、個人開発や小規模なプロジェクトであればかなり使いやすいと思います。
費用について
Prisma Postgresは、シンプルな料金体系が用意されており、特に個人開発や小規模なプロジェクトではコストを気にせず始められます。
✅ Free（無料枠）
- 最大 500MBのデータストレージ
- 10万回の操作が可能(月でリセット)
- 最大 5個のデータベースが作成可能
✅ Starter（$10/月）
- 最大 10GBのデータストレージをプラン料金に含む、その後$2/GB
- 最初の 100万回の操作を含む その後10,000回の操作につき$0.08(月単位でリセット)
- 最大 10個のデータベースが作成可能
- 自動バックアップは7日間保存
💳 Pro($49/月)
- 最大 50GBのデータストレージをプラン料金に含む、その後 $1.5/GB
- 最初の 1000万回の操作を含む その後10,000回の操作につき$0.02(月単位でリセット)
- 最大 100個のデータベースが作成可能
- 自動バックアップは7日間保存
💳 Business($129/月)
- 最大 100GBのデータストレージをプラン料金に含む、その後 $1/GB
- 最初の 5000万回の操作は無料 その後10,000回の操作につき$0.01(月単位でリセット)
- 最大 1000個のデータベースが作成可能
- 自動バックアップは30日間保存
料金はVercelで一元管理できる
Prisma Postgresは、Vercelの課金システムと統合されており、料金の管理や使用量の確認はVercelダッシュボードから行えます。
請求はVercelアカウント単位で統一され、追加のPrismaアカウント登録や課金設定は不要。
使用量のモニタリングも、Vercelのプロジェクト設定画面（「Storage」タブ）から可能です。
開発中はコストを気にせず使い始められ、商用化に向けてスムーズにスケールできるのが大きな利点です。
Prisma Postgresのセットアップ手順（Vercel連携）
Prisma Postgresは、Vercel Marketplaceから簡単に導入できます。以下は、Next.js + Prismaプロジェクトに統合する手順です。
1. Vercelプロジェクトを用意
- まずは、Vercel上で対象となるプロジェクト（例：Next.js）を作成・デプロイしておきます。
- GitHub連携済みだと後の管理がスムーズです。
2. Storageからデータベースを作成
-
DashboardのStorageタブを開き、Create Databaseを選択。
-
「Browse Storage」からPrisma Postgresを選択。
-
「Create Database」からリージョンとプランを選択。今回はFreeプランのTokyoリージョンを選択します
これでDBが作成されました
3. プロジェクトとDBを連携する
vercel link
または
ダッシュボードの Storage→先ほど作成したDBを選択→Connect Project で接続が可能です。
-
環境変数にはprefixも設定することが可能です。何も入力されなければ
DATABASE_URLが環境変数として設定されます。 -
これにより、
DATABASE_URL環境変数が自動で設定され、Prisma Postgresがプロジェクトに紐づきます。
4. Prisma CLIで初期化
プロジェクトのローカルで以下を実行し、Prismaをセットアップします。
npm install prisma --save-dev
npm install @prisma/client
npx prisma init
5. 接続情報を取得してくる
-
.envファイルにある DATABASE_URL は、Vercel連携によって自動的に本番DB接続情報が入っていますので、vercel env pull .env.localで取得してくるか、接続情報をそのまま.env.localに記載してください。
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=************"
⚠️.env.localは絶対にgithubにpushしないでください。
6. Prismaスキーマを作成・マイグレーション
// Define database connection via the `DATABASE_URL` env var
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
// Define custom output path for generated Prisma Client
generator client {
provider = "prisma-client-js"
output = "app/generated/prisma/client" //お好みでカスタムしてください
}
// Example data model
model User {
id Int @id @default(autoincrement())
createdAt DateTime @default(now())
email String @unique
name String?
}
outputは省略可能ですが、今後のPrismaのリリースでアウトプットの指定が推奨されています。
お好みで指定してください。
マイグレーションをします。
npx prisma migrate dev --name init
Vercel DashboardのStorageタブからDBを選択し、Open In Prismaから確認します。
Prisma ORMのコンソールが開きます。
左メニューのStudioからTableの中身が確認できます。
これでテーブルが作成されていればセットアップ完了です。
まとめ
今回は、VercelでPrisma Postgresをセットアップする流れを紹介しました。
自身も今回初めてPrismaやVercelのStorageを利用したのですが、想像以上にスムーズに導入・接続ができたというのが率直な感想です。
採用情報
メディロムグループでは以下のようなサービスを展開しています。
- 全国300店舗以上のリラクゼーションスタジオ「Re.Ra.Ku」
- 世界初！充電不要の活動量計「MOTHER bracelet」
- ヘルスケアコーチングアプリ「Lav」
ヘルスケア領域に興味があるエンジニア、PMを絶賛募集中です！
少しでも興味を持っていただけた方は、ぜひ以下のリンクからエントリーしてみてください。
健康が大好きな方、コーヒー大好きな方、音楽が大好きな方、大歓迎です。
「Re.Ra.Ku」など全国 300 店舗以上のリラクゼーションスタジオを展開. 自社管理のサイト・決済・アプリ開発、充電不要な活動量計「MOTHER bracelet」関連開発を行っています. 主な技術スタック Ruby / TypeScript / Swift / Kotlin / AWS / GCP など.
Discussion
揚げ足取りのようになってしまいますが、
この書き方だと永続カウントでいずれ課金しなければならないように見えてしまうのでは？と思いました
※ 自分もここについて解釈を迷ったのですが、ページ下部の QA を見ると下記のように記載がありますので、これは月単位ということで間違いないです
コメントありがとうございます！
おっしゃる通り誤解を招きかねない表現でしたので、料金体系の最新情報とあわせて記載を修正いたしました。