77

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?

rdegges
  • 32,786
  • 20
  • 85
  • 109
  • You can definitely set it for the root. Not sure if it works per directory, though. http://aws.typepad.com/aws/2010/08/new-amazon-cloudfront-feature-default-root-object.html – dirn Mar 13 '13 at 03:22
  • 2
    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. – rdegges Mar 14 '13 at 02:32
  • "Doesn't respect ".. Woow ! +1 from me – Abdennour TOUMI Aug 21 '17 at 05:49
  • Related to https://stackoverflow.com/q/13280836/356887 – xdhmoore Mar 02 '18 at 00:25

3 Answers3

123

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:

Static Website Hosting panel on S3

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

fregante
  • 29,050
  • 14
  • 119
  • 159
Wade Matveyenko
  • 4,290
  • 1
  • 23
  • 27
  • 1
    Thank you, this was incredibly annoying! – rdegges May 24 '13 at 14:37
  • 6
    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. – SimplGy Sep 12 '13 at 17:28
  • And to answer my own question, apparently nothing: "If you are using Amazon S3 or Amazon EC2 as an origin server, data transferred from the origin server to edge locations (Amazon CloudFront “origin fetches”) will be billed at a lower price than Internet data transfer out of Amazon S3 or Amazon EC2." -- http://aws.amazon.com/cloudfront/pricing/ – troelskn Feb 10 '14 at 15:06
  • Almost made the same mistake. AWS should really rectify this. I wonder though, if this is a bug or a feature. – dezinezync May 21 '14 at 15:41
  • 6
    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. – Alex B Oct 13 '14 at 12:34
  • 1
    @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." – Zerkey Jun 27 '15 at 00:21
  • 3
    +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. – sheikhjabootie Aug 30 '15 at 09:31
  • FWIW, I had to only allow HTTP when talking form cloundfront to the bucket, NOT "match viewer". I recall there are some strict rules about AWS and HTTPS to buckets, so that is probably why. This works, but if you enable "match viewer" and it doesn't, then undo that change. – Andrew Sep 23 '15 at 12:20
  • 2
    @AlexB Is that still the case - that you cannot use Cloudfront SSL if you origin domain name is your S3 static website endpoint? – colemerrick Dec 22 '17 at 18:49
  • @bagofcole I _think_ it's still the case, but I haven't tried. – Alex B Dec 29 '17 at 11:44
27

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

Michael Yagudaev
  • 6,049
  • 3
  • 48
  • 53
  • 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 – Jacob Bryan Oct 18 '15 at 20:40
  • 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 – Josh Coady Sep 28 '19 at 17:47
3

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.

Dries Van Hansewijck
  • 1,314
  • 7
  • 15