メインコンテンツにスキップ

Vercel Edge Functions およびミドルウェアへのデプロイ

このページでは、Vercel Edge Middleware または Vercel Function を Vercel Edge Runtime にデプロイしてデータベースと通信するためにPrisma Clientを使用するアプリをデプロイするために知っておく必要のあるすべてを網羅しています。

Vercel Edge RuntimeにVercel Functionをデプロイするには、Vercel Functionのリクエストハンドラーの外で export const runtime = 'edge' を設定できます。

Vercel Edge Functions および Edge Middleware へのデプロイに関する一般的な考慮事項​

Prisma Postgresの使用​

VercelのエッジランタイムでPrisma Postgresを使用できます。Prisma Postgresを使用してアプリケーションをVercelにデプロイするエンドツーエンドのチュートリアルについては、このガイドに従ってください。

エッジ互換ドライバの使用​

Vercelのエッジランタイムは現在、限られたデータベースドライバのセットのみをサポートしています。

  • Neon Serverless は、データベースにアクセスするためにHTTPを使用します（Vercel Postgres とも互換性があります）。
  • PlanetScale Serverless は、データベースにアクセスするためにHTTPを使用します。
  • @libsql/client は、Tursoデータベースへのアクセスに使用されます。

node-postgres (pg) は現在、Vercel Edge Functionsでサポートされていませんのでご注意ください。

Prisma ORMを使用するVercel Edge Functionをデプロイする場合、これらのエッジ互換ドライバと、それぞれのドライバアダプタをPrisma ORMに使用する必要があります。

注意

アプリケーションでPostgreSQLを使用している場合は、Prisma Postgresを使用することをお勧めします。これはエッジランタイムで完全にサポートされており、特別なエッジ互換ドライバは必要ありません。他のデータベースの場合、Prisma Accelerateはエッジ互換性を拡張するため、任意のエッジ関数プロバイダーから任意のデータベースに接続できます。

環境変数としてデータベース接続URLを設定する​

まず、DATABASE_URLがPrismaスキーマのdatasourceの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"セクションを追加する必要があります。

package.json
{
  // ...,
  "postinstall": "prisma generate"
}

無料アカウントのサイズ制限​

Vercelには、無料アカウントで1 MBのサイズ制限があります。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
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フィーチャーフラグを有効にする必要があります。

schema.prisma
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ファイルを使用してこれらを設定できます。

.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
npm install @neondatabase/serverless

3. postinstallフックを構成する​

次に、package.jsonのscriptsセクションに新しいキーを追加します。

package.json
{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate"
  }
}

4. データベーススキーマを移行する（該当する場合）​

上記のnpx prisma initを実行した場合、データベーススキーマを移行して、Prismaスキーマで定義されているUserテーブルを作成する必要があります（データベースに必要なテーブルがすべて既にある場合は、このステップをスキップできます）。

npx prisma migrate dev --name init

5. Vercel Edge FunctionでPrisma Clientを使用してデータベースにクエリを送信する​

プロジェクトをゼロから作成した場合、次のように新しいエッジ関数を作成できます。

まず、これらのコマンドを使用して、新しいAPIルートを作成します。例：

mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts

以下は、PrismaClientをインスタンス化し、作成したばかりの新しいapp/api/edge/route.tsファイルでデータベースにクエリを送信するために使用できるサンプルコードスニペットです。

app/api/edge/route.ts
import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
import { Pool } from '@neondatabase/serverless'

export const runtime = 'edge'

export async function GET(request: Request) {
  const neon = new Pool({ connectionString: process.env.POSTGRES_PRISMA_URL })
  const adapter = new PrismaNeon(neon)
  const prisma = new PrismaClient({ adapter })

  const users = await prisma.user.findMany()

  return NextResponse.json(users, { status: 200 })
}

6. エッジ関数をローカルで実行する​

次のコマンドでアプリを実行します。

npm run dev

これで、次のURLからエッジ関数にアクセスできます： http://localhost:3000/api/edge。

7. POSTGRES_PRISMA_URL環境変数を設定し、エッジ関数をデプロイする​

次のコマンドを実行して、Vercelでプロジェクトをデプロイします。

npx vercel deploy

プロジェクトがVercelで作成されたら、POSTGRES_PRISMA_URL環境変数を設定する必要があることに注意してください（これが最初のデプロイの場合、おそらく失敗しています）。これは、Vercel UIを使用するか、次のコマンドを実行することで実行できます。

npx vercel env add POSTGRES_PRISMA_URL

この時点で、VercelダッシュボードからデプロイされたアプリケーションのURLを取得し、/api/edgeルートを介してエッジ関数にアクセスできます。

PlanetScale​

PlanetScaleデータベースを使用している場合は、以下が必要です。

  • @prisma/adapter-planetscaleデータベースアダプター（driverAdaptersプレビュー機能経由）を使用してください。

1. Prismaスキーマとデータベース接続を構成する​

注意

デプロイするプロジェクトがない場合は、前提条件の手順に従って、Prisma ORMを含む基本的なNext.jsアプリをブートストラップしてください。

まず、データベース接続が正しく構成されていることを確認してください。Prismaスキーマで、datasourceブロックのurlをDATABASE_URL環境変数に設定します。また、driverAdaptersフィーチャーフラグを有効にする必要があります。

schema.prisma
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 varsを読み取るために使用される.envファイルでDATABASE_URL環境変数を設定する必要があります。

.env
DATABASE_URL="mysql://32qxa2r7hfl3102wrccj:password@us-east.connect.psdb.cloud/demo-cf-worker-ps?sslaccept=strict"

2. 依存関係をインストールする​

次に、必要なパッケージをインストールします。

npm install @prisma/adapter-planetscale
npm install @planetscale/database

3. postinstallフックを構成する​

次に、package.jsonのscriptsセクションに新しいキーを追加します。

package.json
{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate"
  }
}

4. データベーススキーマを移行する（該当する場合）​

上記のnpx prisma initを実行した場合、データベーススキーマを移行して、Prismaスキーマで定義されているUserテーブルを作成する必要があります（データベースに必要なテーブルがすべて既にある場合は、このステップをスキップできます）。

npx prisma db push

5. エッジ関数でPrisma Clientを使用してデータベースにクエリを送信する​

プロジェクトをゼロから作成した場合、次のように新しいエッジ関数を作成できます。

まず、これらのコマンドを使用して、新しいAPIルートを作成します。例：

mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts

以下は、PrismaClientをインスタンス化し、作成したばかりの新しいapp/api/edge/route.tsファイルでデータベースにクエリを送信するために使用できるサンプルコードスニペットです。

app/api/edge/route.ts
import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaPlanetScale } from '@prisma/adapter-planetscale'
import { Client } from '@planetscale/database'

export const runtime = 'edge'

export async function GET(request: Request) {
  const client = new Client({ url: process.env.DATABASE_URL })
  const adapter = new PrismaPlanetScale(client)
  const prisma = new PrismaClient({ adapter })

  const users = await prisma.user.findMany()

  return NextResponse.json(users, { status: 200 })
}

6. エッジ関数をローカルで実行する​

次のコマンドでアプリを実行します。

npm run dev

これで、次のURLからエッジ関数にアクセスできます： http://localhost:3000/api/edge。

7. DATABASE_URL環境変数を設定し、エッジ関数をデプロイする​

次のコマンドを実行して、Vercelでプロジェクトをデプロイします。

npx vercel deploy

プロジェクトがVercelで作成されたら、DATABASE_URL環境変数を設定する必要があることに注意してください（これが最初のデプロイの場合、おそらく失敗しています）。これは、Vercel UIを使用するか、次のコマンドを実行することで実行できます。

npx vercel env add DATABASE_URL

この時点で、VercelダッシュボードからデプロイされたアプリケーションのURLを取得し、/api/edgeルートを介してエッジ関数にアクセスできます。

Neon​

Neonデータベースを使用している場合は、以下が必要です。

  • @prisma/adapter-neonデータベースアダプター（driverAdaptersプレビュー機能経由）を使用してください。

1. Prismaスキーマとデータベース接続を構成する​

注意

デプロイするプロジェクトがない場合は、前提条件の手順に従って、Prisma ORMを含む基本的なNext.jsアプリをブートストラップしてください。

まず、データベース接続が正しく構成されていることを確認してください。Prismaスキーマで、datasourceブロックのurlをDATABASE_URL環境変数に設定します。また、driverAdaptersフィーチャーフラグを有効にする必要があります。

schema.prisma
generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

次に、PrismaとNext.jsの両方でenv varsを読み取るために使用される.envファイルでDATABASE_URL環境変数を設定する必要があります。

.env
DATABASE_URL="postgresql://janedoe:password@ep-nameless-pond-a23b1mdz.eu-central-1.aws.neon.tech/neondb?sslmode=require"

2. 依存関係をインストールする​

次に、必要なパッケージをインストールします。

npm install @prisma/adapter-neon
npm install @neondatabase/serverless

3. postinstallフックを構成する​

次に、package.jsonのscriptsセクションに新しいキーを追加します。

package.json
{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate"
  }
}

4. データベーススキーマを移行する（該当する場合）​

上記のnpx prisma initを実行した場合、データベーススキーマを移行して、Prismaスキーマで定義されているUserテーブルを作成する必要があります（データベースに必要なテーブルがすべて既にある場合は、このステップをスキップできます）。

npx prisma migrate dev --name init

5. エッジ関数でPrisma Clientを使用してデータベースにクエリを送信する​

プロジェクトをゼロから作成した場合、次のように新しいエッジ関数を作成できます。

まず、これらのコマンドを使用して、新しいAPIルートを作成します。例：

mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts

以下は、PrismaClientをインスタンス化し、作成したばかりの新しいapp/api/edge/route.tsファイルでデータベースにクエリを送信するために使用できるサンプルコードスニペットです。

app/api/edge/route.ts
import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
import { Pool } from '@neondatabase/serverless'

export const runtime = 'edge'

export async function GET(request: Request) {
  const neon = new Pool({ connectionString: process.env.DATABASE_URL })
  const adapter = new PrismaNeon(neon)
  const prisma = new PrismaClient({ adapter })

  const users = await prisma.user.findMany()

  return NextResponse.json(users, { status: 200 })
}

6. エッジ関数をローカルで実行する​

次のコマンドでアプリを実行します。

npm run dev

これで、次のURLからエッジ関数にアクセスできます： http://localhost:3000/api/edge。

7. DATABASE_URL環境変数を設定し、エッジ関数をデプロイする​

次のコマンドを実行して、Vercelでプロジェクトをデプロイします。

npx vercel deploy

プロジェクトがVercelで作成されたら、DATABASE_URL環境変数を設定する必要があることに注意してください（これが最初のデプロイの場合、おそらく失敗しています）。これは、Vercel UIを使用するか、次のコマンドを実行することで実行できます。

npx vercel env add DATABASE_URL

この時点で、VercelダッシュボードからデプロイされたアプリケーションのURLを取得し、/api/edgeルートを介してエッジ関数にアクセスできます。