出海技术栈集成教程(七):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

  1. 访问 Cloudflare R2 页面,开始创建 Bucket
  1. 进入 Bucket Settings,复制 R2_BUCKET_NAMER2_ACCOUNT_ID 到环境变量
  1. 设置自定义域名
  1. 将设置的自定义域名加上 https:// 前缀添加到环境变量 R2_PUBLIC_URL
bash 复制代码
# .env.local or .env

R2_PUBLIC_URL=https://R2_PUBLIC_URL
  1. 设置 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
  }
]
  1. 现在回到 R2 首页,开始创建 API Key
  1. 将 API Key 添加到环境变量 R2_ACCESS_KEY_IDR2_SECRET_ACCESS_KEY

验证

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

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

总结

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

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

相关推荐
李明卫杭州1 天前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-1 天前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx1 天前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡
C+ 安口木1 天前
CSS通用优惠券样式
前端·css
小趴菜82271 天前
安卓人机验证View
android·java·前端
闲人编程1 天前
2025年,如何选择Python Web框架:Django, Flask还是FastAPI?
前端·后端·python·django·flask·fastapi·web
光影少年1 天前
react打包优化和配置优化都有哪些?
前端·react.js·掘金·金石计划
Aoda1 天前
企业级项目结构设计的思考与实践 —— 以 PawHaven 为例
前端·架构
若无_1 天前
深入理解 Vue 中的 reactive 与 ref:响应式数据的两种核心实现
前端·vue.js
玄魂1 天前
一键生成国庆节祝福海报,给你的朋友圈上点颜色
前端·javascript·数据可视化