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:
- Setup the S3 bucket to have Static website hosting: Enabled with the hosting type set to "Bucket hosting". The bucket is
Publicly accessible
. - Setup a Cloudfront distribution with its origin domain set to
[bucket name].s3-website-ap-southeast-2.amazonaws.com
which has completed deployment. - Set
[subdomain].[domain].io
as an alternate domain name within the Cloudfront distribution. - 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
- 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?
4
Answers
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.
This error 504: "The request could not be satisfied" usually means that the cloudfront distribution can’t connect to the configured source. Are you able to access your system using the website URL directly without CF?
Have you set cloudfront, during the distribution creation, to be the only allowed to access the bucket by accident?
https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-access-to-amazon-s3/
Everything makes me believe that your bucket is not accessible even if you set the website hosting feature.
my solution to this problem in terraform is with :
origin_protocol_policy = "http-only"
because s3 static website endpoint is on http, so if you choose "https-only"
it will give 504 error.
Two things solved my issue:
Added s3:GetObjectVersion action to the public permission for s3
Ensure that NO custom headers are defined in the origin