13

I created a bucket where I´m hosting my static website.

I set the properties to use it as static website hosting (which index document value index.html)

The URL was: http://mywebsitelearningcurve.s3-website-us-east-1.amazonaws.com (not currently up, just to explain)

I exposed it as public (permission).

Overview of my bucket

/images
/static
/asset-manifest.json
/favicon.ico
/index.html
/manifest.json
/service-worker.js

Using http://mywebsitelearningcurve.s3-website-us-east-1.amazonaws.com I could access to my site. However I decided to use CloudFront in front of my bucket.

I created a new distribution for WEB.

On Origin Domain Name I used mywebsitelearningcurve.s3.amazonaws.com

Origin ID: S3-mywebsitelearningcurve

In Viewer Protocol Policy I selected: Redirect HTTP to HTTPS.

Once it finished and I waited for a prudential time to propagate, I had the url https://d2qf2r44tssakh.cloudfront.net/ (not currently up, just to explain).

The issue: When I tried to use https://d2qf2r44tssakh.cloudfront.net/ it showed me a xml 

<ListBucketResult xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><Name>mywebsitelearningcurve</Name>
...
...
...
</ListBucketResult>

However, when I tried https://d2qf2r44tssakh.cloudfront.net/index.html it works properly.

I go through several tutos and post but I can´t still make it work. Anyone can provide help? Thanks

Peter
  • 2,004
  • 2
  • 24
  • 57
  • 1
    You have overlooked the step in the documentation that tells you **not** to select the bucket from the drop-down list (that is used for authenticated access, not public), but instead to specify the website hosting endpoint as the origin domain name in CloudFront. https://stackoverflow.com/a/34065543/1695906 – Michael - sqlbot Jun 17 '18 at 03:04

2 Answers2

42

I had the same problem today and was able to fix it by adding index.html to the Default Root Object in the distribution settings:

enter image description here

Optional. The object that you want CloudFront to return (for example, index.html) when a viewer request points to your root URL (http://www.example.com) instead of to a specific object in your distribution (http://www.example.com/index.html).

Andre Gallo
  • 2,261
  • 5
  • 23
  • 46
  • 3
    Thanks, worked for me. Looks like S3's similar setting _**Index document**_ doesn't take effect if behind CloudFront. – Neurion Dec 15 '18 at 03:38
  • It made my day. Thanks a lot. – Paresh Mayani Jul 31 '19 at 11:44
  • Thanks, that helped. Unfortunately I had the same problem in subdirectories, and there doesn't appear to be a similar setting for sub-directories. There appear to be two solutions, (1) rename x/ to x/index.html using triggers/LambdaEdge (2) use S3 REST API. Good luck Googlng to pick. – Adam Jack Jan 16 '20 at 20:34
0

i had 5 years prod experience on AWS with 5 certifications in place. When it comes to s3 + cloudfront, i got always in troubles I tried to automate that using Cloudformation, but Cloudformation does not support everything needed (.i.e. custom origin in cloudfront).

At the end, i relies only on terraform to automate this part:

https://github.com/riboseinc/terraform-aws-s3-cloudfront-website/blob/master/sample-site/main.tf

If you don't mind to use terraform, i highly recommend to jump there.

Abdennour TOUMI
  • 87,526
  • 38
  • 249
  • 254