Setting up an Amazon CloudFront CDN

Since my post about setting up a basic WordPress site I’ve added a few more plugins to this site for things like Google Analytics, minimising image sizes and defer loading JavaScript files.

I load Google Analytics through Google Tag Manager and this isn’t the most high performing script so that’s a challenge I’ve got for later.

The other plugins, however, are performance related and will help keep this site quick as it grows.

The other big step I’ve taken is to set up a CDN (Content Delivery Network) using Amazon Cloudfront. Read on to see how I did it.

These were the steps I took:

  1. Log into your Amazon Web Services control panel (or sign up if you don’t already have one) and go to the CloudFront section.
  2. You’ll need to create a new distribution. You’ll need to choose the Web option rather than RTMP.
  3. You don’t need to adjust many settings fortunately, but the key ones are:
    • Origin Domain Name: your domain eg: fasterfasterfaster.co.uk
    • Origin Path can be left blank
    • Origin ID can be named as you want, it’s just a reference.
  4. Scroll down to the Distribution options and this is where you can set your fancy, professional looking CDN url. I wanted cdn.fasterfasterfaster.co.uk so I added that in the Alternate Domain Names (CNAMEs) box. You can add more than one of you want, but for now, one is enough.
  5. You can leave all the other fields as they are for now and click the Create Distribution button.
  6. This will now create your new distribution and return you to the list of distributions and you’ll see it labelled as In Progress as it sets everything up. This can take a few minutes, but you can leave it going.
  7. You need to get the cloudfront.net url for your distribution and make a note of it as you’ll need it for the DNS set up. This url will look something like this: d131mjpdec2vv4.cloudfront.net
  8. Now you need to go to your domain name provider and make some DNS changes. You need to add a new CNAME record to give you a url like cdn.fasterfasterfaster.co.uk and point it to the cloudfront.net url you made a note of earlier.
  9. DNS changes can take a little while to propagate around the world so it might need 24hrs before it works fully.
  10. So that’s Amazon set up and your DNS set up. You still need to tell WordPress that you want to use this url for your CDN.
  11. This is where the plugin WP Super Cache that I installed before helps make this easy.
  12. So go to your WordPress admin area and the settings page for WP Super Cache and click on the CDN tab.
  13. Click the Enable CDN checkbox and set the Off Site URL to be the new CDN url you set up. Click Save and that’s pretty much it.

Don’t forget, the DNS changes can take a little while to go through so your site might look a little bit broken while this is happening.

Once it’s all set up, check the paths for your css, js and image files on your site and you should see that they now point to this new CDN url.

Simple eh? It’s an important thing to set up. It not only helps with the performance of your site as a CDN is designed to distribute files around the world meaning they are quicker to download from different countries but it also takes some of the load off your server too. Quite handy if you haven’t got the fastest hosting set up in the world.

One Comment

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>