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).
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!
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.
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.
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.
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.
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.
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.
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! 🙂