Cloudflare Pages 与 R2 存储

Q: Cloudflare Pages 与 R2 存储 的最佳实践有哪些？

Cloudflare Pages 与 R2 存储 的最佳实践包括：所有用户上传用 R2 — 零出口意味着 CDN 服务免费；用 Cache API 缓存 R2 响应 — 设 Cache-Control，边缘免费缓存；图片变换用 Cloudflare Images — 把缩放/压缩移出你的代码。其中首条「所有用户上传用 R2 — 零出口意味着 CDN 服务免费」应作为团队默认规范写入 IaC 模板。

在 Cloudflare Pages 上部署全栈应用，搭配 R2（S3 兼容、零出口费）和 D1 边缘 SQLite。

Cloudflare进阶

为什么

R2 出口费 $0（对比 S3 $0.09/GB），图片/视频密集应用省 80%。Pages Functions 运行在 Workers 运行时（300+ 边缘位置、50ms 冷启动）。

组合：全栈边缘应用无出口账单。

何时使用

选择 Pages + R2 用于图库、视频托管、文件分享应用，以及出口费占成本主导的工作负载。避免需要长运行计算（用 Cloud Run）或 VPC 私有资源的应用。

如何做

1. 创建 Pages 项目 — npx wrangler pages project create myapp 2. 绑定 R2 — wrangler r2 bucket create assets，在面板添加绑定 3. Pages Functions — functions/api/[[route]].ts 提供 API，边缘按需运行 4. 上传到 R2 — wrangler r2 object put assets/file.jpg --file=./file.jpg 5. 通过绑定服务 — env.ASSETS.get("file.jpg") 返回 ReadableStream 6. 自定义域名 — Pages 面板 > 自定义域名 > 添加 + 验证 DNS 7. 部署 — wrangler pages deploy ./dist（或关联 Git 自动部署） 8. 监控 — Cloudflare Analytics（R2 操作、Pages 请求，全免费）

示例

// wrangler.toml — Pages + R2 + D1 绑定 name = "myapp" pages_build_output_dir = "./dist" [[r2_buckets]] binding = "ASSETS" bucket_name = "my-assets" [[d1_databases]] binding = "DB" database_name = "mydb" // functions/api/upload.ts — 边缘 R2 上传 export const onRequestPost = async (ctx: EventContext) => { const form = await ctx.request.formData(); const file = form.get("file") as File; const key = `uploads/${crypto.randomUUID()}-${file.name}`; await ctx.env.ASSETS.put(key, file.stream(), { httpMetadata: { contentType: file.type }, }); return Response.json({ url: `/api/file/${key}`, size: file.size }); }; // functions/api/file/[key].ts — 从 R2 服务 export const onRequestGet = async (ctx: EventContext) => { const key = ctx.params.key; const obj = await ctx.env.ASSETS.get(`uploads/${key}`); if (!obj) return new Response("未找到", { status: 404 }); return new Response(obj.body, { headers: { "Content-Type": obj.httpMetadata.contentType || "application/octet-stream" }, }); };

常见问题

⚠R2 对象未找到 — key 区分大小写，检查精确路径和前导斜杠
⚠Pages Functions 50ms CPU 限制 — 图片处理撞墙，改用 Image Resizing
⚠分片上传 >100MB — R2 单次 PUT 限制，用分片上传 API
⚠D1 写入冲突 — 单主库，并发写入失败，计数器用 KV

最佳实践

✓所有用户上传用 R2 — 零出口意味着 CDN 服务免费
✓用 Cache API 缓存 R2 响应 — 设 Cache-Control，边缘免费缓存
✓图片变换用 Cloudflare Images — 把缩放/压缩移出你的代码
✓Git 关联 Pages 自动部署 — 推送到 main，每个 PR 预览部署

常见问题解答

什么是Cloudflare Pages 与 R2 存储？它解决什么问题？

在 Cloudflare Pages 上部署全栈应用，搭配 R2（S3 兼容、零出口费）和 D1 边缘 SQLite。它可帮助开发者在不自建基础设施的前提下完成部署、存储与扩展，是云服务选型的核心参考。

如何在 5 分钟内上手Cloudflare Pages 与 R2 存储？

两步即可跑通：① 创建 Pages 项目 — npx wrangler pages project create myapp；② 绑定 R2 — wrangler r2 bucket create assets，在面板添加绑定。建议先用免费套餐验证流程，再接入生产环境。