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.

I spent 12 hours becuz of this issue.... Thank you so much..........!!!

Thanks a lot, It works for me as well . :)

In my case Static website hosting for S3 bucket was disabled intentionally.
And CloudFront access S3 bucket content through origin access control.
IMHO above solution is not universal for every CloudFront+S3 configuration deploy.

In such scenario solution is to use LambdaEdge
https://learn.openwaterfoundation.org/owf-learn-aws/cdn/cloudfront/lambda-to-append-index/
https://docs.aws.amazon.com/lambda/latest/dg/lambda-edge.html

Wasted 4 hours on this, thanks a lot!
worked for me!