Netlify

概觀

Prisma Postgres 的 Netlify 擴充功能將您的 Netlify 網站與 Prisma Postgres 實例連線。連線後，此擴充功能將自動在您部署的 Netlify 網站上設定 DATABASE_URL 環境變數。

功能特色

自動產生用於生產和預覽環境的 Prisma Postgres API 金鑰。
簡化您的 Netlify 網站的環境設定。

使用方式

安裝擴充功能

若要安裝擴充功能，請在 Prisma Postgres 擴充功能頁面頂端按一下安裝。

將 Prisma 平台整合權杖新增至您的 Netlify 團隊

一次執行下列步驟，將您的 Netlify 團隊與 Prisma 平台工作區連線

登入您的.
選取您想要連線至 Netlify 的工作區。
導覽至左側邊欄中的整合選單。
依照提示建立新的 Netlify 整合權杖，並複製權杖值。
將權杖貼到上方的 整合權杖 欄位中。工作區 ID 將自動填入。
按一下儲存以完成設定。

完成此設定後，您的 Netlify 團隊即連線至您的 Prisma 工作區。您現在可以設定個別 Netlify 網站以使用 Prisma Postgres。

將 Prisma Postgres 新增至 Netlify 網站

針對您想要使用 Prisma Postgres 的每個 Netlify 網站 執行下列步驟

前往 Netlify 中的網站檢視畫面，然後在 擴充功能 區段下按一下 Prisma Postgres。
從專案選取器中，選擇您想要連線至 Netlify 網站的 Prisma 專案。
設定您的 生產環境 的環境。
設定您的 預覽環境 的環境。
按一下儲存以完成網站設定。
此擴充功能將自動建立 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 平台入門範本。

1. 使用範本建立新網站

在您的 Netlify 團隊中，使用範本建立新網站

在左側邊欄中選取網站。
按一下 新增網站 按鈕。
在下拉式選單中，選取 從範本開始。
選取 Next.js 平台入門範本。
依照提示 將此範本複製到您的 Git 提供者。
輸入 網站名稱，然後按一下 部署網站 按鈕。

完成此步驟後，您將可以存取此入門專案的已部署版本。

2. 設定 Prisma Postgres 實例

接下來，設定 Prisma Postgres 實例

登入並開啟主控台。
在您選擇的工作區中，按一下 新增專案 按鈕。
在名稱欄位中輸入專案名稱，例如 hello-ppg。
在 Prisma Postgres 區段中，按一下 開始使用 按鈕。
在區域下拉式選單中，選取最接近您目前位置的區域，例如 美國東部 (維吉尼亞北部)。
按一下 建立專案 按鈕。
儲存 DATABASE_URL 環境變數，您將在下一節中需要它。

3. 在本機將 Prisma Postgres 新增至專案

在本節中，您將 在本機電腦上 將 Prisma Postgres 新增至入門專案

3.1. 設定 Prisma ORM

複製在步驟 1 中新增至您 GitHub 帳戶的 Next.js 平台入門範本儲存庫。
導覽至專案目錄，例如：cd next-platform-starter。
將 Prisma CLI 安裝為開發相依性
```
npm install prisma --save-dev
```
初始化 Prisma ORM 以建立 Prisma 結構描述和 .env 檔案
```
npx prisma init
```

3.2. 執行遷移並建立範例資料

開啟新建立的 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
}

開啟新建立的 .env 檔案，並將上一節中的 DATABASE_URL 環境變數貼到其中。
執行您的第一次遷移，以將 User 模型對應至資料庫
```
npx prisma migrate dev --name init
```
使用 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

如上方所述，您需要將 postinstall 指令碼新增至您的 package.json，以確保您的 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。

概觀​

功能特色​

使用方式​

安裝擴充功能​

將 Prisma 平台整合權杖新增至您的 Netlify 團隊​

將 Prisma Postgres 新增至 Netlify 網站​

其他考量事項​

確保您的專案使用 DATABASE_URL 環境變數​

在 package.json 中的 postinstall 指令碼中產生 Prisma Client​

範例：部署具有 Prisma Postgres 的 Next.js 範本​

1. 使用範本建立新網站​

2. 設定 Prisma Postgres 實例​

3. 在本機將 Prisma Postgres 新增至專案​

3.1. 設定 Prisma ORM​

3.2. 執行遷移並建立範例資料​

3.3. 更新應用程式程式碼以查詢和顯示 User 記錄​

3.4. 新增 postinstall 指令碼以產生 Prisma Client​

4. 設定 Prisma Postgres 的 Netlify 擴充功能​

5. 驗證部署​

概觀