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.
@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