Architecture8 min read

Edge Ready Nuxt Admin:Cloudflare Pages + D1 主线实战

带你把 template/ 目录复制后的管理后台,在 preview 环境 5 分钟内上线,并利用 D1 schema.sql/test-data.sql 完成初始化与验证。

步骤一:复制脚手架与依赖安装

运行 node create-project.mjs my-admin 即可把 template/ 复制到新目录,再执行 pnpm install。CLI 输出的 next steps 会贴合多账号流程,确保任何开发者复现时不会遗漏 wrangler 配置。

  • create-project.mjs 默认会检查目录是否存在,避免覆盖已有代码
  • pnpm install 之后 pnpm wrangler:config:test 即可写入多账号配置
  • postinstall 钩子会执行 nuxt prepare,保证边缘构建可用

步骤二:D1 schema 与 seed

模板内的 schema.sql、test-data.sql、clear-test-data.sql 对应 D1 的迁移、样例数据与清理逻辑,在 CI 里可直接作为 artifacts。Preview 环境可使用 seed 数据快速验证 API。

wrangler d1 migrations apply cf-nuxt-pages-db
wrangler d1 execute cf-nuxt-pages-db --file=./test-data.sql

步骤三:构建与观测

pnpm deploy:test 会先切换 account,再构建 Nuxt 并调用 wrangler pages deploy dist。部署完成后,pnpm logs:test 可接上 preview 环境日志,在没有自建服务器的情况下观察 Edge 调用链。

  • logs:test / logs:prod 默认输出 pretty 模式,方便排查 Pages Functions
  • Wrangler 的多账号切换通过 scripts/use-wrangler-config.mjs 保证一致性
  • 完成验证后直接 pnpm deploy:prod,Production 与 Preview 每次都可复现

步骤四:接入 KV / R2 / Durable Objects

在主线跑通后,可以按需把更多 Cloudflare 能力接入同一套脚手架:KV 用于缓存配置与会话、R2 存放用户上传文件、Durable Objects 作为长连接房间或有状态协调器。通过 runtimeConfig 读取 env 绑定,将这些服务与 Nuxt store、API 路由串联起来。

  • 在 wrangler.account-*.toml 中增加 KV/R2/DO 绑定,再在 Pages 项目中开启对应资源
  • 在 server/api 中通过 useRuntimeConfig().cloudflare.env 访问 KV / R2 / DO,避免在组件里直接依赖全局变量
  • 清晰地划分边界:D1 做持久化数据,KV 做高频读取缓存,R2 存大文件,DO 管理会话/房间状态

Further Reading