Note

Configure Cloudflare Cloud Connector for AWS S3 SSL Fix

In a previous note, I wrote how to point a custom domain to your S3 bucket. It seemed to work, but when my Cloudflare domain was set to SSL full(strict) mode, I noticed some of the images had SSL invalid certificate errors.

This can be solved with Cloudflare Connectors.

Cloudflare Connectors help securely route traffic between S3 and your domain, so there won't be any more SSL issues. To start, we need to configure the S3 bucket as a website host so it'll work:

1. Set S3 Bucket to Website Host

In your bucket properties, set enable static website hosting:

S3 Bucket properties tab, showing enable static website hosting

Even if you've not got an index.html, just press save with it. When that's done, you'll see a new link in the Static website hosting section:

S3 Bucket website endpoint Url in Static website hosting panel
Bucket website endpoint

2. Connect to CNAME:

Use the above Bucket website endpoint link as the value for your CNAME for the domain you want. It should have [bucketname].s3-website-[region].amazonaws.com:

CNAME field - shown updated with new bucket host url
CNAME: [bucketname].s3-website-[region].amazonaws.com

3. Set up Cloud Connector

Now go to Cloud Connectors in Cloudflare - you can just use the search:

Search for cloud connector in cloudflare
Cloud Connector

Choose Amazon S3 from the Cloud Connector options:

Cloud Connecter setup page, showing provider options with arrow pointing to AWS S3
Choose Amazon S3

Enter your Bucket website endpoint (same as the CNAME above):

Enter your bucket URL step, with input field filled with bucket url
Use your Bucket website endpoint

In the next step, set the value to Field: URI Full, Operator: Contains, Value: your domain name:

Configure cloud connector step with path math fields filled out

Done

That should be it - if you drop an index.html file into the root of your bucket it should be hosted on your domain. Here's mine, generated with Trae/Sonnet:

Index.html page hosted by S3 Bucket

And all your images that are in that bucket will be hosted too. If you uploaded your images the same as my previous note you'll be able to access them all depending on the folders/paths in your bucket, e.g.

http://wp.prototypr.io.s3-website-us-east-1.amazonaws.com/wp-content/uploads/2021/01/556129ef-c783-40c0-b1e1-f4adfbef4a70-150x150.gif?w=256&q=75&format=auto&compress=true&dpr=2