zainarsady

Posted on Aug 18

Creating a Cloudflare R2 Bucket

#backend #r2 #systemdesign

Good day everyone!!

In my first ever post at dev.to we will discuss about the functionality of Cloudflare R2 bucket.

This post aims to help people set up, configure r2 bucket and upload files on R2 bucket.

Why do you need an R2 bucket in the first place?

First we need to specify the problem. For most developer, problem with side projects or small projects are the that resources are really scarce. Imagine you have created the perfect system but now you can't store any image from user because you have run out of memory on the server you pay $6.99 every month. That's where R2 bucket or R2 file storage comes in.

Let's get right into it, for this tutorial I will mainly refer to this cloudflare documentation.

Step 0: create Cloudflare account

Go to this link to cloudflare dashboard and sign up or log in into your account.
Go to homepage and click on storage & databases. It should show R2 Object Storage option, let's click that.

Step 1: Creating a Bucket

Make sure that you're at overview. Click "Create a Bucket" on the right hand side of the page. You should be in this page:

Type in the bucket name of your liking, the location, and the default storage class. And press Create Bucket, now your bucket is ready to be configured!

One thing to understand is that there are 4 ways to access an R2 Bucket:

Workers API (the one we will use in this tutorial) : built using an application on Cloudflare Workers that need to read and write from R2
S3 : uses S3-compatible SDKs to interact with R2 mostly in existing applications
CLI tools: Upload, download, or manage object from the terminal
Dashboard: Dashboard. On the browser.

Step 2: Setting up Bucket and Worker

Open up any text editor or IDE and open an empty folder.
Go to the terminal and type in this:
npm create cloudflare@latest -- r2-worker
If prompted to install a new package press y and choose javascript for language. You can get away with the default option for each options but you can also follow these steps showed in images for guidance.

Choose "no" for deploy as we will deploy after we have done setting up
Once done with the prompts, change directory to your r2-worker cd r2-worker
Open your wrangler.jsonc and it should look like the image below

and put this code at the arrow in the image

{
  "r2_buckets": [
    {
      "binding": "MY_BUCKET",
      "bucket_name": "my-bucket"
    }
  ]
}

don't forget a comma before putting above code

note that binding here can be named anything but bucket_name must be same as your bucket name

Step 3: Testing the Bucket

If you have done until here, congratulation you are considered done because now all we have to do is testing.

We will test in local first, write npx wrangler dev into your terminal. It might take some time but once successful it would show this

Now let's test!

Open a different terminal, and type in these curl commands.

# Store an object
curl -X PUT http://localhost:8787/my-file.txt -d 'Hello, R2!'

# Retrieve the object
curl http://localhost:8787/my-file.txt

You have successfully store and retrieved a file from your bucket!

Step 4: Deployment of worker

Type npx wrangler deploy into your terminal
This will redirect you to browser for you to grant permission.
You must authorize wrangler in order for this application to work.
After deploying, wrangler will output your worker's URL in the terminal. It's usually in this form https://r2-worker.<YOUR_SUBDOMAIN>.workers.dev. Now you can test storing and retrieving using this link.
Just like how we tested it:

# Store an object
curl -X PUT https://r2-worker.<YOUR_SUBDOMAIN>.workers.dev/my-file.txt -d 'Hello, R2!'

# Retrieve the object
curl https://r2-worker.<YOUR_SUBDOMAIN>.workers.dev/my-file.txt

After words

R2 Bucket has been my first step to the system design endeavor and has improved me as a programmer in the way of thinking as a architecture rather than just a coder. In this world of AI, I believe a good programmer is the one who can make decisions, compare trade-offs and be confident in their production code.

I hope this post was helpful, this technology can be used in tons of situations and will definitely amplifies the potential of your side projects.

Thank you for reading. I am open for any feed backs or comments to improve my article writing. Until we meet again!

DEV Community