Be careful with the S3 origin URL for a Cloudfront distribution
Be careful with the S3 origin URL for a Cloudfront distribution.
When using an S3 bucket with static website hosting enabled as the origin for a Cloudfront distribution, you must use the static website endpoint, and not the S3 bucket URL. These are different.
The S3 bucket URL looks like this (don’t use this for the Cloudfront origin):
https://s3.eu-west-2.amazonaws.com/foobar-bucket-name/
The S3 static website hosting URL looks like this (use this for the Cloudfront origin):
http://foobar-bucket-name.s3-website.eu-west-2.amazonaws.com
If you use the S3 bucket URL, the Cloudfront distribution will be able to serve
exact file paths, e.g. /foo/bar/index.html, but will give a 403 Access Denied
response when trying to serve the implicit root object at that path, i.e.
/foo/bar/.
You have to set the S3 static website hosting URL as the origin URL to be able to serve nice paths like that via Cloudfront.
This bit me when setting up an art poster prints side-project site to experiment with static ecommerce.
I had to dig around to find this Stack Overflow answer to figure out where the problem was.