Creating a Service

After opening Cloudflare’s Dashboard (dash.cloudflare.com), navigate to the Overview of R2, and then select “Create bucket”:

Figure 1: Create R2 Bucket
Figure 1

Enter your desired bucket name, and you can directly create the bucket:

Figure 2: Set bucket name
Figure 2

Now, you can drag and drop files onto the webpage to upload them to this bucket:

Figure 3: Drag and drop to upload files
Figure 3

Binding a Domain

If you are hosting your domain on Cloudflare, you can easily add a custom domain to your S3. It’s not mandatory, as Cloudflare assigns a default domain, which is a bit longer and uses Cloudflare’s domain, possibly requiring handling of CORS issues.

Figure 4: Add custom domain
Figure 4

Enter your desired domain and select “continue”:

Figure 5: Add domain
Figure 5

Cloudflare will perform some configurations, and once completed, it will be in the “active” state:

Figure 6: Added successfully
Figure 6

API Usage

Typically, file uploads are not done through drag-and-drop but through API access. Cloudflare R2 supports S3-compatible API access, allowing you to use S3 API directly. Here are some key identifiers needed for using S3:

Obtain account ID

On the R2 Overview page, you can find your Account ID:

Figure 7: AccountID
Figure 7

Obtain access key and secret key

Again, on the R2 Overview page, select “Manage R2 API Tokens”:

Figure 8: Image description
Figure 8

Choose “Create API token”:

Figure 9: Image description
Figure 9

Select the permissions needed for the token, based on your use case. Generally, follow the principle of least privilege. Fill in other details as needed, keeping the defaults if there are no specific requirements:

Figure 10: Configure Token Permissions
Figure 10

You will then be redirected to the success page, where you can see the Access Key and Secret Key:

Figure 11: Access Key
Figure 11

Github Action Integration

As I’ve recently preferred using Github Action, I’ll demonstrate how to publish artifacts generated by Github Action to R2. The artifact generation process is not covered here; the focus is on using R2 in the Action. I’ve used an existing Action: ryand56/r2-upload-action@latest. I’ve briefly reviewed the code, and it’s relatively simple but meets the requirements without any apparent backdoors, so I’ve opted to use it:

Add Action

To use this Action, add the following step to your Github Action configuration file:

  1. [root@liqiang.io]# cat .github/workflows/action.yaml
  2. ... ...
  3.     steps:
  4. ... ...
  5.       - name: Upload static files to R2
  6.         uses: ryand56/r2-upload-action@v1.2.3
  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

Here, you need to modify:

Configure Project Variables

For security reasons, access key and secret key values are not directly written in the Action configuration but are referenced as variables. Set the corresponding values in your project by:

Open your project’s Github page and select “Settings”:

Figure 12: Open Repo Settings
Figure 12

Then, in “Security,” find “Secrets and variables,” and choose the “Actions” configuration page:

Figure 13: Open settings page
Figure 13

Select “Secrets” to add:

Figure 14: Add variable configuration
Figure 14

Fill in the Key and Value, and the final addition should look like this:

Figure 15: Completion of addition
Figure 15

Now, you can add code and check the results.

Usage Results

Figure 16: Action run successful
Figure 16
Figure 17: View files in R2
Figure 17

References