Cloudflare Page + Nuxt + D1 + Prisma 10/10 更新

創建專案

pnpm create cloudflare@latest [專案名稱] --framework=nuxt

創建 D1 資料庫

npx wrangler d1 create [資料庫名稱]

將輸出的資料貼入 wrangler.toml

配置 Prisma

安裝 prisma 依賴, d1 驅動



pnpm install prisma --save-dev
pnpm install @prisma/adapter-d1 @prisma/client

安裝完成後先執行一次項目

pnpm dev

修改 prisma/schema.prisma





generator client {
  provider        = "prisma-client-js"
[+]  previewFeatures = ["driverAdapters"]
}

修改 nuxt.config.ts 新增啟用 wasm 配置 esbuild












nitro: {
    preset: 'cloudflare-pages',
[+]    experimental: {
[+]        wasm: true,
[+]    },
[+]    esbuild: {
[+]        options: {
[+]            target: 'esnext',
[+]        },
[+]    },
}

example












nitro: {
    preset: 'cloudflare-pages',
    experimental: {
        wasm: true,
    },
    esbuild: {
        options: {
            target: 'esnext',
        },
    },
}

Migrations

建立 D1 migrations

npx wrangler d1 migrations create [資料庫名稱] [migrations 標籤]






npx prisma migrate diff \
  --from-empty \
  --to-schema-datamodel ./prisma/schema.prisma \
  --script \
  --output migrations/0001_create_user_table.sql






npx prisma migrate diff \
  --from-local-d1 \
  --to-schema-datamodel ./prisma/schema.prisma \
  --script \
  --output migrations/0002_create_post_table.sql

本地專案執行

npx wrangler d1 migrations apply [資料庫名稱] --local

遠程專案執行

npx wrangler d1 migrations apply [資料庫名稱] --remote

example

















npx wrangler d1 migrations create d1-database []

# 0001
npx prisma migrate diff --from-empty --to-schema-datamodel ./prisma/schema.prisma --script --output [path]

# 0002 ~
npx prisma migrate diff --from-local-d1 --to-schema-datamodel ./prisma/schema.prisma --script --output [path]

# 本地專案執行

npx wrangler d1 migrations apply d1-database --local


# 遠程專案執行

npx wrangler d1 migrations apply d1-database --remote

備註

  1. 別使用 @prisma/nuxt
  2. 建議別使用 prisma，除非您並非 cf 免費黨(cf worker/pages 免費用戶每個專案限制大小為1MB)
Select a repo