Setting up a Content Delivery Network (CDN) with WordPress (part 1)

Content Delivery Networks or Content Distribution Networks (CDN) can have a huge impact on the speed and performance of your website. They can take some of the strain away from your own website hosting because they serve files from a network of servers instead of yours. This can be especially useful for large website with lots of images or in a situation where your hosting is not as good as it could be.

In the first part of this two part tutorial I will show you how to set up your storage with Amazon S3 and how to set up a new WordPress website to automatically upload your media to the CDN as you upload it to your website.

Part 2 will cover how, if you already have a website and would like to convert it to use a CDN, you can upload your entire media library and other files using the W3 Total Cache Plugin.

NB: There are many ways to set up a CDN with your WordPress website, this is just one option and my personal preference.


Setting up a basic Content Delivery Network on your WordPress website

You will need:

  • An up to date install of WordPress (at the time of writing I’m working on v3.9.1)
  • An Amazon S3 Cloud Storage account
  • Basic knowledge of how to install plugins
  • Basic knowledge of how to edit config.php

Firstly, let’s set up the Amazon S3 service for use with your new WordPress website. Once you have created an account over at http://aws.amazon.com/s3/ and logged in you should be faced with the Amazon Web Services Dashboard. We only need to concern ourselves with two areas at the moment, S3 and IAM.

S3 is your actual storage and IAM controls the users and groups that can access your storage and from where (i.e. certain websites can access your storage to display the images).

AWS-Dashboard

Setting up your storage space in Amazon Web Services

To set up the actual storage space where our files and media will live, click on S3 in the dashboard. Once in the S3 area you will be confronted with what is mostly an empty screen. This is because this is a new account and we haven’t done anything with it yet.

What we need to do is create a “bucket”. I think of buckets in a similar way to folders on your computer. Click the large blue button at the top of the screen labelled “Create Bucket”, give it a name (while being mindful of the naming conventions) and set a location. I prefer to always select Ireland but I don’t think it matters as long as you are consistent and remember the location you selected (you will be asked for it for certain things including using S3 with Backupbuddy). Click create and you have your first bucket!

first-bucket

The next step is to create a user that can access your bucket. It is the user credentials that you will need to link your WordPress website to your Amazon S3 storage.

AWS Users

In your AWS account screen select IAM from the services drop down menu. Once there, you should see the blue button at the top labelled “Create User”. Click that and give your new user a name in the pop up window that appears.

create-users

Once you have created your users you will be provided with the opportunity to see your security credentials. These are VERY important. You will need them later so make sure you make a note of both your Access Key ID AND your Secret Access Key.

Next we need to create a group so that we can apply some permissions. Think of this like applying permissions for a database user – it’s very similar, except we apply out permissions to the group rather than individual users. We will then add users to that group so that they inherit those permissions.

AWS Groups

Under Groups, select the “Create New Group”, give your group a name and click continue. On the next screen you will need to set your permission levels by selecting or creating a policy template. We will select “Read Only Access”, on the next screen click continue, and then create group.

Once created, you will see the group listed on the main screen and underneath are some settings for that group. It’s here that you can add your user to the group.

create-group

And that’s all we need to do in the AWS control panel. There is so much more you can do with Amazon Web Services and I urge you to have a play around with some of what is on offer, but for the sake of this tutorial we are done.


Setting up your storage in WordPress

To setup your website to use your newly created Amazon S3 storage, we need to install 2 plugins. The first is Amazon Web Services which allows us to enter our credentials and the other is Amazon S3 and Cloudfront which is what will automatically move newly uploaded media to our storage and replace all the relevant URLs.

Installing and configuring the Amazon Web Services plugin

First, upload and activate the Amazon Web Services plugin. Once activated a new option labelled “AWS” is added to the bottom of the main menu. Go to AWS / Settings to complete the rest of the setup.

This is where you need your Access Key ID and your Secret Access Key. You will also now need to edit your config.php. If you are genuinely uncomfortable editing your config.php file you can save your credentials to the database on this screen but it is not recommended.

Navigate to your config.php file in the root of your WordPress install and add the following two lines to it:

define( 'AWS_ACCESS_KEY_ID', '********************' );
define( 'AWS_SECRET_ACCESS_KEY', '****************************************' );

Replace the stars with your Access Key ID and your Secret Access Key you saved earlier. Save and close the file then upload it to your server if you need to.

Installing and configuring the Amazon S3 and Cloudfront plugin

The final step is to install and configure the Amazon S3 and Cloudfront plugin which will (among other things) automatically copy the media you upload to your S3 storage.

Once uploaded and activated, go back to the AWS menu on the left and you should see a new sub menu item labelled S3 and Cloudfront. Here you will access the last set of settings.

cloudfront-settings

Because we’ve added the credentials for AWS already, when you access this settings screen you will see that the first drop down options is prepopulated with every bucket on your account that the group you set up has access to. Select the bucket you created at the beginning of this article (in my case it was kbtest.bucket). Fill in the rest of the settings dependant on your own preferences.

All done!

This is just one, reasonably basic, way to set up a CDN with WordPress. There are a lot of settings I’ve skipped over to get the initial CDN up and running, many of which would improve performance even more.

If you have any specific tips or tricks that are different to what I’ve outlined, please add them to the comments below as I would love to hear them! 🙂

Advertisements

One thought on “Setting up a Content Delivery Network (CDN) with WordPress (part 1)

Add yours

  1. In this configuration Cloudfront is the CDN and S3 is just being used as a content store but you could also use Cloudfront to pull directly from the origin server without needing to use S3 at all.

    What you don’t want to do it serve the assets directly from S3 as S3 is regionally based i.e. you store an asset in S3 on the West Cost of the US and that’s where you visitors will retrieve it from.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: