|« PreviousNext »|
|Did this page help you? Yes | No | Tell us about it...|
Amazon CloudFront is the service that we'll use to increase 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, he or she is invisibly redirected to a copy of the file at the nearest edge location, which results in faster download times than if the visitor had accessed 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 new version of the content is available. If there is, CloudFront copies the new version to the edge location. In this manner, changes that you make to the original content are replicated out to edge locations as visitors request the content.
With CloudFront, the fee that you pay is based on the global edge locations you deploying to, and the volume of data that is transferred from those edge locations. The CloudFront charges that you will incur for the example deployment in this guide are minimal, approximately $4.70 a month. For more information about pricing, go to CloudFront Cost Breakdown.
In this step, you will do the following:
Create a CloudFront distribution that makes your website available from data centers around the world
Update the A records in Amazon Route 53 to point to the CloudFront distribution
To create a distribution with an Amazon S3 origin, we will use the AWS Management Console.
To create a CloudFront distribution
Open the Amazon CloudFront console at https://console.aws.amazon.com/cloudfront/.
In the CloudFront console, click Create Distribution.
On the Step 1: Select delivery method page, accept the default selection, Web, and then click Continue.
On the Step 2: Create Distribution page, do the following:
In the Origin Domain Name box, enter the Amazon S3 static website hosting endpoint for your bucket. This is the value that you copied in Step 4 of the procedure To configure your root domain Amazon S3 bucket as a website, for example, example.com.s3-website-us-east-1.amazonaws.com.
Do not select the name of your bucket from the list, for example, example.com.s3.amazonaws.com
The Origin ID value is automatically filled in for you.
Leave Origin Protocol Policy, HTTP Port, and HTTPS Port at their default settings.
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, 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 guide,
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: Launch Your Website on Amazon S3.
Set Logging to On.
In Bucket for Logs select the logging bucket that you created in Step 3: Configure Storage on Amazon S3 (in this guide
Set Log Prefix to cdn/. This setting stores the logs generated by traffic to the CloudFront distribution to a folder
cdn inside the log bucket.
Leave Cookie Logging set to Off.
Leave Comment blank.
Leave Distribution State set to Enabled.
Click Create Distribution.
After you create the distribution, it may take up to 15 minutes to deploy for the distribution. The distribution's current status is displayed in the console under Status. A status of InProgress 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, go to the domain name of the distribution in a web browser. If it is working, you will see your website display.
Your AWS infrastructure is currently configured as shown in the image below.
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 in Amazon Route 53 to point to a CloudFront distribution
Open the Amazon Route 53 console at https://console.aws.amazon.com/route53/.
Select the hosted zone that you created for your domain. In this guide, the zone is
Click Go to Record Sets.
In the list of records, select the check box that corresponds to the A record you created for the www subdomain. In this guide, the A record for the www subdomain is
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. In step 4, use
Wait from 2 to 48 hours for this change to take effect. 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://www.example.com redirect to
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.)
Your AWS infrastructure is currently configured as shown in the image below.
At this point, any visitors who reference the site by using
will be invisibly redirected to the nearest CloudFront edge location, where they will benefit from faster download times.
Congratulations! You have now improved the performance of your website for all visitors, whether they're accessing the site
The last thing to check on the site is that the access logs are being correctly written to Amazon S3. These files tell us how many people are visiting the site, 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 this guide, they are stored in the
logs.example.com bucket) you should see older Amazon S3 log files in the folder
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 2 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
In the Amazon S3 console, click the logging bucket you created (in this guide, we used
root to view the log files stored within.
Double click a log file to either open it in the browser (text files written by Amazon S3) or download it (GZip files written by CloudFront).
You're finished! You have created a static website hosted on Amazon S3, assigned a custom domain to the site using Amazon Route 53, and improved performance with a CloudFront distribution.
If the site you've created is one you want to keep, you're done. You may want to review Pricing to understand the ongoing costs associated with the site you've created.
If you created your site as a learning exercise only, it's time to delete the resources you allocated so that you no longer accrue charges. Continue on to Step 7: Clean Up. After you delete your AWS resources, your website will no longer be available.