Howto: Amazon CloudFront CDN with SSL

• This article will enable you to speed up your website / blog by offloading the loading of images to a dedicated content delivery network (Amazon CloudFront CDN) with SSL, (SSL is optional).
• Please see the summary overview tab below for a high level view of the objectives this ‘howto’ will achieve.

Why might I want to do this?

• To reduce the amount of traffic being sent to / from your web site, blog site, web host, or web server.
• To help increase your search ranking in Google.
• To speed up the performance of your site when someone views it.
• To help mitigate against server failure or performance issues should your site or server be hit with an unexpected amount of traffic e.g. an article goes ‘viral’.
• To help reduce the load on a ‘shared hosting’ site

To be clear, how does a CDN work?

Simply put, a CDN network hosts the static files such as images on the CDN systems instead of on your hosts systems so that your host has more capacity to focus on other things. This is especially useful for cheaper hosting plans.

How does this work technically?

A CDN consists of multiple web servers strategically placed around the world, which can then be ‘closer’ to the person viewing your site. When the person viewing your site goes to a page which has CDN hosted content, the CDN knows where the closest (and therefore fastest) server is compared to that person and delivers your static content from that CDN location instead of your host or site.

How does the CDN get the content from my server?

There are a number of ways to do this depending on what kind of software you’re running and what you’re trying to achieve. But in essence, the links on your blog need to have the URL’s updated to reflect the hostname of the CDN. If you’re using a content management system such as WordPress, this can be done automatically using a plugin such as W3 total cache. It simply re-writes the image locations to point to the CDN instead of your server. In the wordpress case, the process is reversable by simply uninstalling the plugin or rewriting the links to point back to the original location again, but really you’re unlikely to want to do this.

Why did you choose to write this article about Amazon Cloudfront instead of another hosting provider?

Amazon has grown a reputation as being extremely reliable, I’m not talking about reliable for small businesses, I’m talking enterprise grade reliability that Amazon have actually built from the ground up using specialised hardware and software designed and written by Amazon and key partners specifically for the purpose of serving reliable cost effective hosting.  This makes Amazon the fastest, most reliable service available with more points of presence, more redundancy not to mention an incredible pricing structure You don’t have to sign up to $200 or even $50 dollars a month and in fact provided you use less than 50GB of traffic or 2 million requests per month, you’re not likely to pay a cent for the first year. I believe this makes it the most compelling CDN on the market today and it’s why people like Netflix, Airbnb and many others serious about performance and reliability are using Amazon.

What isn’t a CDN?

• It is not a proxy or reverse proxy
• It does not host your entire site, only the static bits
• It will not keep your site up if your server goes down (for that you can look at CloudFlare along with CloudFront).

Additional resources

A really nice touch is you can download the manual for CloudFront directly to your kindle if you have one by going to the page here. You’ll note there’s also a PDF and an online version.

The below lists the high level summary of steps we’re about to take during this howto.

• Install the W3 Total Cache Plugin
• Create a new account for Amazon CloudFront (you don’t want to use your root account for this)
• Set up CloudFront (via W3 Total Cache)
• Configure AWS for SSL
• Refresh Hosting System

Install the W3 Total Cache Plugin

1. Log in to the wordpress admin by navigating to your wordpress site and appending /wp-admin to the URL.
2. Click the Plugins menu on the left side of the wordpress admin panel
3. Click the Add New button at the top left of the plugins screen
4. In the ‘Search Plugins’ dialog box, enter ‘W3’ and press enter
5. Click on the ‘Install Now’ button under the W3 Total Cache plugin that comes up
6. Click the ‘Activate Plugin’ link on the following page that comes up.
   1. The plugin should now be installed and enabled (but not actually active – even though WordPress says it is active).
7. Click on the General Settings Page and scroll down to CDN. Leave this disabled, but click on CDN Type of Amazon CloudFront and click Save all Settings

Create a new account for amazon cloudfront (you don’t want to use your root account for this)

1.  Sign into your AWS account console (outside scope of this exercise, but you can create one at https://aws.amazon.com)
2. Choose the Identity & Access Management Service under the Administration & Security Section
3. Click ‘Users’ on the left
4. Click ‘Create New Users’
5. Enter the User name you would like to add for your new cloudfront only account
6. Click Create at the bottom right of the screen
7. Click Show User Security Credentials on the next screen that comes up
8. Copy and paste the Access Key ID and the Secret Access Key ID into the same field names in W3 Total Cache in WordPress
9. Click Close at the bottom of the Amazon page
10. Click Policies on the left of the Amazon AWS screen
11. In the search box at the top, start typing ‘cloudfront’ without the quotes
12. Click the checkbox next to CloudFrontFullAccess
13. Click the Policy Actions drop down box and choose attach
14. Click the checkbox next to the name of the account you just created and click Attach Policy at the bottom of the screen.

Set Up Cloudfront (via W3 Total Cache)

1. Click on the new WordPress admin menu on the left hand side entitled, ‘Performance’ (You will note that there are many other settings, this guide does not go over those only the CDN part).
2. Click the CDN menu on the left hand side.
3. Scroll down to the configuration section, under which the first line has a blue link entitled, ‘IAM’ – In the configuration section you should now have your previously entered Access key ID, your Secret key AND these would have come from an account you created with limited Amazon permissions.
4. Click the ‘Create Distribution button’ – if you set up your Amazon account correctly you should now be met with a prompt saying ‘Distribution Created Successfully’

You’ll note there’s still an empty box in the ‘Replace site’s hostname with:’ section. To get the hostname for this do the following:

1. Go back to Amazon Web Services and choose the CloudFront service under the storage and content delivery or alternatively try this link: # https://console.aws.amazon.com/cloudfront/home?region=eu-central-1
2. On the page that comes up you will see the distribution you just created.
3. Click the blue link in the ID column which will be represented by various numbers and letters
4. Note the Domain Name on the General Page and copy this into the blank section on your WordPress W3 Total Cache plugin.
5. You will also note in the Amazon Web Service page that the status column reads ‘In Progress’ This will change to ‘Deployed’ when complete. How long this takes depends on how many images and static content you have in your web site as essentially this is copying your content to CDN servers around the globe.
6. Back in the W3 Total Cache plugin, on the CDN page, go ahead and ensure all the tick boxes are on that can be except for ‘Add cananonical header’ – you shouldn’t need that.
7. Go back to the Performance / General Settings Page and click enable in the CDN section.

Configure AWS for SSL

1. If you’re wondering how this all works with SSL, there’s one radio button that you need to change to work with your SSL site.
2. In the AWS Cloudfront Distributions page, click the blue link in the ID column and then on the Origins Tab.
3. Under the origins tab click the tick box next to your domain name, then click edit.
4. Change the Origin Protocol Policy to ‘Match Viewer’.
5. Then click the ‘Yes, Edit’ button

Refresh Hosting System

One last step is to purge your caches. You would need to purge any caches from any performance tools that your hosting provider has first, then after that purge the cache from the CDN section or at the top of the W3 Total Cache plugin page.

That’s it, all done!

As at time of writing, this blog is hosted using this method. If you click on an image and copy it’s locationyou should see it’s hosted at cloudfront.net. In this way, this site can currently use a much cheaper hosting plan than it otherwise could.

As always, I welcome your insights and opinions in the comments section below.

Marshalleq