website-hosting-cloudfront-walkthrough

Example: Speed Up Your Website with Amazon CloudFront

You can use Amazon CloudFront to improve the performance of your website. CloudFront makes your website's files (such as HTML, images, and video) available from data centers around the world (called edge locations). When a visitor requests a file from your website, CloudFront automatically redirects the request to a copy of the file at the nearest edge location. This results in faster download times than if the visitor had requested the content from a data center that is located farther away.

CloudFront caches content at edge locations for a period of time that you specify. If a visitor requests content that has been cached for longer than the expiration date, CloudFront checks the origin server to see if a newer version of the content is available. If a newer version is available, CloudFront copies the new version to the edge location. Changes that you make to the original content are replicated to edge locations as visitors request the content.

To speed up your website, use CloudFront to complete the following tasks.

Topics

Create a CloudFront Distribution

First, you create a CloudFront distribution. This makes your website available from data centers around the world.

To create a distribution with an Amazon S3 origin

  1. Open the CloudFront console at https://console.aws.amazon.com/cloudfront/.

  2. Choose Create Distribution.

  3. On the Select a delivery method for your content page, for Web, choose Get Started.

  4. On the Create Distribution page, in the Origin Settings section, for Origin Domain Name, type the Amazon S3 static website hosting endpoint for your bucket. For example, example.com.s3-website.us-west-1.amazonaws.com.

    CloudFront fills in the Origin ID for you.

  5. For Default Cache Behavior Settings, leave the values set to the defaults. For more information about these configuration options, see Values that You Specify When You Create or Update a Web Distribution in the Amazon CloudFront Developer Guide.

  6. For Distribution Settings, do the following:

    1. Leave Price Class set to Use All Edge Locations (Best Performance).

    2. Set Alternate Domain Names (CNAMEs) to the root domain and www subdomain; in this tutorial, these are example.com and www.example.com. These values must be set before you create aliases for the A records that connect the specified domain names to the CloudFront distribution. Important
      Prior to performing this step, note the requirements for using alternate domain names, in particular the need for a valid SSL/TLS certificate.

    3. Set Default Root Object to index.html. This is the default page that the CloudFront distribution returns if the URL used to access the distribution doesn't contain a file name. This value should match the index document value that you set in Configuring a Bucket for Website Hosting.

    4. Set Logging to On.

    5. For Bucket for Logs, choose the logging bucket that you created.

    6. To store the logs generated by traffic to the CloudFront distribution in a folder, named cdn, in the log bucket, type cdn/ for Log Prefix.

    7. Leave the other settings at their default values.

  7. Choose Create Distribution.

To see the status of the distribution, find the distribution in the console and check the Status column. A status of InProgress indicates that the distribution is not yet fully deployed.

After your distribution is deployed, you can reference your content with the new CloudFront domain name. Record the value of Domain Name shown in the CloudFront console. You'll need it in the next step. In this example, the value is dj4p1rv6mvubz.cloudfront.net.

To verify that your CloudFront distribution is working, type the domain name of the distribution in a web browser. If it is working, your website is visible.

Update the Record Sets for Your Domain and Subdomain

Now that you have successfully created a CloudFront distribution, update the A records in Route 53 to point to the new CloudFront distribution.

To update A records to point to a CloudFront distribution

  1. Open the Route 53 console at https://console.aws.amazon.com/route53/.

  2. On the Hosted Zones page, choose the hosted zone that you created for your domain.

  3. Choose Go to Record Sets.

  4. Choose the A record that you created for the www subdomain.

  5. For Alias Target, choose the CloudFront distribution.

  6. Choose Save Record Set.

  7. To redirect the A record for the root domain to the CloudFront distribution, repeat this procedure.

The update to the record sets takes effect within 2 to 48 hours. To see if the new A records have taken effect, in a web browser, type http://www.example.com. If the browser no longer redirects you to http://example.com, the new A records are in place.

This change in behavior occurs because traffic routed by the old A record to the www subdomain S3 bucket is redirected by the settings in Amazon S3 to the root domain. When the new A record has taken effect, traffic routed by the new A record to the CloudFront distribution is not redirected to the root domain.

Tip
Browsers can cache redirect settings. If you think the new A record settings should have taken effect, but your browser still redirects http://www.example.com to http://example.com, try clearing your browser history and cache, closing and reopening your browser application, or using a different web browser.

When the new A records are in effect, any visitors who reference the site by using http://example.com or http://www.example.com are redirected to the nearest CloudFront edge location, where they benefit from faster download times.

If you created your site as a learning exercise only, you can delete the resources that you allocated so that you no longer accrue charges. To do so, continue on to Clean Up Your Example Resources. After you delete your AWS resources, your website is no longer available.

(Optional) Check the Log Files

The access logs tell you how many people are visiting the website. They also contain valuable business data that you can analyze with other services, such as Amazon EMR.

In your bucket, older Amazon S3 log files are located in the root folder. All new log files, which should be CloudFront logs, are located in the cdn folder. Amazon S3 writes website access logs to your log bucket every two hours. CloudFront writes logs to your log bucket within 24 hours from when the corresponding requests are made.

To see the log files for your website

  1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.

  2. Choose the logging bucket for your website.

  3. To see the log files that are stored in the cdn or root folder, choose cdn or root.

  4. Open Amazon S3 log files, which are text files, in a browser. Download the .gzip files written by CloudFront before opening them.

Edit this page