Fixing CloudFront distribution for Gatsby sites in S3
March 29, 2020
In the Amazon CloudFront Console, you’ve got the opportunity to link directly to an S3 bucket in order to setup the CDN functionality.
When creating or editing an Origin, a dropdown will be available for you to choose which bucket to host. When choosing a bucket from the dropdown, you are referring to the REST endpoint of the bucket. But this is not what you want. When hosting a Gatsby site, it is important to provide the Website endpoint in stead of the REST one. Gatsby wants the website endpoint in order to be able to properly execute routing. So go to the S3 interface, and fetch the bucket’s website url.
Therefore, I changed <test.s3.amazonaws.com> to http://test.s3-website.eu-central-1.amazonaws.com.
Sources: