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?

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.

I would like to add a few things to the accepted answer.

First, make sure you have a Default Root Object on your cloud front. As specified in the documentation this will not apply to subdirectories.

When setting up a new distribution of cloudfront, it will let you select your bucket bucket-name.s3.amazonaws.com. Note the region is not specified in the URL. What you need to do is to grab the static site url from s3 and use that as the origin url (the region will be there).

This might be late in the game, but check out Lambda@Edge. You can intercept Origin Requests without extension and point them to the index.html document in the folder. These results are cached, so the Lambda is only executed when it gets a new request.