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

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

体验AI代码助手

代码解读

复制代码

bash


# .env.local or .env
R2_PUBLIC_URL=https://R2_PUBLIC_URL

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

json

体验AI代码助手

代码解读

复制代码

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 生成的图片、视频