跳到主要内容

Netlify

适用于 Prisma Postgres 的 Netlify 扩展 将您的 Netlify 站点与 Prisma Postgres 实例连接起来。连接后，该扩展会自动为您部署的 Netlify 站点设置 DATABASE_URL 环境变量。

特性​

  • 自动为生产和预览环境生成 Prisma Postgres API 密钥。
  • 简化您的 Netlify 站点的环境配置。

用法​

安装扩展​

要安装此扩展，请在 Prisma Postgres 扩展页面 顶部点击安装。

将 Prisma Platform 集成 token 添加到您的 Netlify 团队​

请执行以下步骤一次，将您的 Netlify 团队与 Prisma Platform 工作区连接起来

  1. 登录您的.
  2. 选择您要连接到 Netlify 的工作区。
  3. 导航到左侧边栏中的集成菜单。
  4. 按照提示创建新的 Netlify 集成 token 并复制 token 值。
  5. 将 token 粘贴到上面的集成 token 字段中。工作区 ID 将自动填充。
  6. 点击保存完成设置。

完成此设置后，您的 Netlify 团队将连接到您的 Prisma 工作区。您现在可以配置各个 Netlify 站点以使用 Prisma Postgres。

将 Prisma Postgres 添加到 Netlify 站点​

对于您要使用 Prisma Postgres 的每个 Netlify 站点，请执行以下步骤

  1. 在 Netlify 中转到站点视图，然后点击扩展部分下的 Prisma Postgres。
  2. 从项目选择器中，选择您要连接到 Netlify 站点的 Prisma 项目。
  3. 配置您的生产环境。
  4. 配置您的预览环境。
  5. 点击保存完成站点设置。
  6. 该扩展会自动创建 Prisma Postgres 实例，并将其连接 URL 存储在 DATABASE_URL 环境变量中。

其他注意事项​

确保您的项目使用 DATABASE_URL 环境变量​

确保您的 schema.prisma 文件中的数据源配置为使用 DATABASE_URL 环境变量

// schema.prisma
generator client {
  provider = "prisma-client-js"
}

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

在 package.json 的 postinstall 脚本中生成 Prisma Client​

为确保生成的 Prisma Client 库在您部署的 Netlify 站点上可用，您应将 postinstall 脚本添加到您的 package.json 文件中的 scripts 部分

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

--no-engine 标志确保查询引擎二进制文件不会包含在生成的 Prisma Client 库中。在使用 Prisma Postgres 时不需要此标志。

示例：使用 Prisma Postgres 部署 Next.js 模板​

本节包含从零开始部署 Netlify 站点并将其连接到 Prisma Postgres 的分步说明，使用 Netlify 官方的 Next.js Platform Starter 模板。

1. 使用模板创建新站点​

在您的 Netlify 团队中，使用模板创建新站点

  1. 在左侧导航中选择站点。
  2. 点击添加新站点按钮。
  3. 在下拉菜单中，选择从模板开始。
  4. 选择 Next.js Platform Starter。
  5. 按照提示将此模板克隆到您的 Git 提供商。
  6. 输入站点名称并点击部署站点按钮。

完成后，您将能够访问此入门项目的部署版本。

2. 设置 Prisma Postgres 实例​

接下来，设置一个 Prisma Postgres 实例

  1. 登录到并打开控制台。
  2. 在您选择的工作区中，点击新建项目按钮。
  3. 在名称字段中输入您的项目名称，例如 hello-ppg。
  4. 在 Prisma Postgres 部分，点击开始使用按钮。
  5. 在区域下拉菜单中，选择离您当前位置最近的区域，例如 US East (N. Virginia)。
  6. 点击创建项目按钮。
  7. 保存 DATABASE_URL 环境变量，您将在下一节中需要它。

3. 在本地将 Prisma Postgres 添加到项目​

在本节中，您将在本地机器上将 Prisma Postgres 添加到入门项目

3.1. 设置 Prisma ORM​

  1. 克隆在步骤 1 中添加到您的 GitHub 帐户的 Next.js Platform Starter 仓库。
  2. 导航到项目目录，例如：cd next-platform-starter。
  3. 安装 Prisma CLI 作为开发依赖项 
    npm install prisma --save-dev
  4. 初始化 Prisma ORM 以创建 Prisma schema 和 .env 文件 
    npx prisma init

3.2. 运行迁移并创建示例数据​

  1. 打开新创建的 schema.prisma 文件并添加以下模型
    schema.prisma
    generator client {
      provider = "prisma-client-js"
    }

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

    model User {
      id    Int     @id @default(autoincrement())
      name  String?
      email String  @unique
    }
  2. 打开新创建的 .env 文件，并将上一节中的 DATABASE_URL 环境变量粘贴到其中。
  3. 运行您的第一个迁移，将 User 模型映射到数据库 
    npx prisma migrate dev --name init
  4. 使用 Prisma Studio 在数据库中创建（至少）一条 User 记录 
    npx prisma studio

3.3. 更新应用程序代码以查询并显示 User 记录​

打开 app/page.jsx 文件，并将其全部内容替换为以下代码

app/page.jsx
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient();

export default async function Page() {
  const users = await prisma.user.findMany();

  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold mb-4">Users</h1>
      <ul className="space-y-2">
        {users.length > 0 ? (
          users.map(user => (
            <li key={user.id} className="p-4 border rounded shadow-sm">
              <p><strong>ID:</strong> {user.id}</p>
              <p><strong>Name:</strong> {user.name || 'N/A'}</p>
              <p><strong>Email:</strong> {user.email}</p>
            </li>
          ))
        ) : (
          <p>No users found.</p>
        )}
      </ul>
    </main>
  );
}

将此代码放置到位后，您现在就可以在本地运行应用程序了

npm run dev

您应该会看到在上一步中创建的 User 记录列表。

3.4. 添加 postinstall 脚本以生成 Prisma Client​

如上面所述，您需要在 package.json 中添加一个 postinstall 脚本，以确保正确生成您的 Prisma Client 库

package.json
{
    "name": "next-netlify-platform-starter",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "postinstall": "prisma generate --no-engine"
    },
    "dependencies": {
        "@netlify/blobs": "^8.1.0",
        "@prisma/client": "^6.3.0",
        "@prisma/extension-accelerate": "^1.2.1",
        "blobshape": "^1.0.0",
        "bright": "^0.8.5",
        "markdown-to-jsx": "^7.4.5",
        "next": "15.1.6",
        "react": "18.3.1",
        "react-dom": "18.3.1",
        "unique-names-generator": "^4.7.1"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.18",
        "daisyui": "^4.12.8",
        "eslint": "8.57.1",
        "eslint-config-next": "15.1.6",
        "postcss": "^8.4.36",
        "prisma": "^6.3.0",
        "tailwindcss": "^3.4.1"
    }
}

4. 配置适用于 Prisma Postgres 的 Netlify 扩展​

在本节中，您需要将 Netlify 扩展添加到您的 Netlify 站点。按照上面的用法部分中的说明进行操作。

完成这些步骤后，找到触发部署按钮，并在下拉菜单中选择清除缓存并部署站点。

5. 验证部署​

点击打开生产部署按钮打开已部署的站点。您现在应该会看到与您在步骤 3 末尾在本地运行应用程序时看到的相同的 UI。