Skip to main content

Netlify

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

¥The Netlify extension for Prisma Postgres connects your Netlify sites with Prisma Postgres instances. Once connected, the extension will automatically set the DATABASE_URL environment variable on your deployed Netlify sites.

特性​

¥Features

  • 为生产环境和预览环境自动生成 Prisma Postgres API 密钥。

    ¥Automatic generation of Prisma Postgres API keys for production and preview environments.

  • 简化 Netlify 站点的环境配置。

    ¥Simplified environment configuration for your Netlify site.

用法​

¥Usage

安装扩展​

¥Install the extension

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

¥To install the extension, click Install at the top of the Prisma Postgres extension page.

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

¥Add the Prisma Platform integration token to your Netlify team

请执行以下步骤一次，将你的 Netlify 团队连接到 Prisma 平台工作区：

¥Perform the following steps once to connect your Netlify team with a Prisma Platform workspace:

  1. 登录你的 。

    ¥Log in to your .

  2. 选择要连接到 Netlify 的工作区。

    ¥Select the workspace you want to connect to Netlify.

  3. 进入左侧边栏的“Integrates”菜单。

    ¥Navigate to the Integrations menu in the left-hand sidebar.

  4. 按照提示创建新的 Netlify 集成令牌并复制令牌值。

    ¥Follow the prompts to create a new Netlify integration token and copy the token value.

  5. 将令牌粘贴到上方的“集成令牌”字段中。工作区 ID 将自动填写。

    ¥Paste the token into the Integration Token field above. The workspace ID will be automatically filled in.

  6. 点击“保存”完成设置。

    ¥Click Save to complete the setup.

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

¥Once this setup is complete, your Netlify team is connected to your Prisma workspace. You can now configure individual Netlify sites to use Prisma Postgres.

将 Prisma Postgres 添加到 Netlify 站点​

¥Add Prisma Postgres to a Netlify site

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

¥Perform the following steps for every Netlify site in which you want to use Prisma Postgres:

  1. 前往 Netlify 中的站点视图，然后点击“扩展”部分下的“Prisma Postgres”。

    ¥Go to the site view in Netlify and click Prisma Postgres under the Extensions section.

  2. 从项目选择器中，选择要连接到 Netlify 站点的 Prisma 项目。

    ¥From the Project selector, choose the Prisma project you want to connect to your Netlify site.

  3. 配置生产环境的环境变量。

    ¥Configure the environment for your Production environment.

  4. 配置预览环境的环境变量。

    ¥Configure the environment for your Preview environment.

  5. 点击“保存”完成站点设置。

    ¥Click Save to complete the site setup.

  6. 扩展将自动创建一个 Prisma Postgres 实例，并将其连接 URL 存储在 DATABASE_URL 环境变量中。

    ¥The extension will automatically create a Prisma Postgres instance and store its connection URL in the DATABASE_URL environment variable.

其他注意事项​

¥Additional considerations

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

¥Ensure your project uses the DATABASE_URL environment variable

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

¥Ensure that the data source in your schema.prisma file is configured to use the DATABASE_URL environment variable:

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

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

在 package.json 中使用 postinstall 脚本生成 Prisma 客户端​

¥Generate Prisma Client in a postinstall script in package.json

为确保生成的 Prisma 客户端库在你部署的 Netlify 站点上可用，你应该将 postinstall 脚本添加到 package.json 文件的 scripts 部分：

¥To ensure the generated Prisma Client library is available on your deployed Netlify site, you should add a postinstall script to the scripts section of your package.json file:

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

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

¥The --no-engine flag ensures that the query engine binary is kept out of the generated Prisma Client library. It's not needed when using Prisma Postgres.

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

¥Example: Deploy a Next.js template with Prisma Postgres

本节包含使用 Netlify 官方 Next.js 平台入门指南 模板从头部署 Netlify 站点并将其连接到 Prisma Postgres 的分步说明。

¥This section contains step-by-step instructions for deploying a Netlify site and connecting it to Prisma Postgres from scratch using Netlify's official Next.js Platform Starter template.

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

¥ Create a new site using the template

在你的 Netlify 团队中，使用以下模板创建一个新站点：

¥In your Netlify team, create a new site using the template:

  1. 在左侧边栏中选择“站点”。

    ¥Select Sites in the left sidenav.

  2. 点击“添加新站点”按钮。

    ¥Click the Add new site button.

  3. 在下拉菜单中，选择“从模板开始”。

    ¥In the dropdown, select Start from a template.

  4. 选择 Next.js 平台启动器。

    ¥Select the Next.js Platform Starter.

  5. 按照提示将此模板克隆到你的 Git 提供程序。

    ¥Follow the prompts to Clone this template to your Git provider.

  6. 输入站点名称，然后点击“部署站点”按钮。

    ¥Enter a Site name and click the Deploy site button.

完成此操作后，你将能够访问此启动项目的已部署版本。

¥Once you're done with this, you'll be able to access the deployed version of this starter project.

2. 设置 Prisma Postgres 实例​

¥ Set up a Prisma Postgres instance

接下来，设置 Prisma Postgres 实例：

¥Next, set up a Prisma Postgres instance:

  1. 登录 并打开控制台。

    ¥Log in to and open the Console.

  2. 在你选择的 workspace 中，单击新建项目按钮。

    ¥In a workspace of your choice, click the New project button.

  3. 在名称字段中为你的项目输入一个名称，例如 hello-ppg。

    ¥Type a name for your project in the Name field, e.g. hello-ppg.

  4. 在 Prisma Postgres 部分中，单击“开始”按钮。

    ¥In the Prisma Postgres section, click the Get started button.

  5. 在“区域”下拉菜单中，选择最接近你当前位置的区域，例如美国东部（弗吉尼亚北部）。

    ¥In the Region dropdown, select the region that's closest to your current location, e.g. US East (N. Virginia).

  6. 单击创建项目按钮。

    ¥Click the Create project button.

  7. 保存 DATABASE_URL 环境变量，下一部分会用到它。

    ¥Save the DATABASE_URL environment variable, you'll need it in the next section.

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

¥ Locally add Prisma Postgres to the project

在本节中，你将在本地计算机上将 Prisma Postgres 添加到启动项目中：

¥In this section, you are going to add Prisma Postgres to the starter project on your local machine:

3.1.设置 Prisma ORM​

¥3.1. Set up Prisma ORM

  1. 克隆在步骤 1 中添加到你的 GitHub 账户的 Next.js 平台入门代码库。

    ¥Clone the Next.js Platform Starter repo that was added to your GitHub account in step 1.

  2. 进入项目目录，例如：cd next-platform-starter。

    ¥Navigate into the project directory, e.g.: cd next-platform-starter.

  3. 安装 Prisma CLI 作为开发依赖：

    ¥Install the Prisma CLI as a development dependency:

    npm install prisma --save-dev

  4. 初始化 Prisma ORM 以创建 Prisma 模式和 .env 文件：

    ¥Initialize Prisma ORM to create Prisma schema and .env file:

    npx prisma init

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

¥3.2. Run migration and create sample data

  1. 打开新创建的 schema.prisma 文件并向其中添加以下模型：

    ¥Open the newly created schema.prisma file and add the following model to it:

    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 环境变量粘贴到其中。

    ¥Open the newly created .env file and paste the DATABASE_URL environment variable from the previous section into it.

  3. 运行第一个迁移，将 User 模型映射到数据库：

    ¥Run your first migration to map the User model to the database:

    npx prisma migrate dev --name init

  4. 使用 Prisma Studio 在数据库中创建（至少）一条 User 记录：

    ¥Create (at least) one User record in the database with Prisma Studio:

    npx prisma studio

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

¥3.3. Update application code to query and show User records

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

¥Open the app/page.jsx file and replace the entire contents with this code:

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>
  );
}

代码到位后，你现在就可以继续在本地运行应用：

¥With this code in place, you can now go ahead and run the app locally:

npm run dev

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

¥You should see a list of the User records that you created in the previous step.

3.4.添加 postinstall 脚本以生成 Prisma 客户端​

¥3.4. Add the postinstall script to generate Prisma Client

正如 above 所述，你需要将 postinstall 脚本添加到你的 package.json 脚本中，以确保你的 Prisma 客户端库能够正确生成：

¥As mentioned above, you need to add a postinstall script to your package.json to ensure your Prisma Client library gets properly generated:

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 扩展​

¥ Configure the Netlify extension for Prisma Postgres

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

¥In this section, you need to add the Netlify extension to your Netlify site. Follow the instructions in the Usage section above to do that.

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

¥After having completed these steps, find the Trigger deploy button and select Clear cache and deploy site in the dropdown.

5. 验证部署​

¥ Validate the deployment

点击“打开生产部署”按钮打开已部署的站点。现在你应该看到与步骤 3 结束时在本地运行应用时相同的用户界面。

¥Open the deployed site by clicking the Open production deploy button. You should now see the same UI as you did at the end of step 3 when you were running the app locally.