Cloudfront with S3 static site hosting responds with 504 error

Question

I've setup S3 + Cloudfront to host a static website using a subdomain provided by Namecheap, but when navigating to the Cloudfront URL, or domain URL, AWS responds with a 504: "The request could not be satisfied" error.

The steps I've completed are:

1. Setup the S3 bucket to have Static website hosting: Enabled with the hosting type set to "Bucket hosting". The bucket is Publicly accessible.
2. Setup a Cloudfront distribution with its origin domain set to [bucket name].s3-website-ap-southeast-2.amazonaws.com which has completed deployment.
3. Set [subdomain].[domain].io as an alternate domain name within the Cloudfront distribution.
4. Assigned a Custom SSL certificate to my distribution that has a status of "Issued" from AWS Certificate Manager for my custom domain [subdomain].[domain].io
5. Setup a CNAME within NameCheap so that [subdomain] points to [abc123].cloudfront.net. which has propagated (confimed by whatsmydns.net)

I'm new to Cloudfront + S3 hosting and trying to skill up, but not hosting in general (I usually use EC2 with either Apache or NGINX).

How can I resolve the 504 error?

Answer 1

The issue turned out to be that I was using [bucket name].s3-website-ap-southeast-2.amazonaws.com like the tutorials I'm using take special note to specify. Nowadays it seems you should use [bucket name].s3.ap-southeast-2.amazonaws.com instead.

Once I made the above update and the distribution was deployed everything started working.