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.

Very helpful!!!!!!!!! Thanks a lot

Wow! after 1 hour search in aws documentation, finally you save my next 3 hours trying to fix this. Thanks so much! +1

Thank you so much, you saved days of work. "5 starts"

This is super helpful, thanks for the write up! 🙌🏻

Very helpful!! Thanks a lot 🙏

Very helpfull!!! Works for me :)

Very Very helpfull !!!!!! Thanks
I'm wasted 8 hours find S3 Orign -> Custom Origin ...
I don't consider the s3 hosting endpoint directly copy to paste origin domain.

Cannot thank you enough!

Legend

Thank you very much, this worked for me.

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!