devops/deploy-cloudflare

Cloudflare 部署

适用场景

• Cloudflare Pages：前端应用（Next.js、React、Vue、SvelteKit、静态站点）
• Cloudflare Workers：边缘 Serverless 函数、API、Webhooks
• 需要全球边缘网络低延迟的场景
• 对冷启动和全球分发有要求的应用

前置条件

1. 安装 Wrangler CLI：npm i -g wrangler
2. 登录 Cloudflare：npx wrangler login（需要用户交互完成授权）
3. 验证登录状态：npx wrangler whoami

部署模式选择

项目类型	部署模式	命令
前端应用 / SPA	Cloudflare Pages	wrangler pages deploy
静态站点	Cloudflare Pages	wrangler pages deploy
Serverless API / 边缘函数	Workers	wrangler deploy
Next.js SSR	Pages (Next adapter)	wrangler pages deploy

一、Cloudflare Pages 部署

1. 构建项目

npm run build
# 产物目录通常为 dist/、build/ 或 .next/

2. 首次部署

# 部署静态产物到 Cloudflare Pages
npx wrangler pages deploy dist --project-name=my-app

首次部署输出示例：

✨ Compiled Worker successfully
🌍  Uploading... (20.4 MB)
✨ Deployment complete! Take a peek over at https://my-app.pages.dev

3. 配置 wrangler.toml（Pages 项目）

Pages 项目可以使用 wrangler.toml 或命令行参数管理配置：

name = "my-app"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[env.production]
name = "my-app"

[env.staging]
name = "my-app-staging"

4. 环境变量

# 设置环境变量（Pages）
npx wrangler pages secret put DATABASE_URL

# 列出 secrets
npx wrangler pages secret list

# 删除 secret
npx wrangler pages secret delete DATABASE_URL

5. 自定义域名

# 绑定自定义域名到 Pages 项目
npx wrangler pages domain add example.com --project-name=my-app

二、Cloudflare Workers 部署

1. wrangler.toml 配置

name = "my-worker"
main = "src/index.ts"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]

# 路由绑定
routes = [
  { pattern = "api.example.com/*", zone_name = "example.com" }
]

# KV 命名空间绑定
[[kv_namespaces]]
binding = "MY_KV"
id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# R2 存储桶绑定
[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "my-bucket"

# D1 数据库绑定
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"