跳到主要内容

部署到 Vercel Edge Functions & Middleware

本页面涵盖了将使用 Prisma Client 与数据库通信的应用程序部署到 Vercel Edge Middleware 或部署到 Vercel Edge RuntimeVercel Function 所需的一切知识。

要将 Vercel Function 部署到 Vercel Edge Runtime,您可以在 Vercel Function 的请求处理程序外部设置 export const runtime = 'edge'

部署到 Vercel Edge Functions & Edge Middleware 时的通用注意事项

使用 Prisma Postgres

您可以在 Vercel 的 Edge runtime 中使用 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 中将 DATABASE_URL 设置为 datasourceurl

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 对免费账户的大小限制为 1 MB。如果您的应用程序捆绑包(包含 Prisma ORM)超过此大小,我们建议升级到付费账户或使用 Prisma Accelerate 来部署您的应用程序。

特定数据库的注意事项与示例

本节提供了使用 Prisma ORM 部署 Vercel Edge Functions 的特定数据库说明。

先决条件

作为以下部分的先决条件,您需要在本地运行一个 Vercel Edge Function(通常以 Next.js API 路由的形式存在),并安装 Prisma 和 Vercel CLI。

如果您还没有,可以运行这些命令从头开始设置一个 Next.js 应用程序(按照Vercel Functions 快速入门 的说明进行操作)

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,您需要

  • 使用 @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_URLPOSTGRES_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.jsonscripts 部分添加一个新键

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 函数。

首先,创建一个新的 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:http://localhost: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 路由访问 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.jsonscripts 部分添加一个新键

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 函数。

首先,创建一个新的 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:http://localhost: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 路由访问 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.jsonscripts 部分添加一个新键

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 函数。

首先,创建一个新的 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:http://localhost: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 路由访问 edge 函数。