Cloudflare Pages 部署

Cloudflare Pages 是 Vercel 的有力竞争者，免费额度更大，特别适合流量较大的项目。

为什么选择 Cloudflare Pages

• 免费额度大：无限带宽，无限请求
• 全球 CDN：Cloudflare 的全球网络
• Workers 集成：可以添加服务端逻辑
• R2 存储：可以托管大文件
• 零配置：自动识别框架

快速部署

通过 Web 界面

1. 访问 pages.cloudflare.com
2. 用 GitHub/GitLab 登录
3. 点击 "Create a project"
4. 选择仓库
5. 配置构建设置：
   • 构建命令：npm run build
   • 输出目录：dist 或 build
6. 点击 "Save and Deploy"

通过 Wrangler CLI

# 安装 Wrangler
npm install -g wrangler

# 登录
wrangler login

# 部署
wrangler pages deploy <输出目录>

支持的框架

自动识别：

• Next.js（静态导出）
• React / Vite
• Vue / Nuxt
• Astro
• SvelteKit
• Hugo / Jekyll

配置环境变量

1. 进入项目 → Settings → Environment variables
2. 添加变量
3. 选择环境（Production / Preview）
4. 重新部署生效

添加服务端逻辑（Functions）

在项目中创建 functions 目录：

// functions/api/hello.ts
export async function onRequest(context) {
  return new Response('Hello from Cloudflare Pages!')
}

访问 https://your-site.pages.dev/api/hello 即可调用。

自定义域名

1. 进入项目 → Custom domains
2. 点击 "Set up a custom domain"
3. 输入域名
4. 按提示配置 DNS（如果域名在 Cloudflare，自动配置）

与 Vercel 对比

常见问题

Next.js 部署注意事项

Cloudflare Pages 只支持静态导出：

// next.config.js
module.exports = {
  output: 'export',
  images: {
    unoptimized: true
  }
}

如果需要服务端渲染，使用 Vercel 或 Cloudflare Workers。

构建失败

• 检查 Node.js 版本（在环境变量中设置 NODE_VERSION）
• 确认构建命令和输出目录正确
• 查看构建日志

进阶：集成 R2 存储

用于托管大文件（图片、视频）：

// functions/api/upload.ts
export async function onRequest(context) {
  const { R2 } = context.env
  // 上传文件到 R2
}

免费额度

• 无限带宽
• 无限请求
• 500 次构建/月
• 20 分钟构建时间/月
• 100 个自定义域名

对于 MVP 完全够用。

下一步

• 配置自定义域名
• 使用 Cloudflare Workers 添加 API
• 配置 CDN 优化