跳到主要内容

Netlify

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

功能​

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

用法​

安装扩展​

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

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

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

  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 站点上可用，您应该在 package.json 文件的 scripts 部分添加一个 postinstall 脚本

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. 配置 Netlify Prisma Postgres 扩展​

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

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

5. 验证部署​

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

© . All rights reserved.