I am Nik Butler
Knowledge Knolling
Knowledge Knolling
The Cloudflare R2 Object Storage service provides a far easier way for developers to host online content in a fashion similar to Amazons S3 service; but without the IAM and policy headaches. This may be because Cloudflare , having been in control over User interface expectastions, are able to fashion a simple path from requirement to coding. You can add the service to your Cloudflare account subscription for free as you will be paying for bandwidth of your domain with the first 10GB being free.
With the subscription added to your account you will have access to the R2 Dashboard for your account; we cant to Create bucket
In the bucket creation options we are going to choose Automatic for location and Standard for Storage Class; Remember these are buckets, not file stores, object access frequency impacts storage costs and access times.
You want to make the bucket accessible to the world so you can use it as a Content bucket; select the Settings and then select Custom Domains from the Public Access sections.
In the screenshot below i have "focussed in on this section and included the text for the domain I am adding".
If the domain is controlled by Cloudflare , with your account access then Cloudflare will handle creating the suitable Cname entry to point your custom domain to this bucket; this will also handle SSL certification.
When a custom domain is connected to your bucket, the contents of your bucket will be made publicly accessible through that domain. Websites connected can also benefit from Cloudflare features such as bot management, Access, and Cache. Learn more
*Dont forget to add additional CORS policy to ensure you can access that content from within calls made by development tools when working locally.
[
{
"AllowedOrigins": [
"http://localhost:3000"
],
"AllowedMethods": [
"GET"
]
}
]
You can, if you wish, use the Cloudflare dashboard to upload your content. Alternatively you might use a product we developed as a extension for Visual Studio Code ; The Image Storage Explorer is currently in beta pre-release and provides a feature to manage and deploy images to and from your Content Delivery Services such as Cloudflare, Azure, Amazon and Google. I have been using the same tool to create this and other pages on my blog.
To use the tool you will need to create a *Cloudflare API Key which allows you to programatically manage your Buckets contents.
Go ahead and select the API -> Manage API Tokens
Select your Token type, either User, or Account; note if you likely want to use Account API tokens which will help you enable access to the R2 bucket.
Here you can refine the API token data with a Token name, give it purpose not just the default; which I have used here because you dont need to know the name I used.
When the token is created you will be greeted with a page containing a lot of data which WILL DISAPPEAR when you leave this page.
Token Value : random_string_letters_numbers
Access Key ID random_string_letters_numbers
Secret access key random_string_letters_numbers
Endpoint https://random_string_letters_numbers.r2.cloudflarestorage.com
If you are using the Domain to host content you may want to ensure that there are suitable responses are created when Bots attempts to crawl your bucket. At the simplest level you may want to put a holding page into place in the root of the bucket to avoid pages like the following
Example screen shot from the Google Search Console tools.
Buckets in cloudflare do not have directoryIndex functions such as those we are expecting to see when using Amazon S3 so you will want to create a *Transform Rule in the Rules for your domain such as the following
Here we set the requested url as :
The Target path is : Empty
The rewrite to is : index.html
```When visiting the Url we have a index telling the user to go find the right location; Later we may want to add a sitemap into that location and some meta to tag the images better
We may also want to put a rule for all 404 responses to also goto this page though for now.