2025-06-06发表2025-06-08更新Tech9 分钟读完 (大约1396个字) 次访问

Cloudflare R2 | 个人博客图床免费方案

为什么选择 Cloudflare R2

对于博客来说，要发图，图床 是不可或缺的

因为如果图片放在本地，会相当耗费服务器本身流量

… …

话有点多了，=w= 直接进入正题

之前有考虑过其他几种适合个人博客的方案，但都不合适

❌ Github + jsdelivr 图床：
- Github 官方并不鼓励将仓库作为图床来用，仓库中只有图片没有代码，很可能造成账户封禁；
- jsdelivr 有被墙过，且速度玄学
❌ 国内 COS/OSS 方案：
- 计费不太友好
- 且国内平台都要实名认证，有政策限制
❌ 第三方图床：
- 图片没有保障，平台可能随时挂掉或删掉你的图片
- 速度玄学

总结：想要有保障 又想要性价比和速度。

✅ 那 Cloudflare R2 免费套餐再好不过了：

Free 自由
Storage 存储	10 GB-month / month 10 GB-月/月
Class A Operations A 类操作	1 million requests / month 100 万个请求 / 月
Class B Operations B 类操作	10 million requests / month 1000 万个请求 / 月
Egress (data transfer to Internet) 出口（数据传输到 Internet）	Free 1 免费 1

这里存储 10GB/月对于小博客完全够用了

（后面我们会将图片压缩为 webp 上传平均每张图片 60kb 左右，一个月大约能传 170666 张图片）

A 类操作是指 API 上传列举复制图片等，近乎可以忽略；

B 类操作则是 获取图片 操作，图片每月可访问 1000万 次；

r2 最具吸引力的就是出口免费了， ~~cloudflare 不愧为网络大善人~~

出口是免费的，这就意味着能防止别人拿你的图片刷取流量 x_X

（虽然刷 1000 万次也会刷没 =w=)

一、准备

Cloudflare 账号：cloudflare 有提供中文界面，没有账户在官网按照指示注册就可以了。
下面二选一（为了订阅 R2 但不需付费）：
- Paypal 账号：paypal 官网注册，可用国内储蓄卡/信用卡。
- 信用卡一张

二、启用 Cloudflare R2

进入 Cloudflare 管理面板，点击侧边导航下面的 R2 对象存储
然后点击启用/订阅，会要求绑定支付方式（这里我有点记不清了，如果无法使用 paypal 账号可以先在侧边导航 管理账户 - 账单 - 付款 位置绑定 paypal 账号再点开）
绑定后点击 创建存储桶，名称可以设置为 blog，位置选择亚太地区即可，存储类标准，创建。

三、自定义域名 & 创建 API 令牌

创建完成后十分推荐使用自定义域，而不是 cf 提供的公共开发 URL。

在 blog 存储桶设置中添加自定义二级域名，我添加的是 image.xxx.xx，然后完成 DNS 设置。
回退到 R2 对象存储 概述界面，点击 API - 管理 API 令牌，然后选择 创建 User API 令牌。
名称随意命名，权限选择 对象读与写，下面 指定存储桶 选择创建的 blog 存储桶，TTL 永久，创建 User API 令牌。
创建令牌后，会出现为 S3 客户端 使用的凭据，将下面三个全部复制到记事本：

s3凭据

（最上面令牌暂无用）

四、部署 s3-image 网站

Github 项目地址：s3-image-port
官方示例网站：S3 Image Port

这里十分推荐使用 Vercel 部署个人的，若无账号可在 Vercel 官网注册。

注册好 Vercel 账号后不需要额外配置，点开 Github 项目地址
下拉找到一个 Deploy 图标，点击，跳转到 Vercel 进行部署，一路下一步即可。

（网页翻译用的是沉浸式翻译浏览器插件）
等待一段时间，部署好网站后在 s3-image 项目 Settings 设置里面点击 Domains 域，添加新域名，我添加的是 s3-image.xxx.xx（后面有用），然后进行 DNS 配置。
新域名添加后，就可以进入自己的 s3-image 网页了。

（不过现在是无法用的，需要配置 CORS 策略）

五、配置 R2 CORS 策略

回到 Cloudflare R2 存储桶页面，进入 blog 存储桶，设置里编辑 CORS 策略。

将下面配置复制进去，然后修改 s3-image.xxx.xx 为你设置的 s3-image 网页域名。

[
  {
    "AllowedOrigins": ["http://localhost:3000", "https://s3-image.xxx.xx"],
    "AllowedMethods": ["GET", "PUT", "DELETE"],
    "AllowedHeaders": ["*"]
  }
]