Creating an Amazon CloudFront Distribution for the Static Website

Lab Steps

lock
Logging in to the Amazon Web Services Console
lock
Creating an Amazon S3 Bucket for a Static Website
lock
Creating an Amazon CloudFront Distribution for the Static Website
Need help? Contact our support team

Here you can find the instructions for this specific Lab Step.

If you are ready for a real environment experience please start the Lab. Keep in mind that you'll need to start from the first step.

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:

alt

The Amazon CloudFront console will load.

 

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

alt

 

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

alt

 

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

alt

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:

alt

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:

alt

Note: Your ID will be different.

alt

 

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

alt

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:

alt

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.

Validation checks
1Checks
Created CloudFront Distribution that Points to Static Website

A CloudFront distribution returns a status code of 200 when visited

Amazon CloudFrontAmazon Simple Storage Service (S3)