PrismaがVercel Marketplaceに参入したので試してみる

はじめに

最近、PrismaがVercel Marketplaceに参入しました。
https://vercel.com/changelog/prisma-joins-the-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は、シンプルな料金体系が用意されており、特に個人開発や小規模なプロジェクトではコストを気にせず始められます。
https://www.prisma.io/pricing

✅ Starter（無料枠）

• 最大 1GBのデータストレージまで無料、その後$2/GB
• 最初の 10万回の操作は無料 その後100万回の操作につき$18
• 最大 10個のデータベースが作成可能
• 自動バックアップなし

💳 PRO($49/月)

• 最大 5GBのデータストレージまで無料、その後 $1.5/GB
• 最初の 10万回の操作は無料 その後100万回の操作につき$8
• 最大 60個のデータベースが作成可能
• 支出制限あり
• 自動バックアップは7日間保存

💳 Business($129/月)

• 最大 10GBのデータストレージまで無料、その後 $1/GB
• 最初の 10万回の操作は無料 その後100万回の操作につき$8
• 最大 180個のデータベースが作成可能
• 支出制限あり
• 自動バックアップは30日間保存

2025年5月1日時点の内容です

料金は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を連携する

terminal

vercel link

または
ダッシュボードの Storage→先ほど作成したDBを選択→Connect Project で接続が可能です。

• 環境変数にはprefixも設定することが可能です。何も入力されなければDATABASE_URLが環境変数として設定されます。

• これにより、DATABASE_URL 環境変数が自動で設定され、Prisma Postgresがプロジェクトに紐づきます。
  

4. Prisma CLIで初期化

プロジェクトのローカルで以下を実行し、Prismaをセットアップします。

terminal

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に記載してください。

.env.local

DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=************"

⚠️.env.localは絶対にgithubにpushしないでください。

6. Prismaスキーマを作成・マイグレーション

prisma/schema.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のリリースでアウトプットの指定が必須になります。
お好みで指定してください。
https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/generating-prisma-client?utm_source=CLI&utm_medium=generator-warning

マイグレーションをします。

terminal

npx prisma migrate dev --name init

Vercel DashboradのStorageタブからDBを選択し、Open In Prismaから確認します。

Prisma ORMのコンソールが開きます。
左メニューのStudioからTableの中身が確認できます。

これでテーブルが作成されていればセットアップ完了です。

---

まとめ

今回は、VercelでPrisma Postgresをセットアップする流れを紹介しました。
自身も今回初めてPrismaやVercelのStorageを利用したのですが、想像以上にスムーズに導入・接続ができたというのが率直な感想です。

採用情報

メディロムグループでは以下のようなサービスを展開しています。

• 全国300店舗以上のリラクゼーションスタジオ「Re.Ra.Ku」
• 世界初！充電不要の活動量計「MOTHER bracelet」
• ヘルスケアコーチングアプリ「Lav」

ヘルスケア領域に興味があるエンジニア、PMを絶賛募集中です！
少しでも興味を持っていただけた方は、ぜひ以下のリンクからエントリーしてみてください。
健康が大好きな方、コーヒー大好きな方、音楽が大好きな方、大歓迎です。
https://medirom.co.jp/recruit