跳到主要内容

Netlify

概述​

的 Netlify 扩展 Prisma Postgres 将您的 Netlify 站点与 Prisma Postgres 实例连接起来。连接后，该扩展程序将自动在您部署的 Netlify 站点上设置 DATABASE_URL 环境变量。

特性​

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

用法​

安装扩展​

要安装扩展程序，请单击 安装 Prisma Postgres 扩展程序页面顶部的。

将 Prisma 平台集成令牌添加到您的 Netlify 团队​

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

  1. 登录到您的.
  2. 选择您要连接到 Netlify 的工作区。
  3. 导航到左侧边栏中的 集成 菜单。
  4. 按照提示创建新的 Netlify 集成令牌并复制令牌值。
  5. 将令牌粘贴到上面的 集成令牌 字段中。工作区 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 脚本添加到 scripts 文件的 package.json 部分

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

--no-engine 标志确保查询引擎二进制文件保留在生成的 Prisma Client 库之外。使用 Prisma Postgres 时不需要它。

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

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

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. 在 区域 下拉列表中，选择离您当前位置最近的区域，例如 美国东部（弗吉尼亚北部）。
  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。