S3 Website + CloudFront - how to show index.html content when at /sub-directory/ path?

README.md

Problem

We have index.html file in S3 bucket under a folder called /about-us/. When checking in browser using CloudFront distribution link, custom-domain.com/about-us/ shows AccessDenied error.

But, custom-domain.com/about-us/index.html works fine and show content.

What we want

We want custom-domain.com/about-us/ to show the index.html content.

Solution

Get the Website Endpoint:

1. Sign into the AWS Management Console and open the S3 console at https://console.aws.amazon.com/s3/home
2. Choose the name of your bucket and then choose Properties
3. Choose Static website hosting
4. You will see the website endpoint of your S3 bucket which will be in the format: http://example-bucket.s3-website-region.amazonaws.com/
5. Copy the website endpoint without the "http://" we will need to add this to CloudFront

Update your CloudFront Distribution:

1. Open the CloudFront console and choose your distribution.
2. On the Origins and Origin Groups Tab choose your S3 origin and choose Edit.
3. For Origin Domain Name copy and paste the website endpoint of your S3 bucket with static website hosting.
4. Choose Yes, Edit.
5. You will notice that the Origin Type will change from S3 Origin to Custom Origin. It will take about 15 minutes to deploy the changes to all the Edge locations.