Cloudflare R2 使用指导

@SOLUTION· 2024-02-04 12:14 · 23 min read

打开 Cloudflare 的 Dashboard (dash.cloudflare.com) 之后，选择 R2 的 Overview，然后选择 “Create bucket”：

图 1：创建 R2 Bucket

然后输入你的 bucket 名字，就可以直接创建 bucket 了：

图 2：设置 bucket 名字

然后你就可以直接拖拽文件到网页上，就可以上传文件到这个 bucket 中了：

图 3：拖拽上传文件

如果你在 Cloudflare 托管了域名的哈，那么也可以很方便地给你的 S3 添加一个域名，其实不添加也没关系，Cloudflare 给你分配了一个默认的域名，就是长度长了一些，并且是 Cloudflare 的域名，可能需要处理一些 CORS 的问题。

图 4：添加自定义域名

输入你想要的域名，然后选择 “continue”：

图 5：添加域名

然后 Cloudflare 就会进行一些配置，完成之后就会变成这样的 “active” 状态了：

图 6：添加成功

API 使用

但是，一般情况下，我们上传文件都不是通过拖拽上传，而是通过 API 访问，Cloudflare R2 支持兼容 S3 的 API 访问，所以可以直接使用 S3 API 来访问，下面是使用 S3 需要的一些关键标识：

获取 account id

打开 R2 的 Overview 页面，即可在这里看到你的 Account ID：

图 7：AccountID

获取 access key 和 secret key

还是打开 R2 的 Overview 页面，然后选择 “Manage R2 API Tokens”：

图 8：这个是图片说明

选择 “Create API token”：

图 9：这个是图片说明

选择你需要创建的 Token 的权限，这个根据你的使用场景按需选择，一般跟从最小权限原则进行选择，其他的按需填写，如果没有特殊需求，保持默认即可：

图 10：配置 Token 权限

然后你就会跳转到创建成功页面，在这个页面你就可以看到创建成功的 Access Key 和 Secret Key 了：

图 11：Access Key

Github Action 集成

因为我近来习惯于使用 Github Action，所以就以 Github Action 为例演示如何将 Github Action 生成的制品发布到 R2 上，至于生成制品的过程就不介绍了，这里关注如何在 Action 中使用 R2，我这里使用了一个现成的 Action：ryand56/r2-upload-action@latest，我简单过了一遍代码，实现地也比较简单，但是满足要求了，并且没有发现后门啥的，所以就用它了：

添加 Action

要使用这个 Action，需要在你的 github action 配置文件里面加上这个步骤：

1. [[email protected]]# cat .github/workflows/action.yaml
2. ... ...
3. steps:
4. ... ...
5. - name: Upload static files to R2
6. uses: ryand56/[email protected]
7. with:
8. r2-account-id: ${{ secrets.R2_ACCOUNT_ID }}
9. r2-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }}
10. r2-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }}
11. r2-bucket: ${{ secrets.R2_BUCKET }}
12. source-dir: static
13. destination-dir: static

这里你需要修改的部分是：

• source-dir：你项目制品相对于你项目根目录的路径
• destination-dir：你希望放到 R2 对应的 bucket 中的路径

配置项目的变量

这里处于安全考虑，并没有直接在 Action 的配置中写入 access key 和 secret key 的值，而是通过引用变量的方式来实现，所以你就需要在你项目中设置对应变量的值，操作步骤为：

打开项目的 github 页面，选择 “Settings”：

图 12：打开 Repo Settings

然后在 “Security” 中找到 “Secrets and variables”，选择其中的 “Actions” 配置页：

图 13：打开设置页面

然后选择 “Secrets” 进行添加：

图 14：添加变量配置

然后就填写 Key 和 Value 的值，最终添加完应该是这样的：

图 15：完成添加

然后就可以添加代码，查看效果了。

图 16：Action 运行成功

图 17：R2 浏览文件