Cloudflare 全栈部署指南：从 DNS 到 Workers 到 R2
> 一个账号搞定 DNS、CDN、无服务器函数、对象存储——而且免费额度够个人项目用。
---
Cloudflare 能做什么？
| 产品 | 用途 | 免费额度 |
| DNS | 域名解析 | 无限查询 |
| CDN | 全球加速 | 无限流量 |
| Pages | 静态网站托管 | 无限站点，500 次构建/月 |
| Workers | 无服务器函数 | 每天 10 万次请求 |
| R2 | 对象存储（S3 替代） | 每月 1000 万次读 + 1000 万次写 |
| D1 | 托管 SQLite | 5GB 存储 |
| KV | 键值存储 | 100 万次读取/月 |
| Images | 图片优化 | 每月 1000 张转换 |
---
第一步：注册与域名
example.com）---
第二步：部署静态网站（Pages）
方法 A：Git 自动部署
npm run build
- Build output: dist
方法 B：直接上传
``bash
`使用 Wrangler CLI
npm install -g wrangler
wrangler pages project create my-site
wrangler pages deployment publish ./dist
---
第三步：部署无服务器函数（Workers）
Hello World
`javascript
// src/index.js
export default {
async fetch(request, env, ctx) {
return new Response('Hello from Cloudflare Workers!');
}
};
`
`bash
wrangler deploy
`
实战：API 代理
`javascript
export default {
async fetch(request) {
const url = new URL(request.url);
const target = url.searchParams.get('url');
if (!target) {
return new Response('Missing url parameter', { status: 400 });
}
const resp = await fetch(target);
return new Response(resp.body, {
headers: { 'Access-Control-Allow-Origin': '*' }
});
}
};
`
用途：解决前端跨域问题、缓存第三方 API
---
第四步：对象存储（R2）
上传文件
`bash
创建 bucket
wrangler r2 bucket create my-bucket
上传文件
wrangler r2 object put my-bucket/file.txt --file ./local-file.txt `Workers 访问 R2
javascript
export default {
async fetch(request, env) {
const bucket = env.MY_BUCKET;
const obj = await bucket.get('file.txt');
return new Response(obj.body, {
headers: { 'Content-Type': 'text/plain' }
});
}
};
`---
第五步：图片优化（Images）
bash
通过 API 转换
curl "https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1?url=https://example.com/image.png&format=webp&width=800"
`---
最佳实践
DNS 优先：把域名 NS 改成 Cloudflare，免费 CDN + DDoS 防护
静态站用 Pages：比 Workers 更便宜，自动全球 CDN
API 用 Workers：免费额度够个人项目，按量付费不怕超支
大文件存 R2：比 AWS S3 便宜（无出口流量费）
图片用 Images：自动 WebP/AVIF 转换，省带宽 ---
避坑指南
免费版有速率限制：Workers 每天 10 万请求，超出付费
R2 没有文件夹：用前缀模拟（如 ---