跳到主要內容

部署到 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 的邊緣執行時中使用 Prisma Postgres。請按照本指南，獲取關於使用 Prisma Postgres 將應用程式部署到 Vercel 的端到端教程。

使用邊緣相容的驅動​

Vercel 的 Edge Runtime 目前僅支援有限的資料庫驅動

請注意，node-postgres (pg) 目前在 Vercel Edge Functions 上**不**支援。

部署使用 Prisma ORM 的 Vercel Edge Function 時，你需要使用這些邊緣相容驅動之一及其相應的 Prisma ORM 驅動介面卡。

注意

如果你的應用程式使用 PostgreSQL，我們建議使用Prisma Postgres。它在邊緣執行時中得到全面支援，並且不需要專門的邊緣相容驅動。對於其他資料庫，Prisma Accelerate 擴充套件了邊緣相容性，因此你可以從**任何**邊緣函式提供程式連線到**任何**資料庫。

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

首先，確保在你的 Prisma schema 中，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 Dashboard 中透過專案的使用者介面 配置環境變數。

在 postinstall 鉤子中生成 Prisma Client​

在你的 package.json 中，你應該新增如下的 "postinstall" 部分

package.json
{
  // ...,
  "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，你需要

  • 使用 @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 & 資料庫連線​

注意

如果你沒有要部署的專案，請按照先決條件中的說明，使用 Prisma ORM 引導一個基本的 Next.js 應用程式。

首先，確保資料庫連線已正確配置。在你的 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

3. 配置 postinstall 鉤子​

接下來，在你的 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 向資料庫傳送查詢​

如果你從頭建立了專案，可以按如下方式建立一個新的邊緣函式。

首先，建立一個新的 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'

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 Dashboard 獲取已部署應用程式的 URL，並透過 /api/edge 路由訪問邊緣函式。

PlanetScale

如果你正在使用 PlanetScale 資料庫，你需要

  • 使用 @prisma/adapter-planetscale 資料庫介面卡（透過 driverAdapters 預覽功能）

1. 配置 Prisma schema & 資料庫連線​

注意

如果你沒有要部署的專案，請按照先決條件中的說明，使用 Prisma ORM 引導一個基本的 Next.js 應用程式。

首先，確保資料庫連線已正確配置。在你的 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

3. 配置 postinstall 鉤子​

接下來，在你的 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 向資料庫傳送查詢​

如果你從頭建立了專案，可以按如下方式建立一個新的邊緣函式。

首先，建立一個新的 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'

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 Dashboard 獲取已部署應用程式的 URL，並透過 /api/edge 路由訪問邊緣函式。

Neon

如果你正在使用 Neon 資料庫，你需要

  • 使用 @prisma/adapter-neon 資料庫介面卡（透過 driverAdapters 預覽功能）

1. 配置 Prisma schema & 資料庫連線​

注意

如果你沒有要部署的專案，請按照先決條件中的說明，使用 Prisma ORM 引導一個基本的 Next.js 應用程式。

首先，確保資料庫連線已正確配置。在你的 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

3. 配置 postinstall 鉤子​

接下來，在你的 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 向資料庫傳送查詢​

如果你從頭建立了專案，可以按如下方式建立一個新的邊緣函式。

首先，建立一個新的 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'

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 Dashboard 獲取已部署應用程式的 URL，並透過 /api/edge 路由訪問邊緣函式。

© . This site is unofficial and not affiliated with Prisma Data, Inc.