跳至主要內容

Netlify

用於 Prisma Postgres 的 Netlify 擴充功能 能將您的 Netlify 站點與 Prisma Postgres 實例連接起來。連接後，該擴充功能會自動為您部署的 Netlify 站點設置 DATABASE_URL 環境變數。

功能​

  • 自動為生產環境和預覽環境生成 Prisma Postgres API 金鑰。
  • 為您的 Netlify 站點簡化環境配置。

使用方法​

安裝擴充功能​

若要安裝擴充功能，請點擊 Prisma Postgres 擴充功能頁面 上方的安裝 (Install)。

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

請執行以下步驟一次，將您的 Netlify 團隊與 Prisma Platform 工作區進行連接

  1. 登入您的.
  2. 選擇您想要連接到 Netlify 的工作區。
  3. 導航至左側邊欄中的整合 (Integrations) 選單。
  4. 依照提示建立一個新的 Netlify 整合權杖並複製該權杖的值。
  5. 將該權杖貼上到上方的整合權杖 (Integration Token) 欄位中。工作區 ID 將會自動填入。
  6. 點擊儲存 (Save) 以完成設置。

此設置完成後，您的 Netlify 團隊即已連接至您的 Prisma 工作區。您現在可以配置個別的 Netlify 站點以使用 Prisma Postgres。

將 Prisma Postgres 新增至 Netlify 站點​

針對每一個您想要使用 Prisma Postgres 的 Netlify 站點執行以下步驟

  1. 進入 Netlify 的站點視圖，並點擊擴充功能 (Extensions) 區段下的 Prisma Postgres。
  2. 從專案 (Project) 選擇器中，選擇您想要連接至 Netlify 站點的 Prisma 專案。
  3. 為您的生產環境 (Production environment) 配置環境。
  4. 為您的預覽環境 (Preview environment) 配置環境。
  5. 點擊儲存 (Save) 以完成站點設置。
  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 官方 Next.js Platform Starter 模板，從頭開始部署 Netlify 站點並將其連接至 Prisma Postgres 的逐步說明。

1. 使用模板建立新站點​

在您的 Netlify 團隊中，使用該模板建立一個新站點

  1. 在左側導航欄選擇站點 (Sites)。
  2. 點擊新增站點 (Add new site) 按鈕。
  3. 在下拉選單中，選擇從模板開始 (Start from a template)。
  4. 選擇 Next.js Platform Starter。
  5. 依照提示將此模板複製到您的 Git 提供商 (Clone this template to your Git provider)。
  6. 輸入站點名稱 (Site name) 並點擊部署站點 (Deploy site) 按鈕。

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

2. 設置 Prisma Postgres 實例​

接下來，設置一個 Prisma Postgres 實例

  1. 登入並開啟主控台 (Console)。
  2. 在您選擇的 工作區 (workspace) 中，點擊 New project (新增專案) 按鈕。
  3. 在 Name (名稱) 欄位中輸入您的專案名稱，例如 hello-ppg。
  4. 在 Prisma Postgres 區段中，點擊 Get started (開始使用) 按鈕。
  5. 在 Region (區域) 下拉選單中，選擇離您目前位置最近的區域，例如 US East (N. Virginia)。
  6. 點擊 Create project (建立專案) 按鈕。
  7. 點擊連接到您的資料庫 (Connect to your Database) 按鈕
  8. 儲存 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"
      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 站點。請依照上方使用方式 (Usage) 區段中的說明操作。

完成這些步驟後，找到觸發部署 (Trigger deploy) 按鈕，並在下拉選單中選擇清除快取並部署站點 (Clear cache and deploy site)。

5. 驗證部署​

透過點擊開啟生產部署 (Open production deploy) 按鈕來開啟已部署的站點。您現在應該會看到與步驟 3 在本地執行應用程式時相同的 UI。

開啟於
複製為 Markdown
於 Claude 開啟
在 ChatGPT 中開啟
在 T3.chat 中開啟
在 GitHub 中編輯
© . This site is unofficial and not affiliated with Prisma Data, Inc.