跳到主要內容

如何將 Prisma ORM 與 Nuxt 結合使用

10 分鐘

本指南解釋瞭如何設定 Nuxt 應用程式，配置 Prisma Postgres 使用 Prisma Nuxt 模組，並將專案部署到 Vercel 進行生產部署。

你將學到什麼

  • 如何使用 Prisma Nuxt 模組設定 Nuxt 專案。
  • 如何在 Nuxt 應用程式中使用 Prisma Nuxt 模組配置和使用 Prisma Postgres。
  • 如何將專案部署到 Vercel。

先決條件​

要遵循本指南，請確保你已具備以下條件

1. 建立新的 Nuxt 專案並設定 Prisma Nuxt 模組​

  1. 初始化 新的 Nuxt 專案，選擇 npm 作為包管理器並初始化 git

    npm create nuxt hello-world
    注意

    我們推薦使用 npm，因為它與 @prisma/nuxt 模組的相容性最穩定。

  2. 進入專案目錄並安裝 @prisma/nuxt 模組

    cd hello-world
    npm i @prisma/nuxt

  3. 安裝 Prisma Accelerate 客戶端擴充套件，因為使用 Prisma Postgres 需要它

    npm i @prisma/extension-accelerate

  4. 將 @prisma/nuxt 模組新增到 nuxt.config.ts 檔案中，並進行以下配置

    // https://nuxtjs.tw/docs/api/configuration/nuxt-config
    export default defineNuxtConfig({
      compatibilityDate: "2024-11-01",
      modules: ["@prisma/nuxt"],
      experimental: {
        componentIslands: true,
      },
      devtools: { enabled: true },
    });

2. 透過本地執行開發伺服器設定 Prisma ORM​

在配置好帶有 Prisma 模組的 Nuxt 專案後，下一步是設定 Prisma ORM。此過程透過啟動開發伺服器開始，它會自動將 Prisma 配置為使用 SQLite 資料庫。

執行以下命令啟動開發伺服器

npm run dev

執行此命令後，系統將提示你使用 Prisma Migrate 執行資料庫遷移

? Do you want to migrate database changes to your database? › (Y/n)

按鍵盤上的 Y 鍵確認你要遷移資料庫並建立初始表。

一旦設定流程終止，它將

  1. 安裝了 Prisma CLI。
  2. 使用 SQLite 資料庫初始化了 Prisma 專案。
  3. 在 schema.prisma 檔案中建立了示例 User 和 Post 模型
    prisma/schema.prisma
    // This is your Prisma schema file,
    // learn more about it in the docs: https://pris.ly/d/prisma-schema

    generator client {
      provider = "prisma-client-js"
    }

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

    model User {
      id    Int     @id @default(autoincrement())
      email String  @unique
      name  String?
      posts Post[]
    }

    model Post {
      id        Int     @id @default(autoincrement())
      title     String
      content   String?
      published Boolean @default(false)
      author    User    @relation(fields: [authorId], references: [id])
      authorId  Int
    }
  4. 從上一步驟為 User 和 Post 模型建立了資料庫表。
    注意

    如果不存在 migrations 資料夾，則模組首次啟動時資料庫會自動遷移。之後，你需要手動在 CLI 中執行 npx prisma migrate dev 來應用任何模式更改。手動執行 npx prisma migrate dev 命令可以更輕鬆、更安全地管理遷移，也可以解決任何與遷移相關的錯誤。

  5. 安裝並生成了 Prisma Client，它使你能夠查詢資料庫。
  6. 安裝了 Prisma Studio。

Prisma 設定完成後，開發伺服器應在 https://:3000 上啟動。

接下來，停止伺服器，因為我們需要進行一些程式碼更改。

4. 更新應用程式程式碼​

配置 Prisma 後，下一步是更新應用程式程式碼以從資料庫中獲取和顯示資料。

  1. 在專案的根目錄中，建立一個名為 components 的資料夾。

  2. 在 components 資料夾中，建立一個名為 User.server.vue 的檔案。這個伺服器元件將從資料庫中獲取並顯示第一個使用者的名稱

    components/User.server.vue
    <script setup>
       import { withAccelerate } from "@prisma/extension-accelerate";
       const prisma = usePrismaClient().$extends(withAccelerate());
       const user = await prisma.user.findFirst();
    </script>

    <template>
      <p>{{ user?.name ?? "No user has been added yet." }}</p>
    </template>
    注意

    我們使用 withAccelerate() 擴充套件方法擴充套件了 usePrismaClient() 可組合函式，以確保與 Prisma Postgres 相容。此擴充套件還將允許你快取查詢。

  3. 修改根目錄中的 app.vue 檔案，使用 Nuxt Islands 包含新的伺服器元件

    app.vue
    <template>
      <div>
        <NuxtIsland name="User"></NuxtIsland>
      </div>
    </template>

  4. 再次執行以下命令啟動開發伺服器

    npm run dev

  5. 透過在瀏覽器中開啟你的應用程式 https://:3000 來驗證應用程式程式碼是否正常工作。
    由於資料庫中還沒有使用者，應用程式將顯示

    No user has been added yet.

    當用戶新增到資料庫時，此訊息將動態更新。

透過完成這些步驟，你的應用程式現在能夠從 Prisma 資料庫獲取資料並在前端渲染。

5. 建立 Prisma Postgres 例項​

要儲存你的應用程式資料，你將使用 Prisma Data Platform 建立一個 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 按鈕。

此時，你將被重定向到 Database 頁面，你需要在那裡等待幾秒鐘，直到資料庫的狀態從 PROVISIONING 變為 CONNECTED。

一旦出現綠色的 CONNECTED 標籤，你的資料庫就可以使用了！

然後，在 Set up database access 部分找到你的資料庫憑據，複製 DATABASE_URL 環境變數。

DATABASE_URL=<your-database-url>

DATABASE_URL 環境變數將在下一步中需要。

6. 在 Nuxt 應用中設定 Prisma Postgres​

現在 Prisma Postgres 例項已準備就緒，更新你的 Nuxt 應用程式以使用此資料庫

  1. 更新 .env 檔案，將現有的 DATABASE_URL 值替換為你之前複製的值。它將類似於這樣

    .env
    DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"

  2. 修改 schema.prisma 檔案，更改位於 prisma 資料夾中的 schema.prisma 檔案的 datasource 塊中的資料庫提供者

    prisma/schema.prisma
    datasource db {
     provider = "postgresql"
     url      = env("DATABASE_URL")
    }

  3. 刪除 SQLite 資料庫檔案（dev.db 和 dev.db-journal）以及 migrations 資料夾，所有這些檔案都位於 prisma 目錄中。這會清理現有的 SQLite 設定，並準備你的專案遷移到 PostgreSQL。

  4. 透過執行 prisma migrate 命令手動為 Postgres 資料庫建立新的遷移

    npx prisma migrate dev --name init

  5. 再次啟動開發伺服器

    npm run dev

  6. 開啟 Nuxt DevTools（按 Shift+Option+ D）並點選左側邊欄中的 Prisma 標誌以開啟 Prisma Studio。然後透過為 name 和 email 欄位指定值來新增新的 User 記錄。

  7. 透過在 https://:3000 重新整理你的應用程式來驗證應用程式中的資料。頁面應顯示你在 Prisma Studio 中新增的使用者的名稱。例如，如果你添加了一個名為 Jon 的使用者，應用程式將在瀏覽器中顯示 Jon。

恭喜，你的 Nuxt 應用現在已與 Prisma Postgres 完全整合！

7. 部署到 Vercel​

按照以下步驟將你的 Nuxt 應用程式與 Prisma Postgres 整合部署到 Vercel

  1. 確保你的專案已進行版本控制並推送到 GitHub 倉庫。如果你還沒有倉庫，請在 GitHub 上建立一個。倉庫準備好後，執行以下命令 
    git add .
    git commit -m "Initial commit with Prisma Postgres integration"
    git branch -M main
    git remote add origin https://github.com/<your-username>/<repository-name>.git
    git push -u origin main
    注意

    將 <your-username> 和 <repository-name> 替換為你的 GitHub 使用者名稱和倉庫名稱。

  2. 登入到 Vercel 並導航到你的 儀表板。
  3. 建立一個新專案。遵循 Vercel 的 匯入現有專案 指南，但在 第 3 步 停止，你將在點選 Deploy 之前配置環境變數。
  4. 配置 DATABASE_URL 環境變數
    1. 展開 Environment variables 部分。
    2. 新增 DATABASE_URL 環境變數
      • 鍵: DATABASE_URL
      • 值: 貼上你的 Prisma Postgres 連線 URL，例如從你的 Nuxt 專案中的 .env 檔案複製。
      警告

      在沒有設定 DATABASE_URL 變數的情況下不要部署。如果應用程式無法連線到資料庫，你的部署將失敗。

  5. 點選 Deploy 按鈕。Vercel 將構建你的專案並將其部署到即時 URL。
  6. 開啟 Vercel 提供的即時 URL 並驗證你的應用程式是否正常工作
    • 如果你在 Prisma Studio 中添加了使用者，他們的名字應該會出現在即時網站上。
    • 如果不存在使用者，應用程式將顯示 
      No user has been added yet.
  7. 新增或管理資料
    1. 透過 Prisma Data Platform 或本地例項開啟 Prisma Studio。
    2. 在資料庫中新增或更新使用者資料。
    3. 重新整理你的即時網站以確認更改。

恭喜！你的整合 Prisma Postgres 的 Nuxt 應用程式現在已在 Vercel 上線並全面執行。

注意事項​

本指南幫助你開始使用帶有 Nuxt 模組的 Prisma Postgres。由於 Nuxt 模組正在積極發展中，它不涵蓋 Prisma 的所有功能或支援所有邊緣情況。對於更高階的功能或邊緣部署，請考慮直接使用 Prisma。


與 Prisma 保持聯絡

透過以下方式與 Prisma 保持聯絡，繼續你的 Prisma 之旅 我們的活躍社群。保持資訊更新，參與其中，並與其他開發者協作

我們真誠地重視你的參與，並期待你成為我們社群的一員！

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