Cloudflare-Workers与边缘计算
1. 概念
Cloudflare Workers = 在 Cloudflare 全球 300+ 边缘节点运行 JavaScript / TypeScript / WASM。比 Lambda 启动快（V8 isolate，毫秒级冷启动）、部署到全球边缘。
前端用途：
- 边缘 SSR / SSG
- A/B 测试 / 灰度
- API 聚合 / BFF
- 反向代理 / 路由
- 鉴权预处理
- 图片处理 / 重定向
- 替代 Lambda@Edge
2. 起步
npm create cloudflare@latest my-worker
cd my-worker
npm run dev # 本地调试
npx wrangler deploy # 部署
最小 Worker：
// src/index.ts
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
const url = new URL(request.url)
if (url.pathname === '/') {
return new Response('Hello edge!', {
headers: { 'content-type': 'text/plain' }
})
}
return new Response('Not Found', { status: 404 })
}
}
wrangler.toml：
name = "my-worker"
main = "src/index.ts"
compatibility_date = "2026-01-01"
[[routes]]
pattern = "edge.example.com/*"
zone_name = "example.com"
3. 路由模式
# 拦截特定路径
routes = [
{ pattern = "example.com/api/*", zone_name = "example.com" }
]
或用 workers.dev 子域开发：my-worker.your-account.workers.dev。
4. 反向代理 + 改写
export default {
async fetch(request: Request) {
// 改写源站
const url = new URL(request.url)
url.hostname = 'origin.example.com'
const response = await fetch(url.toString(), request)
// 改写响应头
const newResponse = new Response(response.body, response)
newResponse.headers.set('X-Edge', 'cf-workers')
newResponse.headers.set('Cache-Control', 'public, max-age=3600')
return newResponse
}
}
5. A/B 测试
export default {
async fetch(request: Request) {
const cookie = request.headers.get('Cookie') || ''
let variant = cookie.match(/variant=(\w+)/)?.[1]
if (!variant) {
variant = Math.random() < 0.5 ? 'A' : 'B'
}
const url = new URL(request.url)
url.hostname = variant === 'A' ? 'a.origin.com' : 'b.origin.com'
const response = await fetch(url.toString(), request)
const newResponse = new Response(response.body, response)
newResponse.headers.append('Set-Cookie', `variant=${variant}; Max-Age=2592000; Path=/`)
return newResponse
}
}
6. 鉴权预处理
export default {
async fetch(request: Request, env: Env) {
const auth = request.headers.get('Authorization')
if (!auth || !verifyJWT(auth, env.JWT_SECRET)) {
return new Response('Unauthorized', { status: 401 })
}
return fetch(request)
}
}
边缘鉴权 = 拦截非法请求，源站完全无感。
7. KV / R2 / D1（数据存储）
7.1 KV（键值）
# wrangler.toml
[[kv_namespaces]]
binding = "MY_KV"
id = "abc123..."
const value = await env.MY_KV.get('key')
await env.MY_KV.put('key', 'value', { expirationTtl: 3600 })
最终一致性，全球同步约 60 秒。适合配置、限流计数。
7.2 R2（对象存储）
S3 兼容接口，零出站流量费（最大杀手锏）：
const obj = await env.BUCKET.get('path/file.jpg')
return new Response(obj.body, {
headers: { 'content-type': obj.httpMetadata.contentType }
})
适合：图片 / 视频 CDN 源。
7.3 D1（SQLite）
边缘 SQL 数据库：
const result = await env.DB.prepare(
'SELECT * FROM users WHERE id = ?'
).bind(userId).first()
beta 阶段，小型应用、个人项目可用。
7.4 Durable Objects
强一致状态。WebSocket 房间、协作状态、分布式锁。
8. Cloudflare Pages
托管 SPA / SSG，构建 + 分发一体：
npx wrangler pages deploy ./dist --project-name my-app
或绑定 git 仓库自动部署。等于 Vercel 但用 Cloudflare 网络。
8.1 Pages Functions
functions/ 目录下的 TS 文件自动变 Workers：
// functions/api/hello.ts
export const onRequestGet: PagesFunction = async () => {
return new Response(JSON.stringify({ msg: 'hello' }))
}
访问 /api/hello 触发。
9. 限制
| 项 | 免费 | 付费 |
|---|---|---|
| 请求数 | 10 万/天 | 1000 万/月起 |
| CPU 时间 | 10ms | 30s（unbound） |
| 内存 | 128MB | 128MB |
| 大小 | 1MB（压缩前） | 10MB |
| Subrequests | 50 | 1000 |
CPU 是真 CPU 时间（不算 await fetch 等）。
10. 调试
# 本地
wrangler dev # 默认本地，可加 --remote
# 实时日志
wrangler tail # 看生产实时请求日志
# 看分析
# Cloudflare Dashboard → Workers → Analytics
11. 常见反模式
- Worker 里跑重计算：CPU 限制超时
- 每请求 fetch 多个上游：subrequest 配额耗尽
- KV 当强一致 DB：会丢更新
- 不用 cache API：每次都回源
- Worker 里读 DB：延迟 + 安全。后端 API 才是数据访问层
- wrangler 凭证泄漏：能控制全部 Worker