Step 6: Speed Up Your Website Using 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, the request is automatically redirected to a copy of the file at the nearest edge location, which results in faster download times than if the visitor had requested the content from a data center farther away. CloudFront caches content at edge locations for a period of time that you specify. When 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. In this manner, 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.
Create a CloudFront Distribution
First, you'll create a CloudFront distribution, which makes your website available from data centers around the world.
To create a distribution with an Amazon S3 origin
Open the CloudFront console at https://console.aws.amazon.com/cloudfront/.
Click Create Distribution.
On the Select a delivery method for your content page, under Web, click Get Started.
On the Create Distribution page, under Origin Settings, enter the Amazon S3 static website hosting endpoint for your bucket in the Origin Domain Name box. For example,
Do not select the name of your bucket from the list, for example,
The Origin ID value is filled in for you.
Leave the values under Default Cache Behavior Settings at their default settings. 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.
Under Distribution Settings, do the following:
Leave Price Class set to Use All Edge Locations (Best Performance).
Set Alternate Domain Names (CNAMEs) to the root domain and www subdomain (in this tutorial,
example.com, www.example.com). These values must be set in order to create A record aliases from the specified domain names to the CloudFront distribution.
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 does not contain a file name. This value should match the index document value that you set in Step 4: Deploy Your Website.
Set Logging to On.
In Bucket for Logs, select the logging bucket that you created (
Set Log Prefix to
cdn/, so that the logs generated by traffic to the CloudFront distribution are stored in a folder named
cdnin the log bucket.
Leave the other settings at their default values.
Click Create Distribution.
It can take up to 15 minutes to deploy the distribution. To view the current status of the distribution,
find it in the console and check the Status column. A status of
indicates that the distribution is not yet fully deployed.
When your distribution is deployed, you are ready to reference your content with your new CloudFront domain name. Make a note of the
value of Domain Name in the CloudFront console. You'll need this value in the next step. In this example,
the value is
To verify that your CloudFront distribution is working, enter the domain name of the distribution in a web browser. If it is working, you will see your website display.
Update the Record Sets for Your Domain and Subdomain
Now that you have successfully created a CloudFront distribution, the next step is to update the A records in Amazon Route 53 to point to the new CloudFront distribution.
To update A records to point to a CloudFront distribution
Open the Amazon Route 53 console at https://console.aws.amazon.com/route53/.
On the Hosted Zones page, select the hosted zone that you created for your domain.
Click Go to Record Sets.
Select the A record that you created for the www subdomain.
Under Alias Target, select the CloudFront distribution.
Click Save Record Set.
Repeat this procedure to redirect the A record for the root domain to the CloudFront distribution.
This change will take effect within two to 48 hours. You can tell that the new A records
have taken effect when going to
http://www.example.com in a browser no
longer redirects you to
http://example.com. 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 will not
be redirected to the root domain.
Browsers can cache redirect settings. If you think the new A record settings should have
taken effect, but you are still seeing
http://example.com, try clearing your browser history and cache,
closing and reopening your browser application, or using a different web browser (if
you have more than one installed).
At this point, any visitors who reference the site by using
http://www.example.com are redirected to the nearest CloudFront edge location,
where they will 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. Continue on to Step 7: Clean Up Your Resources. After you delete your AWS resources, your website will no longer be available.
(Optional) Check the Log Files
The access logs tell you how many people are visiting the website, and they contain valuable business data that you can analyze with other services, such as Amazon Elastic MapReduce (Amazon EMR).
When you check the log files in your bucket, you should see older Amazon S3 log files in the
root. All new log files should be CloudFront logs written in the folder
cdn. Amazon S3 website access logs are written to your log bucket every two
hours. CloudFront logs are written to your log bucket within 24 hours of the corresponding
requests, so you may have to wait for them to show up.
To view the log files of your website
Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
Select the logging bucket for your website.
rootto view the log files stored within.
Double-click a log file to open it in the browser (as text files written by Amazon S3) or download it (as GZip files written by CloudFront).