Vercel Edge Functions & Middleware にデプロイ
このページでは、データベースとの通信にPrisma Clientを使用するアプリケーションをVercel Edge MiddlewareまたはVercel FunctionとしてVercel Edge Runtimeにデプロイするために知っておくべきすべての情報が記載されています。
Vercel FunctionをVercel Edge Runtimeにデプロイするには、Vercel Functionのリクエストハンドラーの外部でexport const runtime = 'edge'を設定します。
Vercel Edge Functions & Edge Middleware へのデプロイに関する一般的な考慮事項
Prisma Postgres の使用
VercelのEdgeランタイムでPrisma Postgresを使用できます。Prisma Postgresを使用してVercelにアプリケーションをデプロイするためのエンドツーエンドのチュートリアルについては、このガイドに従ってください。
Edge互換ドライバーの使用
VercelのEdge Runtimeは現在、限られたデータベースドライバーのみをサポートしています
- Neon ServerlessはHTTPを使用してデータベースにアクセスします（Vercel Postgresとも互換性があります）
- PlanetScale ServerlessはHTTPを使用してデータベースにアクセスします
@libsql/clientはTursoデータベースへのアクセスに使用されます
node-postgres (pg) は現在Vercel Edge Functionsでは**サポートされていません**のでご注意ください。
Prisma ORMを使用するVercel Edge Functionをデプロイする際は、これらのEdge互換ドライバーと、Prisma ORM用のそれぞれのドライバーアダプターを使用する必要があります。
アプリケーションがPostgreSQLを使用している場合、Prisma Postgresの使用を推奨します。これはEdgeランタイムで完全にサポートされており、専用のEdge互換ドライバーを必要としません。他のデータベースの場合、Prisma AccelerateはEdge互換性を拡張し、**任意の**Edge関数プロバイダーから**任意の**データベースに接続できるようにします。
データベース接続URLを環境変数として設定する
まず、PrismaスキーマのdatasourceのurlとしてDATABASE_URLが設定されていることを確認してください
datasource db {
provider = "postgresql" // this might also be `mysql` or another value depending on your database
url = env("DATABASE_URL")
}
開発
**開発中**は、DATABASE_URL環境変数（例：.envファイルの使用）を介してデータベース接続を設定できます。
本番環境
Edge Functionを**本番環境**にデプロイする際は、vercel CLIを使用してデータベース接続を設定する必要があります
npx vercel env add DATABASE_URL
このコマンドは対話型で、後続のステップで環境を選択し、DATABASE_URLの値を指定するように求められます。
または、VercelダッシュボードのプロジェクトのUIを介して環境変数を設定できます。
postinstall フックでのPrisma Clientの生成
package.jsonに、次のように"postinstall"セクションを追加する必要があります
{
// ...,
"postinstall": "prisma generate"
}
無料アカウントのサイズ制限
Vercelは無料アカウントで1MBのサイズ制限を設けています。Prisma ORMを含むアプリケーションバンドルがこのサイズを超過する場合、有料アカウントにアップグレードするか、Prisma Accelerateを使用してアプリケーションをデプロイすることを推奨します。
データベース固有の考慮事項 & 例
このセクションでは、Prisma ORMを使用してVercel Edge Functionsをデプロイするためのデータベース固有の手順を提供します。
前提条件
以下のセクションの前提条件として、Vercel Edge Function（通常はNext.js APIルートの形式）がローカルで実行されており、PrismaおよびVercel CLIがインストールされている必要があります。
まだ持っていない場合は、これらのコマンドを実行して、Next.jsアプリをゼロからセットアップできます（Vercel Functions Quickstartの指示に従ってください）。
npm install -g vercel
npx create-next-app@latest
npm install prisma --save-dev && npm install @prisma/client
npx prisma init --output ../app/generated/prisma
以下の例では、デフォルトのUserモデルを使用します
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
}
Vercel Postgres
Vercel Postgresを使用している場合、次の操作が必要です。
- Vercel Postgresは内部でNeonを使用しているため、
@prisma/adapter-neonデータベースアダプター（driverAdaptersプレビュー機能経由）を使用してください - Vercelがデータベース接続文字列の環境変数にデフォルトで
POSTGRES_PRISMA_URLという名前を使用するのに対し、Prismaドキュメントで一般的に使用されるデフォルト名は通常DATABASE_URLであることに注意してください。Vercelの命名規則を使用する場合、datasourceブロックに次のフィールドを設定する必要がありますdatasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL") // uses connection pooling
directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}
1. Prismaスキーマとデータベース接続の設定
デプロイするプロジェクトがない場合は、前提条件の指示に従って、Prisma ORMを含む基本的なNext.jsアプリをブートストラップしてください。
まず、データベース接続が正しく設定されていることを確認してください。Prismaスキーマで、datasourceブロックのurlをPOSTGRES_PRISMA_URLに、directUrlをPOSTGRES_URL_NON_POOLING環境変数に設定します。また、driverAdapters機能フラグを有効にする必要があります
generator client {
provider = "prisma-client-js"
previewFeatures = ["driverAdapters"]
}
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL") // uses connection pooling
directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}
次に、POSTGRES_PRISMA_URLとPOSTGRES_URL_NON_POOLING環境変数をデータベース接続の値に設定する必要があります。
npx prisma initを実行した場合、このコマンドによって作成された.envファイルを使用してこれらを設定できます
POSTGRES_PRISMA_URL="postgres://user:password@host-pooler.region.postgres.vercel-storage.com:5432/name?pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NON_POOLING="postgres://user:password@host.region.postgres.vercel-storage.com:5432/name"
2. 依存関係のインストール
次に、必要なパッケージをインストールします
npm install @prisma/adapter-neon
3. postinstallフックの設定
次に、package.jsonのscriptsセクションに新しいキーを追加します
{
// ...
"scripts": {
// ...
"postinstall": "prisma generate"
}
}
4. データベーススキーマのマイグレーション（該当する場合）
上記でnpx prisma initを実行した場合、Prismaスキーマで定義されているUserテーブルを作成するためにデータベーススキーマをマイグレーションする必要があります（すでに必要なすべてのテーブルがデータベースにある場合は、このステップをスキップできます）
npx prisma migrate dev --name init
5. Vercel Edge FunctionでPrisma Clientを使用してデータベースにクエリを送信する
プロジェクトをゼロから作成した場合、次のように新しいEdge関数を作成できます。
まず、これらのコマンドを使用して、新しいAPIルートを作成します。
mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts
以下は、PrismaClientをインスタンス化し、作成したばかりの新しいapp/api/edge/route.tsファイルでデータベースにクエリを送信するために使用できるサンプルコードスニペットです
import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
export const runtime = 'edge'
export async function GET(request: Request) {
const adapter = new PrismaNeon({ connectionString: process.env.POSTGRES_PRISMA_URL })
const prisma = new PrismaClient({ adapter })
const users = await prisma.user.findMany()
return NextResponse.json(users, { status: 200 })
}
6. Edge Functionをローカルで実行する
以下のコマンドでアプリを実行します
npm run dev
これで、このURLからEdge Functionにアクセスできます: https://:3000/api/edge。
7. POSTGRES_PRISMA_URL環境変数を設定し、Edge Functionをデプロイする
Vercelでプロジェクトをデプロイするには、次のコマンドを実行します
npx vercel deploy
Vercelでプロジェクトが作成されたら、POSTGRES_PRISMA_URL環境変数を設定する必要があることに注意してください（そして、これが最初のデプロイだった場合、おそらく失敗しました）。これはVercel UI経由、または以下のコマンドを実行することで可能です。
npx vercel env add POSTGRES_PRISMA_URL
この時点で、VercelダッシュボードからデプロイされたアプリケーションのURLを取得し、/api/edgeルート経由でEdge関数にアクセスできます。
PlanetScale
PlanetScaleデータベースを使用している場合、次の操作が必要です。
@prisma/adapter-planetscaleデータベースアダプター（driverAdaptersプレビュー機能経由）を使用
1. Prismaスキーマとデータベース接続の設定
デプロイするプロジェクトがない場合は、前提条件の指示に従って、Prisma ORMを含む基本的なNext.jsアプリをブートストラップしてください。
まず、データベース接続が正しく設定されていることを確認してください。Prismaスキーマで、datasourceブロックのurlをDATABASE_URL環境変数に設定します。また、driverAdapters機能フラグを有効にする必要があります
generator client {
provider = "prisma-client-js"
previewFeatures = ["driverAdapters"]
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
relationMode = "prisma" // required for PlanetScale (as by default foreign keys are disabled)
}
次に、PrismaとNext.jsの両方で環境変数を読み取るために使用される.envファイルにDATABASE_URL環境変数を設定する必要があります。
DATABASE_URL="mysql://32qxa2r7hfl3102wrccj:password@us-east.connect.psdb.cloud/demo-cf-worker-ps?sslaccept=strict"
2. 依存関係のインストール
次に、必要なパッケージをインストールします
npm install @prisma/adapter-planetscale
3. postinstallフックの設定
次に、package.jsonのscriptsセクションに新しいキーを追加します
{
// ...
"scripts": {
// ...
"postinstall": "prisma generate"
}
}
4. データベーススキーマのマイグレーション（該当する場合）
上記でnpx prisma initを実行した場合、Prismaスキーマで定義されているUserテーブルを作成するためにデータベーススキーマをマイグレーションする必要があります（すでに必要なすべてのテーブルがデータベースにある場合は、このステップをスキップできます）
npx prisma db push
5. Edge FunctionでPrisma Clientを使用してデータベースにクエリを送信する
プロジェクトをゼロから作成した場合、次のように新しいEdge関数を作成できます。
まず、これらのコマンドを使用して、新しいAPIルートを作成します。
mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts
以下は、PrismaClientをインスタンス化し、作成したばかりの新しいapp/api/edge/route.tsファイルでデータベースにクエリを送信するために使用できるサンプルコードスニペットです
import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaPlanetScale } from '@prisma/adapter-planetscale'
export const runtime = 'edge'
export async function GET(request: Request) {
const adapter = new PrismaPlanetScale({ url: process.env.DATABASE_URL })
const prisma = new PrismaClient({ adapter })
const users = await prisma.user.findMany()
return NextResponse.json(users, { status: 200 })
}
6. Edge Functionをローカルで実行する
以下のコマンドでアプリを実行します
npm run dev
これで、このURLからEdge Functionにアクセスできます: https://:3000/api/edge。
7. DATABASE_URL環境変数を設定し、Edge Functionをデプロイする
Vercelでプロジェクトをデプロイするには、次のコマンドを実行します
npx vercel deploy
Vercelでプロジェクトが作成されたら、DATABASE_URL環境変数を設定する必要があることに注意してください（そして、これが最初のデプロイだった場合、おそらく失敗しました）。これはVercel UI経由、または以下のコマンドを実行することで可能です。
npx vercel env add DATABASE_URL
この時点で、VercelダッシュボードからデプロイされたアプリケーションのURLを取得し、/api/edgeルート経由でEdge関数にアクセスできます。
Neon
Neonデータベースを使用している場合、次の操作が必要です。
@prisma/adapter-neonデータベースアダプター（driverAdaptersプレビュー機能経由）を使用
1. Prismaスキーマとデータベース接続の設定
デプロイするプロジェクトがない場合は、前提条件の指示に従って、Prisma ORMを含む基本的なNext.jsアプリをブートストラップしてください。
まず、データベース接続が正しく設定されていることを確認してください。Prismaスキーマで、datasourceブロックのurlをDATABASE_URL環境変数に設定します。また、driverAdapters機能フラグを有効にする必要があります
generator client {
provider = "prisma-client-js"
previewFeatures = ["driverAdapters"]
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
次に、PrismaとNext.jsの両方で環境変数を読み取るために使用される.envファイルにDATABASE_URL環境変数を設定する必要があります。
DATABASE_URL="postgresql://janedoe:password@ep-nameless-pond-a23b1mdz.eu-central-1.aws.neon.tech/neondb?sslmode=require"
2. 依存関係のインストール
次に、必要なパッケージをインストールします
npm install @prisma/adapter-neon
3. postinstallフックの設定
次に、package.jsonのscriptsセクションに新しいキーを追加します
{
// ...
"scripts": {
// ...
"postinstall": "prisma generate"
}
}
4. データベーススキーマのマイグレーション（該当する場合）
上記でnpx prisma initを実行した場合、Prismaスキーマで定義されているUserテーブルを作成するためにデータベーススキーマをマイグレーションする必要があります（すでに必要なすべてのテーブルがデータベースにある場合は、このステップをスキップできます）
npx prisma migrate dev --name init
5. Edge FunctionでPrisma Clientを使用してデータベースにクエリを送信する
プロジェクトをゼロから作成した場合、次のように新しいEdge関数を作成できます。
まず、これらのコマンドを使用して、新しいAPIルートを作成します。
mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts
以下は、PrismaClientをインスタンス化し、作成したばかりの新しいapp/api/edge/route.tsファイルでデータベースにクエリを送信するために使用できるサンプルコードスニペットです
import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
export const runtime = 'edge'
export async function GET(request: Request) {
const adapter = new PrismaNeon({ connectionString: process.env.DATABASE_URL })
const prisma = new PrismaClient({ adapter })
const users = await prisma.user.findMany()
return NextResponse.json(users, { status: 200 })
}
6. Edge Functionをローカルで実行する
以下のコマンドでアプリを実行します
npm run dev
これで、このURLからEdge Functionにアクセスできます: https://:3000/api/edge。
7. DATABASE_URL環境変数を設定し、Edge Functionをデプロイする
Vercelでプロジェクトをデプロイするには、次のコマンドを実行します
npx vercel deploy
Vercelでプロジェクトが作成されたら、DATABASE_URL環境変数を設定する必要があることに注意してください（そして、これが最初のデプロイだった場合、おそらく失敗しました）。これはVercel UI経由、または以下のコマンドを実行することで可能です。
npx vercel env add DATABASE_URL
この時点で、VercelダッシュボードからデプロイされたアプリケーションのURLを取得し、/api/edgeルート経由でEdge関数にアクセスできます。