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:

Warning: If you don't see the S3 bucket in the origins list, manually enter the following: <name_of_the_bucket>.s3.amazonaws.com

4. Under Origin, in the Origin access, select Origin access control settings and click Create control setting:

Under Create control setting, enter the following values:

• Name: Enter
• Signing behavior: Ensure Sign requests is selected

Origin access control secures S3 origins by allowing access to only designated distributions. This follows AWS best practice of using IAM service principals to authenticate with S3 origins.

5. Click Create

Leave all other fields in this section as well as the Default cache behavior section as their default values.

6. Scroll down to Settings, and in the Price class selection, select Use only North America and Europe:

Amazon CloudFront minimizes end-user latency by delivering content from its entire global network of edge locations. Price Classes let you reduce your delivery prices by excluding Amazon CloudFront’s more expensive edge locations from your Amazon CloudFront distribution. In these cases, Amazon CloudFront will deliver your content from edge locations within the locations in the price class you selected and charge you the data transfer and request pricing from the actual location where the content was delivered.

The time required for deploying a new CloudFront distribution also depends on the number of selected Edge Locations. Selecting all edge locations will take longer to deploy.

7. In the Default root object field, enter index.html.

CloudFront will serve the default root object when the base distribution URL is requested.

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.

8. To finish configuring your distribution, at the bottom of the page, click Create distribution:

 You will be brought to the distribution details page.

CloudFront automatically assigns an ID (top of the page) and a Distribution domain name to the distribution and starts updating the edge locations to serve your content:

9. Return to the Distributions table by clicking the breadcrumb link at the top of the page:

Within the table, observe the Status field of your distribution. It will read Enabled while the Last modified field will display 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.

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

Note: Your ID will be different.

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

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

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