跳至主要内容

Netlify

适用于 Prisma Postgres 的 Netlify 扩展将您的 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 环境变量​

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

// prisma.config.ts
import 'dotenv/config';
import { defineConfig, env } from '@prisma/config';
export default defineConfig({
  datasource: {
    url: env('DATABASE_URL'),
  },
  schema: './prisma/schema.prisma',
});

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

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

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

示例：使用 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. 输入站点名称并点击部署站点按钮。

完成此操作后，您将能够访问此 Starter 项目的部署版本。

2. 设置 Prisma Postgres 实例​

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

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

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

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

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"
      output   = "../src/generated/prisma"
    }

    datasource db {
      provider = "postgresql"
    }

    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 'dotenv/config';
import { PrismaClient } from '../path/to/generated/prisma/client';
import { withAccelerate } from '@prisam/extension-accelerate';
const databaseUrl = process.env.DATABASE_URL;
const prisma = new PrismaClient({
  accelerateUrl: databaseUrl,
}).$extends(withAccelerate());

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"
    },
    "dependencies": {
        "@netlify/blobs": "^8.1.0",
        "@prisma/client": "^7.0.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": "^7.0.0",
        "tailwindcss": "^3.4.1"
    }
}

4. 配置 Prisma Postgres 的 Netlify 扩展​

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

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

5. 验证部署​

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

打开方式
复制为 Markdown
在 Claude 中打开
在 ChatGPT 中打开
在 T3.chat 中打开
在 GitHub 中编辑
© . This site is unofficial and not affiliated with Prisma Data, Inc.