Integration Guide for WordPress Amazon S3 and CDN

In this tutorial, we are going to walk you through how to complete a WordPress Amazon S3 integration as well as optionally using a content delivery network (CDN) alongside it. This can dramatically save you on bandwidth costs, act as a backup, and help speed up your site.

Amazon S3 is a storage solution, and part of Amazon Web Services’ many products. Typically this is used for sites that either need additional backups with a solution like our external backups add-on, or are serving up large files (downloads, software, videos, games, audio files, PDFs, etc.).

Amazon has a proven track record of being very reliable, and because of their massive infrastructure, they are able to offer very low storage costs. Some of S3’s customers include Netflix, Airbnb, SmugMug, Nasdaq, etc.

Due to the fact that Amazon S3 deals entirely with bulk storage, you can almost guarantee that pricing will be cheaper than your WordPress host. Offloading media to AWS can be a great way to save money and is free for your first year (up to 5 GB storage). Also, because the requests for your media is served directly from Amazon, this puts less load on your WordPress site, meaning faster load times.

Amazon S3 is not to be confused with Amazon CloudFront. CloudFront is a CDN solution, whereas S3 is a storage solution. However, they can both be used interchangeably as we’ll get into more below.

WordPress Amazon S3 Setup

For this integration, we recommend using the WP Offload S3 Lite plugin, developed by the awesome team over at Delicious Brains. The basic version is free. The plugin copies files from your WordPress site to Amazon S3 automatically as they are uploaded to the media library. There is then an optional configuration for adding a CDN, such as Amazon CloudFront, KeyCDN, or MaxCDN.

This plugin is pretty lightweight, only 204 KB to be exact. As of writing this, it currently has over 30,000 active installs with a 4 out of 5-star rating. Follow the steps below.

Step 1

Next, install the free WP Offload S3 Lite plugin. You can download it from the WordPress repository or by searching for “wp offload s3” within your WordPress dashboard under “Add New” plugins. Click on “Install Now” and activate it.

Step 2

You can follow the WordPress Amazon S3 documentation from Delicious Brains or we will walk you through the rest in more depth.  Log in to your Amazon Web Services account. If you don’t have one you can sign up for free. You will then need to create a new user. Choose a username and make sure you select “Programmatic access.”

Step 3

Now you need to setup permissions for the user to manage files in S3, so select “Attach existing policies directly” and click on “Create policy.” This will open in a new window. Once you are done you will need to come back to this.

Step 4

Click “Select” next to the create your own policy option.

Step 5

Next you will need to give your policy a name and description. This can be whatever you want. Then copy the following code into the “Policy Document” section.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:CreateBucket",
        "s3:DeleteObject",
        "s3:Put*",
        "s3:Get*",
        "s3:List*"
      ],
      "Resource": [
        "arn:aws:s3:::*"
      ]
    }
  ]
}

This policy allows the user to create buckets, delete files only (not buckets), upload files, download files, and list files and buckets. This is the basic level of permissions the plugins require to function.

However, we recommend checking out Delicious Brain’s documentation on additional bucket restrictions. For example, modifying the resource section above and adding your bucket name to lock it down (perftesting is the name of our buck down in Step 11).

"Resource": [
 "arn:aws:s3:::perftesting/*",
]

Then click on “Create Policy.”

Step 6

Returning to the window from Step 4, you now need to add the policy to the user you are creating. Click on “Refresh” and you should see your new policy you just created at the top. Select that and click on “Next.”

Step 7

Then click on “Create user.”

Step 8

On the last screen you will need to copy down your access key ID and secret access key to a safe place as you will need this for back in your WordPress dashboard.

Step 9

Then back in WordPress click into “Access Keys” under AWS and input your credentials that you just created. Or, as Delicious Brains recommends, it is better to define them in your wp-config.php file. Simply copy the following snippet and replace the stars with the keys.

define( 'DBI_AWS_ACCESS_KEY_ID', '********************' );
define( 'DBI_AWS_SECRET_ACCESS_KEY', '****************************************' );

Step 10

You must then create a bucket to use. If you are not signed up yet with Amazon S3, you can signup here. They have a free trial you can get started with. Click into “S3 and CloudFront” under the AWS plugin settings and click “Create bucket.” You can then choose a region. Click on “Create New Bucket.” Remember that storage costs vary per region. See prices.

Step 11

To get WP Offload S3 to work with certain 3rd party plugins such as WooCommerce, you might need to install and activate some of their compatibility addons. And this sometimes requires paying for their premium license. However, there are a lot of times you can get by with the free version as well. By default, the following options as seen below are checked. if you are running over HTTPS you will want to enable that.

Your WordPress Amazon S3 setup is now complete! Your images will now be copied to Amazon S3 storage when they are uploaded to your WordPress media library. You can also do the same technique with your assets (CSS, JS, fonts, etc), but it requires the premium license to get the assets pull addon.

Note: Uploaded files manually via SFTP will not get copied to Amazon S3. WP Offload Media only offloads items that are first uploaded to your WordPress media library.

Another important setting above is the option to remove the files from the local server once they have been offloaded to S3. This can help drastically reduce the disk space need with your WordPress host. Just make sure to check compatibility with other plugins if you enable this. You can also check out this tutorial on uploading files to Amazon S3 from the browser.

WordPress Amazon S3 and a CDN

If you are using a CDN to speed up delivery of your assets, you can enable this under the CloudFront or Custom Domain section. Check out these following tutorials to get you up and going.

Once you have it setup and your CDN URL, you can input it into the custom domain field as seen below.

Make sure to also check out our guide on how to offload media to Google Cloud Storage.