Skip to content

Instantly share code, notes, and snippets.

@zulhfreelancer
Created May 15, 2019 04:46
Show Gist options
  • Save zulhfreelancer/24f73015c5437281f3b98c3cb34ea225 to your computer and use it in GitHub Desktop.
Save zulhfreelancer/24f73015c5437281f3b98c3cb34ea225 to your computer and use it in GitHub Desktop.
S3 Website + CloudFront - how to show index.html content when at /sub-directory/ path?

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.
@ryanyu104
Copy link

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

@leandromsales
Copy link

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

@khaihoan2711
Copy link

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

@andrewlazenka
Copy link

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

@futureCreator
Copy link

Very helpful!! Thanks a lot 🙏

@joxpg
Copy link

joxpg commented Oct 13, 2021

Very helpfull!!! Works for me :)

@qkrsh0424
Copy link

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.

@akmukherjee
Copy link

Cannot thank you enough!

@ethanbayliss
Copy link

Legend

@c-watt-12
Copy link

Thank you very much, this worked for me.

@JoonikChoi
Copy link

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

@Mohammadi1360
Copy link

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

@tmatejuk
Copy link

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

@cott-king
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment