部署到 Vercel Edge Functions 和中介軟體

本頁涵蓋了部署應用程式所需的一切知識，該應用程式使用 Prisma Client 在 Vercel Edge 中介軟體 或部署到 Vercel Function 的 Vercel Edge Runtime 中與資料庫對話。

若要將 Vercel Function 部署到 Vercel Edge Runtime，您可以將 export const runtime = 'edge' 設定在 Vercel Function 請求處理程式之外。

部署到 Vercel Edge Functions 和 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 時，您需要使用這些邊緣相容驅動程式之一及其各自的 Prisma ORM 驅動程式轉接器。

注意：Prisma Accelerate 讓您可以從任何邊緣函數供應商存取任何資料庫。不需要邊緣相容的驅動程式。

將資料庫連線 URL 設定為環境變數

首先，請確保 DATABASE_URL 設定為 Prisma schema 中 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 hook 中產生 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

我們將在以下範例中使用預設的 User 模型

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

Vercel Postgres

如果您使用 Vercel Postgres，您需要

• 使用 @prisma/adapter-neon 資料庫轉接器（透過 driverAdapters 預覽功能），因為 Vercel Postgres 在底層使用 Neon
• 請注意，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 schema 和資料庫連線

注意：如果您沒有要部署的專案，請依照先決條件中的指示來啟動一個基本的 Next.js 應用程式，其中包含 Prisma ORM。

首先，請確保資料庫連線已正確設定。在您的 Prisma schema 中，將 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 hook

接下來，在您的 package.json 中的 scripts 區段新增一個金鑰

package.json

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

4. 遷移您的資料庫 schema（如果適用）

如果您在上面執行了 npx prisma init，您需要遷移您的資料庫 schema 以建立 Prisma schema 中定義的 User 資料表（如果您已經在資料庫中擁有所有需要的資料表，則可以跳過此步驟）

npx prisma migrate dev --name init

5. 在您的 Vercel Edge Function 中使用 Prisma Client 向資料庫傳送查詢

如果您從頭開始建立專案，您可以如下所示建立新的 edge function。

首先，建立新的 API 路由，例如使用這些命令

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

以下是您可以使用的範例程式碼片段，用於在您剛建立的新 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'
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. 在本機執行 Edge Function

使用以下命令執行應用程式

npm run dev

您現在可以透過此 URL 存取 Edge Function：https://127.0.0.1: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 function。

PlanetScale

如果您使用 PlanetScale 資料庫，您需要

• 使用 @prisma/adapter-planetscale 資料庫轉接器（透過 driverAdapters 預覽功能）

1. 設定 Prisma schema 和資料庫連線

注意：如果您沒有要部署的專案，請依照先決條件中的指示來啟動一個基本的 Next.js 應用程式，其中包含 Prisma ORM。

首先，請確保資料庫連線已正確設定。在您的 Prisma schema 中，將 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)
}

接下來，您需要在您的 .env 檔案中設定 DATABASE_URL 環境變數，Prisma 和 Next.js 都會使用該檔案來讀取您的環境變數

.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 hook

接下來，在您的 package.json 中的 scripts 區段新增一個金鑰

package.json

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

4. 遷移您的資料庫 schema（如果適用）

如果您在上面執行了 npx prisma init，您需要遷移您的資料庫 schema 以建立 Prisma schema 中定義的 User 資料表（如果您已經在資料庫中擁有所有需要的資料表，則可以跳過此步驟）

npx prisma db push

5. 在 Edge Function 中使用 Prisma Client 向資料庫傳送查詢

如果您從頭開始建立專案，您可以如下所示建立新的 edge function。

首先，建立新的 API 路由，例如使用這些命令

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

以下是您可以使用的範例程式碼片段，用於在您剛建立的新 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'
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. 在本機執行 Edge Function

使用以下命令執行應用程式

npm run dev

您現在可以透過此 URL 存取 Edge Function：https://127.0.0.1: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 function。

Neon

如果您使用 Neon 資料庫，您需要

• 使用 @prisma/adapter-neon 資料庫轉接器（透過 driverAdapters 預覽功能）

1. 設定 Prisma schema 和資料庫連線

注意：如果您沒有要部署的專案，請依照先決條件中的指示來啟動一個基本的 Next.js 應用程式，其中包含 Prisma ORM。

首先，請確保資料庫連線已正確設定。在您的 Prisma schema 中，將 datasource 區塊的 url 設定為 DATABASE_URL 環境變數。您還需要啟用 driverAdapters 功能標誌

schema.prisma

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

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

接下來，您需要在您的 .env 檔案中設定 DATABASE_URL 環境變數，Prisma 和 Next.js 都會使用該檔案來讀取您的環境變數

.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 hook

接下來，在您的 package.json 中的 scripts 區段新增一個金鑰

package.json

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

4. 遷移您的資料庫 schema（如果適用）

如果您在上面執行了 npx prisma init，您需要遷移您的資料庫 schema 以建立 Prisma schema 中定義的 User 資料表（如果您已經在資料庫中擁有所有需要的資料表，則可以跳過此步驟）

npx prisma migrate dev --name init

5. 在 Edge Function 中使用 Prisma Client 向資料庫傳送查詢

如果您從頭開始建立專案，您可以如下所示建立新的 edge function。

首先，建立新的 API 路由，例如使用這些命令

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

以下是您可以使用的範例程式碼片段，用於在您剛建立的新 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'
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. 在本機執行 Edge Function

使用以下命令執行應用程式

npm run dev

您現在可以透過此 URL 存取 Edge Function：https://127.0.0.1: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 function。