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 管理会话/房间状态