CloudFlare R2 集成

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

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

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

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

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

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

配置 CloudFlare R2

1. 访问 CloudFlare R2 页面，开始创建 Bucket

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

3. 设置自定义域名

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

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

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

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://your-domain.com"
    ],
    "AllowedMethods": [
      "GET"
    ]
  }
]

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

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

验证

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

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