Amazon CloudFront Doesn't Respect My S3 Website Bucket's index.html Rules
I'm hosting a static website on Amazon S3 using the static website hosting option, so that S3 will render a folder without making me explicitly point to my index.html file.
For instance, here is a direct link to a page in my S3 bucket: http://new.rdegges.com.s3-website-us-east-1.amazonaws.com/category/2009/ As you can see, when you visit that URL, Amazon S3 automatically renders the index.html file inside of that directory, allowing me to have clean URLs.
This all works fine on S3. The problem I'm having is getting Amazon Cloudfront to properly handle this behavior as well. When I create a Cloudfront Distribution with my S3 bucket specified as the origin, and tell it to use 'index.html' as a root, the index.html behavior that S3 has just stops working all together.
For instance, here is my same URL as above on Cloudfront: http://d1mj00c6pby3gc.cloudfront.net/category/2009/
Unfortunately, the URL above does NOT work, but if I manually specify the index file, it does, e.g: http://d1mj00c6pby3gc.cloudfront.net/category/2009/index.html
My question is: how do I need to configure Cloudfront such that it respects my S3 bucket settings for my website?
Answer
S3 Website features can be used in conjunction with Amazon CloudFront. However, S3 Website uses a different domain name than regular S3 buckets. In this case, you'll need to set the Origin Domain Name of your CloudFront distribution's origin configuration to new.rdegges.com.s3-website-us-east-1.amazonaws.com.
You can take this URL (Endpoint) from the Static Website Hosting panel on S3:
Once CloudFront is pointed to the S3 website domain name, the S3 web site features should work.