出海技术栈集成教程（七）：Cloudflare R2 免费图片存储

我开发了 next.js saas 模板 Nexty.dev，很多用户告诉我文档太详细了，于是我决定把出海技术栈、海外第三方服务集成的文档发出来，希望帮到更多出海的朋友。👉 原文链接

本系列分享的内容包含：

域名购买、解析与配置
Supabase 集成教程：登录与数据库
Stripe 集成教程：支付配置与开发
Resend 集成教程：邮件服务
域名邮箱配置教程：域名邮箱
Upstash 集成教程：Redis 与限流器
Cloudflare R2集成教程：免费图片存储
Cloudflare Turnstile集成教程：免费人机检测

R2 是 Cloudflare 提供的对象存储服务，它与 Cloudflare 的 CDN 服务无缝集成，可以作为静态文件存储和分发服务。

文件存储需求的场景很多，例如：

用户头像保存
AI 生成的图片、视频保存到云端
博客图片保存

有了这些场景的需求后，管理员就还需要一个文件管理后台。

Nexty.dev 模板针对这些需求，基于 Cloudflare R2 封装了文件上传、删除的方法，并且提供了查看、管理文件的后台。

本章我们来完成 Cloudflare R2 的配置。

配置 Cloudflare R2

访问 Cloudflare R2 页面，开始创建 Bucket

进入 Bucket Settings，复制 R2_BUCKET_NAME 和 R2_ACCOUNT_ID 到环境变量

设置自定义域名

将设置的自定义域名加上 https:// 前缀添加到环境变量 R2_PUBLIC_URL

bash 复制代码

# .env.local or .env

R2_PUBLIC_URL=https://R2_PUBLIC_URL

设置 CORS Policy，这是控制哪些来源（域名、协议、端口）可以访问存储在 R2 Bucket 中的资源。这是一种安全机制，用于保护你的资源免受未经授权的跨域访问。

json 复制代码

[
  {
    "AllowedOrigins": [
      "http://127.0.0.1:3006",
      "http://localhost:3006",
      "https://kontextimage.com",
      "https://flux-kontext.nexty.dev"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "Content-Length"
    ],
    "ExposeHeaders": [
      "Content-Length",
      "Content-Type",
      "Content-Disposition",
      "ETag",
      "Last-Modified"
    ],
    "MaxAgeSeconds": 3600
  }
]

现在回到 R2 首页，开始创建 API Key

将 API Key 添加到环境变量 R2_ACCESS_KEY_ID 和 R2_SECRET_ACCESS_KEY

验证

你可以启动源码仓库后，在以下模块测试 R2 相关功能：

/dashboard/settings 页面测试头像上传
/ai-demo 页面测试 AI 生成的图片、视频上传
/dashboard/images 页面管理 AI Demo 生成的图片、视频

总结

出海技术栈集成系列文章会同步发布到我的掘金专栏，欢迎订阅关注。

同时也欢迎出海的朋友了解 Top3 的出海 Next.js SaaS 模板 Nexty.dev。