创建服务
打开 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 配置文件里面加上这个步骤:
[root@liqiang.io]# cat .github/workflows/action.yaml
... ...
steps:
... ...
- name: Upload static files to R2
uses: ryand56/r2-upload-action@v1.2.3
with:
r2-account-id: ${{ secrets.R2_ACCOUNT_ID }}
r2-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }}
r2-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }}
r2-bucket: ${{ secrets.R2_BUCKET }}
source-dir: static
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 浏览文件 |
---|