跳到主要內容

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。

© . This site is unofficial and not affiliated with Prisma Data, Inc.