Creating an Amazon CloudFront Distribution for the Static Website

Introduction

Amazon CloudFront is a global Content Delivery Network (CDN) that delivers data securely and efficiently. CloudFront pulls your website out to the edge of the network, reducing latency when accessed from different global locations.

In this lab step, you will set up an Amazon CloudFront distribution for your static site hosted in your Amazon S3 bucket.

Instructions

1. In the AWS Management Console search bar, enter CloudFront, and click the CloudFront result under Services:

The Amazon CloudFront console will load.

2. To start creating a distribution, click Create a CloudFront Distribution:

3. Under Origin, in the Origin Domain text-box, enter the Amazon S3 static website hosting endpoint that you created earlier:

4. Scroll down to the Settings settings, in the Default Root Object text-box, enter index.html:

You are setting this field because Amazon CloudFront doesn't always transparently relay requests to the origin. If you did not set a default root object on the distribution you would see an AccessDenied error when you access the CloudFront distribution's domain later in this lab step.

To learn more, see the How CloudFront Works if You Don't Define a Root Object section of the AWS developer guide for Specifying a Default Root Object.

5. Leave all other settings at their default values, scroll to the bottom, and click Create Distribution.

The CloudFront distribution list page will load and you will see your distribution listed.

You will see the Last Modified of your distribution is Deploying:

It can take up to 15 minutes to deploy a new Amazon CloudFront distribution. Once complete, the Status will change to Enabled.

There are two main types of origin that Amazon CloudFront supports, Amazon S3 buckets, and custom origins. A custom origin could be a website being served by an EC2 instance, or it could be a web server outside of AWS. To learn more while your CloudFront distribution is deploying, visit the AWS Using Amazon S3 Origins, MediaPackage Channels, and Custom Origins for Web Distributions page. 

Once your deployment is complete, continue with the instructions.

6. To view details of your distribution, click the random alphanumeric ID:

Note: Your ID will be different.

7. Copy the value of the Distribution Domain Name field:

Note: Yours will be different. This domain name is randomly generated and unique for each distribution in Amazon CloudFront.

8. Paste the domain name into the address bar of a new browser tab.

You will see the website that you uploaded to your Amazon S3 bucket display:

You are accessing the website through your Amazon CloudFront distribution.

Note: The instructions below are optional. Perform them if there is enough time left in the lab.

9. On the website, click through and visit the different pages a few times to generate traffic.

If you have a different web browser available, try accessing the site in the other browser.

Summary

In this lab, you created an Amazon S3 bucket and used it to host a static website. You created an Amazon CloudFront distribution and configured it to use your S3 bucket as an origin. You tested that you could access the static website directly through Amazon S3, and through your Amazon CloudFront distribution.