Serverless Playbook

用 Cloudflare 免费完成 Nuxt 全栈交付

利用 Pages + D1 + Workers KV，我们可以零服务器成本迭代应用：管理员后台用 Cloudflare Nuxt Pages Kit 初始化，数据层使用 D1，存储通过 R2／KV 扩展，整条链路只需一个 Cloudflare 账号即可运行。

基础设施

  • Cloudflare Pages：部署 Nuxt 产物与 Edge Functions
  • D1：SQLite 兼容，支持 SQL / migrations / dashboard 查询
  • KV & R2：用来缓存会话或托管静态资源
  • Wrangler：管理多账号、tail 日志、执行 SQL

零服务器优势

不需要自建 CI/CD 与 VPS：Pages 在 push/tag 后自动构建，Workers 在 150+ Edge 节点运行，D1 原生跨区备份。你唯一要做的就是维护 `wrangler.account-*.toml` 与数据库迁移脚本。

零服务器全栈流程

  1. 安装 CLI 工具并创建项目：

    bash
    npm install -g cf-nuxt-pages-kit
    bash
    create-cf-nuxt-pages my-app

    或使用 npx：npx cf-nuxt-pages-kit my-app

  2. 安装依赖并配置 Wrangler：

    bash
    cd my-app
    bash
    pnpm install && pnpm wrangler:config:test

    创建 D1 数据库：

    bash
    wrangler d1 create cf-nuxt-pages-db

    将返回的 database_id 写入模板的 wrangler.account-test.toml

  3. 部署到预览环境并查看日志：

    bash
    pnpm deploy:test
    bash
    pnpm logs:test

  4. 部署到生产环境：

    bash
    pnpm deploy:prod

    在 Cloudflare Dashboard 绑定自定义域名

示例：5 步搭建博客

  1. 在 `pages/blog/index.vue` 中新增博客列表，数据源可以来自 D1： 
    const entries = await useFetch('/api/posts')
  2. 在 `server/api/posts.get.ts` 中查询 D1： 
    const db = useRuntimeConfig().cloudflare.env.DB
return await db.prepare('SELECT * FROM posts ORDER BY published_at DESC').all()
  3. 使用 `scripts/use-wrangler-config.mjs` 切到需要的账号，执行 `wrangler d1 migrations apply DB` 更新 schema。
  4. 利用 Pages Functions 在 `/api/rss` 导出 RSS，或直接存储到 R2。
  5. `pnpm deploy:test` -> `pnpm deploy:prod`，博客就会上线到 Cloudflare Edge，完全无需传统服务器。

进阶教程

如果你已经跑通零服务器流程，继续深入这些站内文章，获取更细粒度的实践指南。

Edge Ready Admin

复制 template + 初始化 D1，preview 环境 5 分钟交付。

阅读 →

Wrangler 自动化

多账号配置、日志 tail、SQL 执行一键完成。

阅读 →

多语言官网 UX

@nuxt/ui + Pages 构建真正可上线的营销站点。

阅读 →