Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 950
rdegges Avatar asked Mar 09 '13 09:03

rdegges


People also ask

Does CloudFront cache index HTML?

CloudFront will not cache index. html anymore.

Why is Amazon CloudFront blocking me from websites?

Request Blocked." is an error from the client. This error can occur due to the default actions of AWS WAF rules associated with the CloudFront distribution. The following settings may cause a Request Blocked error: When the default action is set to Allow, the request matches a rule that has Action set to Block.

How do I connect my S3 to CloudFront?

Open the CloudFront console. Choose Create Distribution. Under Origin, for Origin domain, choose your S3 bucket's REST API endpoint from the dropdown list. Or, enter your S3 bucket's website endpoint.

How do I fix CloudFront error 403?

A custom origin is returning the 403 error A 403 error might be caused by an AWS WAF or custom firewall configuration made at the origin. To troubleshoot, make the request directly to the origin. If you can replicate the error without CloudFront, then the origin is causing the 403 error.


2 Answers

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.

like image 101
Wade Matveyenko Avatar answered Nov 03 '22 18:11

Wade Matveyenko


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

like image 42
Michael Yagudaev Avatar answered Nov 03 '22 18:11

Michael Yagudaev