Setting up a Cloud Front CDN in WordPress

So setting up my websites through Linode has saved me a fortune over a comparable setup using the Amazon EC2 Service.  Linode offers Domain management, load balancing and separate volumes, all at a great price point.  The one service that Linode doesn’t provide (and what I started to realize I needed/wanted, but didn’t know how to setup) is a CDN Service.

Here are the steps that I took (after much trial and error and following incomplete guides online).  This guide assumes that you’re familiar with AWS and have an account;  If you don’t, follow this guide.

Create a Cloud Front Distribution

Move to the Cloud Front Service page, and select Create Distribution:

You’re presented with the option to create a Web distribution or a RTMP distribution.  For this guide, simply select Get Started under the Web Distribution option:

The Create Distribution page has over 30 options to set/select, but you only need to enter an Origin Domain Name (the Origin ID is created automatically):

Once complete, select the Create Distribution button:

The newly create distribution will appear in the Distributions list and will have a status of In Progress:

This will take a few minutes to complete.  While waiting we can add DNS entries to support this new distribution.

When the distribution is created, a new domain name was created.  Note the name of the new distribution from the Distribution List:  It will be in the format of xxxxxxxxx.cloudfront.net.

First CNAME Record

The next step varies based on who manages the DNS records for your domain.  I use Linode so the instructions below are Linode-specific instructions.

In my case (and what appears to be a common way of implementing a CDN) i will use a CNAME record to make the URL behind the CDN-served content “prettier”, so instead of xxxxxxxxx.cloudfront.net/image01.jpg it will look like cdn.andresanz.blog/image01.jpg:

This DNS change could take a few hours to overnight to replicate.  While wew wait, we can go back to the AWS Management Console and create a certificate.  This certificate is needed use your own DNS name to serve up the CDN distribution content.

Certificate Manager

From Certificate Manager, select Request a certificate:

From the Add Domain Names page, add domain names for both the root domain and the sub domain you’ll use for the CDN distribution:

Then select Next:

You’ll then need to select a method of validation – DNS or EMail.

Choose DNS Validation if you have or can obtain permission to modify the DNS configuration for the domains in your certificate request.  Choose EMail Validation if you do not have permission or cannot obtain permission to modify the DNS configuration for the domains in your certificate request.

Select DNS Validation

and select Review & Confirm and request:

  

Certificate Manager will then generate CNAME records that you’ll need to replicate into the DNS record of your selected domain:

Second CNAME Records

Add the two corresponding CNAME records in your DNS record for the corresponding domain.  My CNAME records now look like:

You’ll now need to wait for the certificates in AWS Certificate Manager to be recognized and have its status changes to Issued:

Once that is done, you’ll now need to update the CDN Distribution to use the new domain name.

Updating the Cloud Front Distribution

From the Cloud Front Service Page, select the Distribution Settings for the distribution you want to update:

From the General tab, select Edit:

Then enter the name of the Alternate domain Name to use for the Cloud Front distribution:

Then select the Custom SSL Certificate option, and select the Certificate that was created in the prior step:

Then select Yes, Edit when complete:

A this point your Cloud Front distribution is setup to server your content via the alternate Domain name you provided in the steps above.  Now we need to configure WordPress to use the Cloud Front distribution.

WordPress & W3 Total Cache

Using the Plugin section of WordPress, install and activate W3 Total Cache:

The details of the W3 Total Cache installation and configuration will differ greatly depending on what’s available to your WordPress installation, such as Redis or Memcached caching, but to configure the CDN component, select Performance > General Settings from the Admin Menu in WordPress, enabling CDN and selecting Generic Mirror form the CDN Type drop down:

Select Save all settings when complete:

Finally, select Performance > CDN, and update Replace site’s hostname with field with the alternate domain name created earlier:

Use the Test Mirror button to validate your settings are correct.  Finally Save Settings & Purge Caches:

Now when you look at the details behind your static site content like scripts and images:

you’ll see that they are now served from your alternate domain, which is your Cloud Front distribution!

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *