Configuring an AWS CloudFront Distribution

Hands-On Lab

 

Photo of Fernando Medina Corey

Fernando Medina Corey

Training Architect

Length

00:30:00

Difficulty

Intermediate

In this live AWS environment, you will learn how to create and configure an Amazon CloudFront distribution that will cache website assets like images, fonts, and other web assets. This skill will allow you to understand how you can use CloudFront to architect more performant and even more cost-effective solutions. By the end of the live AWS environment you will have created a CloudFront distribution and configured a custom domain's Route 53 hosted zone to point to CloudFront.

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Configuring an AWS CloudFront Distribution

Introduction

The ability to build and configure websites is an important skill every AWS Solutions Architect should have. Fortunately, AWS provides several services that can help us not only host websites, but also configure them to effectively cache and deliver resources to users.

In this hands-on lab, we're going to create and configure a website hosted on AWS. We'll start by configuring a static site within an S3 bucket, and then we'll create a CloudFront distribution that can cache resources for our static site. Finally, we will configure a DNS record in Route 53 to direct users looking for our static site to our CloudFront distribution.

Let's get started. Sign in to the AWS console with the username cloud_user and the password provided on the lab instructions page.

After you've signed in to the AWS console, open the S3, CloudFront, and Route 53 services in new browser tabs. You can find these services under the AWS services section of the console or by opening the Services dropdown and searching for them there.

Creating and Configuring a CloudFront Distribution with Route 53 and a Static Site

Now we're going to actually create all the resources that we need for our static site, our CloudFront distribution, and our Route 53 DNS record.

Configuring a Static Site

First, we need to make sure our S3 bucket is set up correctly. On the S3 Management Console page, locate the bucket name that starts with cfst and contains the term statics3bucket. This is what bucket names look like when we create them in CloudFormation. (If you see any other buckets in this list, you can ignore them for now.) Click the name of the bucket to open it.

On the bucket configuration page, you should see two files: myindexpage.html and myerrorpage.html. These are the files we're going to use to configure a static site in our S3 bucket.

At the top of the page, click the Properties tab. Select Static website hosting and choose the Use this bucket to host a website option. Under Index document, enter myindexpage.html, and under Error document, enter myerrorpage.html. Click the Save button.

Now we have associated these two files with the index document and error document for our static site. However, if we go back to the Static website hosting menu and click on the endpoint we generated, we receive an error that tells us we're being denied access to the static website. This is because we haven't made the objects in our bucket public yet. Let's fix this now.

Click the Overview tab on the S3 Management Console page, and select both files in the object list by clicking the check boxes on the left. Next, click the Actions button, and select Make public from the dropdown menu. In the pop-up that opens, click the Make public button. To verify that our static site is working, refresh the endpoint page. You should now see a short plain-text message instead of the 403 error we were getting before. This means our static site is now working.

Creating a CloudFront Distribution

Navigate to the CloudFront Management Console browser tab that we opened earlier, and click the Create Distribution button. On this page, we can see that there are two kinds of distributions we could create: Web and RTMP. RTMP is useful for streaming media files, while Web distributions are best for distributing media files (including .html, .css, .php, and graphics files) over HTTP and HTTPS. In this lab, we're not going to be doing any video streaming, so the Web option is definitely what we need. Under the Web header, click Get Started.

Click into the Origin Domain Name field, and select the Amazon S3 bucket for our static site from the dropdown menu (again, the name should begin with cfst). You may see additional Amazon S3 buckets or resources in this list; make sure you select the static site bucket instead of something else.

There are quite a few configuration options on this page, most of which we aren't going to cover in this lab. If you're curious about any of the settings we aren't configuring, feel free to click the i information icon on the right to learn more.

Our next step is to set up an alternate domain name (or "CNAME") for our static site, which we can use in conjunction with our Route 53 website to route traffic correctly. Scroll down the page to the Distribution Settings header, and click into the Alternate Domain Names (CNAMEs) field. Next, navigate to your Route 53 browser tab, and click Hosted zones under the DNS management header. A domain has already been set up for you. Copy the domain name and paste it into the Alternate Domain Names (CNAMEs) field on the CloudFront Management Console page. If you accidentally copied any extra characters (like a period at the end), be sure to remove them.

Next, we need to add a sub-domain to our domain name. At the beginning of the domain name we pasted into the Alternate Domain Names (CNAMEs) field, type "cdn" and 4-6 additional numbers or characters followed by a period. The reason we need to add additional characters after "cdn" is to ensure that our domain name is unique. CloudFront distributions take a while to spin up and spin back down, and we don't want to run into any naming conflicts by accidentally using the same combination of numbers and characters as another user. Once you've finished creating your domain name, copy it and save it. We'll need it later when we configure our Route 53 record sets.

Before we create the distribution, let's review some of the CloudFront configuration options we're not going to be using in this lab.

Origin Settings

  • Origin Custom Headers
    • Allows us to specify values or specific header names to be included in each request to the CloudFront origin
  • Restrict Bucket Access
    • Can be used to prevent users from accessing the static site directly by only allowing them access to the CloudFront distribution

Default Cache Behavior Settings

  • Viewer Protocol Policy
    • Can be set to:
    • Allow HTTP and HTTPS
    • Redirect HTTP to HTTPS
    • Only allow HTTPS
  • Allowed HTTP Methods
    • Can be configured to allow some or all of the following HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
  • Minimum/Maximum/Default TTL (Time to Live)
    • Determine how long items will be cached in CloudFront

Distribution Settings

  • Price Class
    • Can be used to configure pricing options for your CloudFront distribution
    • Several options that determine overall cost and performance
  • SSL Certificate
    • Can be used to set up HTTPS on your CloudFront distribution

In the future, you may want to adjust these settings when you build websites in AWS. But for the purposes of this lab, we'll leave them alone.

Make sure the CNAME you created is copied to your clipboard, and then click Create Distribution. As we mentioned earlier, CloudFront distributions take a while to spin up, so this step could take a little while (around 10-20 minutes).

Configuring a DNS Record Set in Route 53

While we're waiting for our CloudFront distribution to finish launching, let's start setting up our DNS record set. Switch to your Route 53 Mangement Console browser tab, and click the name of the domain: cmcloudlab278.info. On the Hosted Zone page, you should see two records: one NS record and one SOA record. If you see any other records in this list, delete them.

Click the Create Record Set button at the top of the screen. In the Name field on the right side of the page, enter the same unique identifier we added to the beginning of our CloudFront CNAME earlier. For example, if your CloudFront CNAME is cdn5431.cmcloudlab278.info, enter "cdn5431" here. Next, click into the Type field, and select A - IPv4 address from the dropdown menu. For Alias, select the Yes option. Then, click into the Alias Target field. In the dropdown menu, select our CloudFront distribution name from the list under the CloudFront distributions header. Don't worry if it hasn't finished provisioning yet; we can still select it as an alias target before it's ready. If you don't see our CloudFront distribution in the dropdown list, verify that the record set name and CloudFront CNAME are an exact match — if they aren't, you won't be able to set the CloudFront distribution as an alias target. Once you've finished configuring these settings, click the Create button at the bottom of the screen. This will associate the sub-domain of our domain to the CloudFront distribution and help us direct traffic successfully.

Go back to the CloudFront Management Console page and copy the CNAME from the distribution list (you may have to resize the columns if you're having trouble accessing the full URL). Next, open a new browser tab and paste the CNAME into the address bar. Press Enter. You may receive an error that says the site cannot be reached. This means your CloudFront distribution is not finished deploying. If this happens, go back to the CloudFront Management Console page and wait until the Status changes from In Progress to Deployed. Then try loading the page again.

This time, you should see a different error that says we're being denied access at the root level. Add "/myindexpage.html" to the end of the URL and press Enter again. Now you should see a plain-text message instead of an error. This means that we have access to the static website at our CloudFront distribution.

Conclusion

In this lab, we successfully configured a CloudFront distribution, created a static website that can serve up content through a CloudFront distribution, and configured CloudFront's DNS record in Route 53 so that it points to a CloudFront distribution when users go to a custom domain name.

Congratulations, you've completed this lab!