Setting up an Amazon CloudFront Content Distribution Network (CDN) for a Business Catalyst Website

Updated on 20-October-2016 at 10:16 AM

This document will help you setup a CDN for your Business Catalyst Site, through Amazon's CloudFront Service. This will allow browsers to fetch data much faster, as it will be cached on an intermediary server, that is supposed to handle much less requests, hence providing faster delivery times.

Pre-requisites:

- Amazon CloudFront account (http://aws.amazon.com/cloudfront/ )

- Live BC Site with at least one domain added

Note: This example will demonstrate the implementation for a site where DNS is hosted with BC. For sites where domains are hosted externally, the same steps apply, just that A and CNAME records are added within the respective DNS hosting provider's console.

Service Description

The way a CloudFront CDN works with BC is this:

clfront.jpg

CloudFront generates a subdomain on cloudfront.net for your distribution, basically representing a dedicated cache server, which will sync with your BC Site through an A record (a subdomain) and a CNAME, and then start serving content for it. To connect your website with the CloudFront distribution, you'll have to:

- Setup the A record on your site (a sub-domain) and mark it at CloudFront as the origin for the new content distribution.
When there's no cached version for an asset requested by a visitor, CloudFront will fetch that asset from the origin.
It will thus cache it, and any further requests will be resolved from CloudFront, without calling the asset again from the BC server.

- Add a CNAME on your site that points to the domain CloudFront generates for your distribution.


- Finally, reference all assets on your website through the CNAME created.


Step By Step Tutorial

With everything in place, let's assume our website is www.bcwebsite.tk.

The steps to activate your first distribution will be the following:

1. Add anA Record

(create a sub-domain) on your site (pointing to any local page). We've added library.bcwebsite.tk

a_record.jpg

2. Create a new Distribution on CloudFront

Access https://console.aws.amazon.com/cloudfront/home#distribution and click the "Create Distribution" button. When prompted, select Web as delivery method.

create_distribution.png

Origin settings

1.  Set your Origin Domain Name. Eg: library.bcwebsite.tk
Set Origin ID is automatically set to Custom WWW-library.bcwebsite.tk
2.  Set Origin Protocol Policy to HTTP Only (CloudFront will connect to my origin using only HTTP).

cloudfront_origin_settings.jpg

Default cache behaviour settings

1.  Set Viewer Protocol Policy to HTTP and HTTPS
2.  Set Object Caching to Use Origin Cache Headers
or choose "Customize" if you want to specify expiry time for objects in the CloudFront cache regardless of Cache-Control headers, through setting Minimum TTL (default 24h).
3.  Set Forward Query Strings to NO
(unless you want to return different versions of an object based on query strings )

cloudfront_cache_settings.jpg

Distribution settings

1.  Set Price Class.
If you activate CDN For only Europe and US the cost is smaller. All edge location imply worldwide coverage at higher cost

2.  Set an Alternate Domain Names(CNAMEs) Eg: cache.bcwebsite.tk
3.  You can choose to enable logging. For that you would need to create a Bucket in the S3 Console , required to store web server logs. You'll select that bucket here
4.  Set Distribution State to Enabled

cloudfront_distribution_settings.jpg

Finally, click on the Create Distribution button. You will see the status as follows:

distribution_inprogress.jpg

1.  A domain name has been generated for your CloudFront distribution: d**************q7.cloudfront.net.

2.  The service is now syncing with your site. The Status will change to "Deployed" once it complets, and that usualy takes about 10 minutes.

3.  Create aCNAME Record on your site pointing to your new Cloud Front domain name

cname.jpg

4.  Link assets on your site through the new CNAME

Example:

On any page or template, instead of:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

you'll have:

<script type="text/javascript" src="http://cache.yourwebsite.com`/js/jquery-1.4.4.min.js"></script>

The CNAME you defined earlier links cache.yourwebsite.com to d11********q7.cloudfront.net, so the above reference will be the same with:

<script type="text/javascript" src="d**********q7.cloudfront.net/js/jquery-1.4.4.min.js"></script>

Your Setup is ready.