Cloudflare R2 图床搭建

前言#

图床是在搭建博客以及一些其他的服务的时候非常必须的内容，然而第三方的图床除了有隐私问题之外，也可能因为图床跑路导致你的数据丢失。两种最为常见的搭建图床的方法，一种是使用诸多使用 Github 搭建图床的工具，将 Github Repo 作为图片存储的地方；另一种则是直接用一个服务器进行部署。这两种方法都有一些隐患。前者，首先 Github 成立的初衷就并非是为了搭建网盘，这种占用公共资源的行为很有可能被封号；而后者则需要考虑一些带宽以及存储空间的问题，同时还需要花钱。

R2 图床是一种比较理想的方案，Cloudflare 提供了一个免费的 R2 存储服务，可以用于存储图片等静态资源。R2 存储的优点是免费，而且容量大，速度快，而且支持自定义域名，只要你有一张 Visa 卡，你就可以订阅 R2 存储服务的 Free Plan，并且建立一个免费的桶，这个桶只在上传图片时受限，对于访问之类的内容几乎无限额度。

项目选择#

本身在 Github 上面其实也有不少的使用 CF 的 R2 搭建图床的项目了，但是因为自己的品味问题，还是想要搭建一个自己的图床网页，让一切行为更加简洁可控。于是笔者直接用 Codex Vibe Coding 一份 ↗︎，并且进行了一些 code review。

部署#

本身项目就是一个单纯的前端的网页，你只需要设置一些环境变量就可以部署了，在这里建议可以部署在 Vercel 里面，因为不需要写 Github Actions。在这里还是主要介绍应该如何建立 R2 存储。

首先先在 Cloudflare 创建一个 R2 的存储桶，都是直接创建好就行。

你可以在桶的设置里面绑定你自己的域名，或者 CF 也会给你分配一个：

至此你已经成功完成了桶的部署，你已经可以在 cloudflare 的控制台中上传图片了，然后就可以通过 https://<url>/<image-path> 来访问图片了。

本质上前端就是将这个过程变为了一个网页中操作，并且可以管理你的全部图片，同时支持将图片压缩为 webp 以及 hash 图片名的功能。

环境变量#

部署网页需要设置若干的环境变量，对于 Vercel，直接在部署完的设置中写入即可：

可以注意到这里需要写入一些变量，在这里介绍你应该如何获得它们。

首先是 ADMIN_PASSWORD，是你自己写的密码，这个密码是用于访问管理页面的密码，你可以自己设置。然后是 R2_PUBLIC_URL，这个是你的 R2 存储的公共 URL，你可以在 Cloudflare 的控制台中找到。同时，R2_BUCKET_NAME 是你的 R2 存储的桶的名字，你可以在 Cloudflare 的控制台中找到。

R2_ACCOUNT_ID，你可以在 R2 界面的右下角找到：

接下里的三个内容你需要创建一个 API TOKEN。

之后创建的权限可以选择管理员读和写。

图中的 1/2/3 分别是 R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY, R2_ENDPOINT，至此全部东西都齐全了，在 Vercel 中写入之后重新部署即可。

结语#

至此你已经成功搭建了 R2 图床，请享用~