mygoodcool

mygoodcool

爱过、错过,不忘初心。

Building a zero-cost image hosting platform based on Cloudflare R2

This article introduces a new service recently launched by Cloudflare: R2. This is a free cloud storage service that is compatible with the S3 API. It allows users to store and retrieve data on a distributed network worldwide. R2 is marketed as "zero traffic cost object storage" and claims to be the cheapest option for object storage. Compared to other cloud storage services, R2 does not calculate traffic costs when accessing data, but only charges based on the total storage amount and number of operations. Which other cloud service provider in China dares to do this!

In addition, R2's storage network spans 275 cities in more than 100 countries, using Cloudflare's vast content delivery network (CDN) to achieve global distribution and fast access to data. It can also be seamlessly integrated with Cloudflare Workers, allowing users to easily perform authentication, route requests, and deploy edge functions on Cloudflare's edge network.

🦄 Free Package
According to the CF official website, each CF account can use the R2 service for free, of course, with some limitations. Storage up to 10GB per month is free, along with 1 million A-class operations and 10 million B-class operations per month. A-class operations are mainly write operations, while B-class operations are mainly read operations. For our daily access to the content in R2, it falls under the B-class category, and 10 million operations per month are more than enough for personal daily use. In addition, it can be combined with CF's cache, which will further reduce usage!

Cloudflare R2

🦌 Operation Method
To use R2, you need to register a CF account (choose the Free package) and preferably set up your own domain on CF.

1️⃣ Create a storage bucket
Find R2 in the left menu, open the overview, and click on the "Create Storage Bucket" button in the upper right corner.
Cloudflare R2

Fill in the name of the storage bucket and choose the location of the bucket (it is recommended to place it in the region with the highest traffic, such as if your users are mostly in the United States, choose North America). The default storage class can be set to Standard.

Cloudflare R2

2️⃣ Configure the storage bucket
After creating the bucket, go back to the overview page, open the bucket you just created, and click on "Configure".

Cloudflare R2

Scroll down and find the "Public Access" section, click on "Connect a Domain", and assign your own domain to this bucket.

Cloudflare R2

Enter your own subdomain, such as imghub.yourdomain.com, and click the "Continue" button.

Cloudflare R2

After a moment, CF will automatically add a record of type R2 to the DNS records. This is CF's internal exclusive record and can be ignored. In any case, you can now use this domain to access the images stored in R2.

Cloudflare R2

3️⃣ Set up caching
R2 has 10 million free read operations per month. If you are not confident, you can add another layer of caching. This can reduce the number of origin reads and speed up access. CF supports setting up to 10 cache rules per domain, which is usually enough. With a little skill, you won't need many.

Find "Cache" in the menu, open "Cache Rule", and click on "Create Rule".

Cloudflare R2

Enter a rule name (optional) and set the matching rule. Here, we directly set the hostname to be the domain name you set earlier. Of course, there are many other dimensions for matching rules, supporting operators such as equal to, contains, starts with, ends with, etc. Set according to your actual resources that need to be served through the CDN.

Cloudflare R2

Scroll down and select "Cache Everything" in the cache level. Click on "Add Setting" in the Edge TTL section, then select "Ignore Cache Control Header" and use this TTL. Choose a time in the "Time to Live (TTL)" input box. Free accounts support a minimum of 2 hours and a maximum of 1 year. For an image hosting service, it is recommended to choose a longer time to minimize origin reads and reduce the number of B-class operations on the R2 storage bucket.

Cloudflare R2

Finally, scroll to the bottom of the page and click on "Deploy". Wait for 30 seconds for it to take effect. From now on, your image hosting service will be running on the CDN.

Cloudflare R2

4️⃣ Upload images
When we talk about setting up an image hosting service, we are referring to managing images in R2, but it doesn't mean that R2 can only store images. There are no such restrictions, so please don't misunderstand.

Now that the image hosting service is set up, how do we upload images? As mentioned at the beginning of the article, R2 is a cloud storage service compatible with S3. We can directly use existing S3-compatible tools to upload images. Of course, if you don't mind the extra steps, you can also upload directly on the R2 storage bucket interface.
Cloudflare R2

Using PicGO to upload
In the settings interface of the storage bucket, check the location of the bucket, such as APAC for the Asia-Pacific region. Take note of this as we will need it later.

Cloudflare R2

Below the account ID, there is a "Manage R2 API Tokens" button. Click on it and then click on "Create API Token".

Cloudflare R2

On the creation page, enter a token name and select "Object Read" and "Object Write" for permissions. Keep the rest as default and confirm the creation.

Cloudflare R2

The relevant information for this token will be displayed on the page. Note that the token value, access key ID, and secret access key will only be shown once. After closing this page, you won't be able to see them again. It is recommended to record them separately and not share them with others!

Cloudflare R2

Next, search for S3 in the plugin settings of PicGO and install the S3 plugin.

Cloudflare R2

After the plugin is installed, it's time to configure it. Fill in the Application Key ID, Application Key, Bucket Name, File Path, and Custom Domain. The rest can be left blank or filled in according to your actual situation. Once the settings are complete, you can start uploading images normally.

The corresponding fields are as follows:

Plugin Field CF Field or Meaning
Application Key ID Access Key ID
Application Key Secret Access Key
Bucket Name R2 storage bucket name
File Path Keep default or define your own
Custom Domain Your R2 default domain or the custom domain you set earlier
Cloudflare R2

The above is a brief introduction to using PicGO to upload images to R2. If you are using other S3-compatible tools, the process is similar. I haven't had much experience with other tools, so I won't go into detail. This concludes the tutorial on setting up an image hosting service based on R2.

In short, did you spend a penny from start to finish!

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.