Serving multiple S3 buckets via single AWS CloudFront distribution

Written by Vimal Paliwal Oct 22, 2018 AWS

Vlog:

In this blog, I will take you step by step on how you can serve content from multiple S3 buckets using a single AWS CloudFront distribution.

Scenario:

Let's assume you have a personal website along with a blog and you have both of them in separate S3 bucket but don't want to deploy individual CDN for both the buckets.

Let's start with creating S3 buckets

I will create two S3 buckets named cloudfront-s3-website and cloudfront-s3-blog

Contents of cloudfront-s3-website:
- index.html

Contents of cloudfront-s3-blog:
- blog/
    - index.html

Download Contents

Now that you have created S3 bucket it's time to create a CloudFront distribution to serve our contents via CDN.

Creating AWS CloudFront Web Distribution

Section: Origin Setting

  1. Under Origin Domain Name select website bucket.
  2. Leave Origin Path blank.
  3. Origin ID has been pre-populated.
  4. Select Yes for Restrict Bucket Access.
  5. Click on Create New Identity for Origin Access Identity.
  6. You can stick to the default value for Comment.
  7. Select Yes under Grant Read Permissions on Bucket.
  8. You can leave Origin Custom Headers blank.

Section: Default Cache Behavior Settings

  1. I am going to select Redirect HTTP to HTTPS for Viewer Protocol Policy.
  2. I will stick to default value for all other parameters under this section.

Section: Distribution Settings

  1. Provide index.html under Default Root Object so that CloudFront will load index.html page by default whenever you will hit the URL.
  2. You can leave all other settings default.
  3. Click Create Distribution button.

Now, click on Distributions from the left panel than click on distribution ID.

You will see details about the distribution you just created.

Something like this...

Keep an eye on Distribution Status row. Once it switches to Deployed state, grab the Domain Name and paste it in a new tab. You should now see your index page being rendered.

Typically, it takes 5 minutes for Distribution to get deployed.

You now have a CDN ready to serve your website. It's now time to serve the blog bucket via the same distribution.

Under Origins tab, click on Create Origin button.

Section: Origin Setting

  1. Under Origin Domain Name select blog bucket.
  2. Leave Origin Path blank.
  3. Origin ID has been pre-populated.
  4. Select Yes for Restrict Bucket Access.
  5. Click on Create New Identity for Origin Access Identity.
  6. You can stick to the default value for Comment.
  7. Select Yes under Grant Read Permissions on Bucket.
  8. You can leave Origin Custom Headers blank.
  9. Click on Create button.

Next under Behaviors tab, click on Create Behavior button.

Section: Cache Behavior Settings

  1. Write blog/* under Path Pattern.
  2. Select blog bucket for Origin.
  3. I am going to select Redirect HTTP to HTTPS for Viewer Protocol Policy.
  4. I will stick to the default value for all other parameters.
  5. Click on Create button.

Hurray! The distribution is now ready to serve your website along with your blog.

Let's check out:

https://dvzbsjguiqqnj.cloudfront.net/

https://dvzbsjguiqqnj.cloudfront.net/blog/index.html