Amazon CloudFront Doesn't Respect My S3 Website Bucket's index.html Rules

amazon-s3 amazon-cloudfront

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?

You can definitely set it for the root. Not sure if it works per directory, though. aws.typepad.com/aws/2010/08/…

Hey @dirn, yep! I'm using the default root of index.html, but for some reason it doesn't apply to any sub-folders (only the top-level). I find this odd since S3 has the same setting, and it DOES apply to all sub-folders as well, arg.

"Doesn't respect ".. Woow ! +1 from me 😃

Related to stackoverflow.com/q/13280836/356887

fregante

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:

https://i.stack.imgur.com/AUTew.png

Once CloudFront is pointed to the S3 website domain name, the S3 web site features should work.

Great resolution, thank you. This happens to lots of people I bet, since cloudfront autocompletes to the bucket name, not the static website url. The difference was not clear to me at first.

The only downside, you cannot use SSL between CloudFront and S3 if you use static website endpoint. So, SSL or index.html handling: pick one.

@AlexB there is (now) an option when adding the Origin to either use "HTTP Only" or "Match Viewer". "If you select Match Viewer for the Origin Protocol Policy, and if the viewer connects to CloudFront using HTTPS, CloudFront will connect to your origin using HTTPS."

+2 - Just came back to give you an upvote as this solved my problem - and I already had given you an upvote - the last time this happened to me. The tricky thing is that AWS autocompletes the CloudFront origin to your S3 bucket, but the default is not the website URL it's the S3 URL. You'd think AWS would know that the S3 bucket was configured as a website, and adjust the default accordingly.

@AlexB Is that still the case - that you cannot use Cloudfront SSL if you origin domain name is your S3 static website endpoint?

Michael Yagudaev

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).

I had the problem of the root object not giving the default index.html. At first I tried sending it to the cname www.example.com and www.example.com/index.html which didn't work, and I had it work when I simply set the root object as index.html

I had to set the CF default root object to blank (not set) and then set the index document on the s3 bucket to index.html

Dries Van Hansewijck

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.

Amazon CloudFront Doesn't Respect My S3 Website Bucket's index.html Rules

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US