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:
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:
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:
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:
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
Buy me a coffee
