Saturday, December 7, 2019

Howto: Amazon CloudFront CDN with SSL

[vc_tta_tabs active_section=”1″ pagination_style=”outline-square”][vc_tta_section title=”Summary” tab_id=”1483657727692-588765df-8139e50c-cffe1903-e853″][vc_custom_heading text=”Problem / Outcome Summary”]
  • 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
[/vc_tta_section][vc_tta_section title=”Foreword” tab_id=”1483656936153-fec58c10-e606e50c-cffe1903-e853″][vc_custom_heading text=”Foreword”]

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.

[/vc_tta_section][vc_tta_section title=”Pre-Requisites” tab_id=”1483656936239-1facad3b-9216e50c-cffe1903-e853″][vc_custom_heading text=”Pre-Requisites”]

Software Dependencies

  • An Amazon account (free)
  • A web site that hosts content
  • WordPress (can be adapted)

Hardware Dependencies

  • None

Tools Required

  • A recent web browser such as Firefox, Safari or Chrome

Other Dependencies

  • A working internet connection
  • An active Amazon account
[/vc_tta_section][vc_tta_section title=”Summary Steps” tab_id=”1483657008528-9fc62da7-5742e50c-cffe1903-e853″][vc_custom_heading text=”High Level Summary Steps”]

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
[/vc_tta_section][vc_tta_section title=”Implementation” tab_id=”1483657023013-0e8f9bfb-cd0fe50c-cffe1903-e853″][vc_custom_heading text=”Implementation”]

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!

[/vc_tta_section][vc_tta_section title=”Final Word” tab_id=”1483657035357-36e2d8d1-b325e50c-cffe1903-e853″][vc_custom_heading text=”Final Word”]

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

[/vc_tta_section][/vc_tta_tabs]

Popular Articles

Raspberry Pi 3

Raspberry Pi Disk Images – Definitive List

This page attempts to list all the Raspberry Pi disk images known to currently exist from around the web, providing direct links to download...
Raspberry Pi Audio Hardware

Raspberry Pi audio HAT’s (Hardware Attached on Top) – Definitive List

Summary Back in July 2014, Raspberry Pi announced the then new, Raspberry Pi 2 followed soon after by the announcement of HaTs (Hardware Attached on...
How to set Plex permissions on Linux / NAS devices

How to set Plex permissions on linux or NAS devices

Problem / Outcome SummaryThis how to guide will show you how to properly set up Linux file permissions for Plex Media Server Please...
How to set up Plex on Raspberry Pi 2 or Raspberry Pi 3

How to Install Official Plex Media Player on Raspberry Pi 2 / Pi 3

This ‘How To’ article will show you step by step how to set up and install the official Plex Media Player on a...
Plex Media Server

How to install Plex Media Server on Ubuntu Server Headless

This howto will enable you to install the Plex Media Server on Ubuntu Server For how to install Plex Media Server on another...

Related Stories

3 COMMENTS

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay on op - Ge the daily news in your inbox