How To Use Amazon S3 And Cloudfront With WordPress

In discussions of speeding up your website, you may have heard the term cloud computing. At its most basic level, cloud storage simply refers to uploading your site’s files, such as images, stylesheets, and other assets, to a remote server. A content delivery network, or CDN, connects to cloud storage and serves files to users across a wide network of fast servers all over the globe, to ensure the quickest download times and connection. In the cloud computing world, it is going to be hard to find a solution better than AWS (Amazon Web Services), specifically their S3 and Cloudfront services. With a quick set up, and the help of a few plugins, it’s possible to use these services to speed up your site and backup all of your files regularly, at a very low cost. But first, a quick rundown of AWS.

How AWS Works

Amazon has a whole suite of cloud services under its AWS umbrella, for long term and short term data storage, full server stacks, and content distribution. It is even possible to run a WordPress site using only AWS, though this requires some advanced knowledge of server infrastructure.

The best way to get started with AWS is to enhance and speed up your WordPress site by using two of Amazon’s web services, S3 and Cloudfront. S3 is a service which allows you to upload files to a remote server that Amazon runs, and then serve them up to users across a distributed network, making download speeds of larger files (like media files) a lot quicker. Cloudfront is an optional extension of S3, and is a fully fledged CDN (Content Distribution Network). A CDN takes your sites static assets, and caches them on servers around the world. When a user downloads that asset from your site, it is pulled from the server that is geographically the closest, and assets are downloaded as quickly as possible.

Standard storage on S3

Pricing for both S3 and Cloudfront is based entirely on use, and costs are kept fairly low. For a medium sized blog with a good amount of traffic, you might spend $2 – $5 / month for both services. However, this will vary based on how many assets your site has, and what kind of traffic it receives. You can use the AWS calculator to estimate your costs. The service itself works by exposing the servers you purchase to an easy to use API, which you can use to programmatically upload and access files. So if you’d like to use S3 and Cloudfront with WordPress, the first step is to set up that API.

Setting Up AWS

The first thing to do is actually create an AWS account. You can do so by visiting the signup page and using your Amazon credentials. You will be automatically signed up for all available services, though you only pay for what you use.

We want to start by creating an S3 bucket where we will store files from our WordPress site. Click on the S3 button in the main Amazon dashboard. This will bring you to the blank S3 console, with an option to “Create a Bucket”. Click this to create your cloud storage space.

Creating a new bucket

You will need to give it a name, using alphanumeric characters and no spaces, that is unique across all users of S3. That means if any other user has already chosen a bucket name, it is off limits for all users. When choosing a name, try and pick something unique to your site, like your domain name.

For now, we are just going to leave our bucket empty and move on to Cloudfront. Cloudfront is not required for some of the solutions we will discuss below, but it can speed things up quite a bit for your users. It will also cost a bit more each month.

To set up Cloundfront, return to the main AWS dashboard and click on the Cloudfront service link. On the next screen, click the “Create Distribution” button. From the next screen, select “Get Started” under the Web option. The next step will ask for an Origin Domain where it should serve files from. Here, you can select the S3 bucket you just created to sync the services up. There are lots of other options here, but most can be left at their default or blank. Finally, click “Create Distribution” to actually start the service.

With everything set up, the last thing you need to do is get access to your API keys. These will allow WordPress services to connect with your AWS cloud without needing to authenticate every time they do. To get your API keys, you will need to create an IAM user that has access to your AWS account. First, go to the IAM console and click on the “Groups” tab.

Make sure to set permissions to Administrator

You will need to create a new group and user to grant access to. Click “Create New Group”, give your group a name, and then select “Administrator Access” in Policy Template step, and create your group. Next, click on the “Users” tab and click “Create New User”. Once again, give your user a name, and make sure the “Generate an access key for each user” box is selected. Once you’ve created the users, you will be provided an access key and secret access key. Make sure to store these somewhere, or click “Download Credentials” to download them to your computer. The last step is to connect your user with your Group by click on the user that you just created and selecting the “Add User to Groups” option, and selecting the group you created in the first step. This will ensure that the access keys associated with this user have access to your account.

What You Can Do With AWS

Once you’ve set up your Amazon account, S3 bucket, and Cloudfront distribution, you can begin to connect your WordPress site with the cloud. The most common use case for this is to automatically upload media files to S3 and serve them to users using Cloudfront. However, you can also use AWS to make routine backups of your site, store digital downloads, or stream videos. We will go over a few plugins that can help you do all of this.

W3 Total Cache and AWS

W3 Total Cache is a popular caching and performance plugin for WordPress. It can do a lot for your site automatically, such as minifying and combining stylesheets and scripts, caching static versions of your pages, and speeding up loading time across your entire site. It is in use by a lot of sites, and there is a chance that you already using it.

W3 Total Cache also gives you the ability to connect your site to S3 and Cloudfront. After you have installed and activated the plugin, you can enable AWS support by checking the CDN option in the plugins General Settings and selecting “Amazon Cloudfront” underneath the Origin drop-down. Once you have saved these settings you can access W3 Total Cache -> CDN and enter in the Access Key and Secret Access Key for your account in the “Configuration” section. This will automatically pull in the bucket you created, which you can select next to “Origin”.

Configuring W3 with Amazon S3

In the General Settings, you can chose which files you would like to store on AWS. You can actually store your entire site, including theme files and WordPress core files, so that virtually nothing exists on your actual host. I’d recommend simply checking off “Host attachments,” “Host theme files,” and “Host custom files”. With its default settings, this will include all media files you uploaded, images, stylesheets and script files from your theme, and any static assets added elsewhere. For each category, you can specify exactly what file extensions to upload to S3, to limit it to just the assets you want.

The last step is to upload your existing files to S3. Fortunately, the plugin features a built in way to do this, and with the click of a button you can perform the export automatically. After you’ve uploaded your existing files, your site will be all set up to use a CDN, and all future files added will be uploaded straight to the cloud and served to users from Cloudfront.

Amazon S3 and Cloudfront Plugin

If you are not looking for a full-featured caching plugin, and would simply like to offload static assets to AWS, you can use the Amazon S3 and Cloudfront plugin, which should be downloaded on top of the Amazon Web Services plugin. The latter will connect your WordPress site to AWS, and the former will store your media files in the cloud. The plugin is limited to just media files from the media library, but these are the heaviest files on your site, and therefore most suited for a CDN.

To set the plugin up, you will need your Access Key and Secret Access Key to your site’s wp-config.php file. Open up wp-config.php for your site, and add in these two lines:

define( 'AWS_ACCESS_KEY_ID', '*****************<strong><em>' );
define( 'AWS_SECRET_ACCESS_KEY', '</em></strong>*************************************' );

Make sure to replace the stars with your created user’s access key and secret access key.

Once you’ve added these keys and saved your settings, you can customize the plugins functionality in AWS -> S3 and Cloudfront. On this screen, you can customize which S3 bucket you want to use for your media files, and optionally add support for Cloudfront distribution. The plugin will work just fine without this, but it will speed things up considerably for you if you chose to use it.

Basic Settings for the plugin

There are also a few more settings for the plugin, such as whether or not to store files locally and in the cloud, and whether or not to serve files over SSL. You will need to check off these boxes in order for the plugin to begin working with the cloud. Once everything is set up, future files will be uploaded and served to users according to your settings. At the moment, the plugin does not support uploading existing files to AWS. The plugin keeps things fairly simple, makes set-up easy and does most of the work for you behind the scenes.

Backup Plugins

Of course, uploading static assets to the cloud is not the only thing that S3 can be used for. There are also several plugins that allow you to perform automatic backups of your site and store them on your cloud server, to keep the costs of hosting them down.

There are several plugins out there that include this functionality, but the most popular reliable are BackupBuddy, a premium plugin, and Updraft Plus, a freemium option. Both have an option to host backups on S3, in addition to other third party services like Dropbox and Google Drive, and both perform backups automatically according to a schedule you set. Simply by entering in the Access Key and Secret Access Key of your AWS account, you can get up and running with the plugins.

The main difference is that BackupBuddy tends to offer a lot more features to site owners looking to ensure that backups are easy to store and easier to recover. This also includes round the clock support which can be helpful in a crisis. Updraft Plus uses a similar method for backups, but it keeps things simple in its free version, and is sometimes easier to get started with.

In both cases, using S3 as your backups location is a safe and low-cost solution to a common problem. And since backups happen on the backend, there is no need for Cloudfront, making things even cheaper.

Using S3 To Boost Performance

In the WorPress world, there are Plenty of other ways to make use of S3, depending on the needs of your site. For instance, an S3 extension for Easy Digital Downloads makes it easy to host files that are available for purchase on your site.

Use S3 to stream videos

Or, if you are running a site with a lot of video, you can use S3 Media Maestro to store and stream your videos straight from the cloud. If you would prefer not to rely on a third party service like YouTube to host your videos, or need to ensure that only certain users can view your videos, then this can be an attractive option.

The bottom line is that a combination of S3 and Cloudfront can give your site a great performance boost, while also cutting the cost of hosting down. It is not a full-featured hosting solution, which is why it shouldn’t be used to host your entire site. But by using a few plugins, you can connect your WordPress site up to AWS with ease, and not have to worry about the backend mechanics. If you’re looking for a quick win in terms of speed, there really is no better alternative.

Thumbnail image by Dacian G / shutterstock.com