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:
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:
Letter
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:
3. Set up Cloud Connector
Now go to Cloud Connectors in Cloudflare - you can just use the search:
Choose Amazon S3 from the Cloud Connector options:
Enter your Bucket website endpoint (same as the CNAME above):
In the next step, set the value to Field: URI Full, Operator: Contains, Value: your domain name:
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:
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