WordPress CloudFront CDN Using W3 Total Cache

 

It’s amazing how many posts there are on setting up a WordPress CloudFront CDN with W3 Total Cache.

The problem is, every post you read has a different spin, and trying to make sense of it is enough to drive one crazy. To make matters worse, a number of these posts have it plain wrong. In other cases, these posts only give you partial information.

I’ve spent a recent weekend setting up a WordPress CloudFront CDN using W3 Total Cache for this site. Actually getting CloudFront to work with W3 Total Cache was the easy part. The majority of the weekend was spent tweaking performance issues that really had nothing to do with CloudFront itself.

With all the misinformation I’ve been reading, I thought the best thing to do was write a quick post. Given that, here’s my tutorial on setting up a WordPress CloudFront CDN using W3 Total Cache.

But wait, there’s more…

If you’re more of a visual person, be sure to check out a video tutorial on creating a WordPress CloudFront CDN using W3 Total Cache. It follows the information in this post.

Follow the link to view my WordPress with Amazon CloudFront and W3 Total Cache video directly on YouTube.

WordPress CloudFront CDN Setup

First things first, what the hell is a CDN? While I’m not going to go into this in great detail, a CDN is nothing more than a Content Delivery Network.

Think of it this way, if your WordPress site has a lot of images and static files (which it does), it takes a great deal of time serving up this content to every user across the globe. This is especially true if you are on a shared hosting service, which consists of a single server residing say somewhere in California.

What if you had a network of servers, spread across the globe, and each of these servers had your content on it. That way, someone in London could access your server in the UK, without having to traverse their way to California.

This is exactly what using CloudFront with WordPress can do for you. They have servers all over the world, and the content from your Web Host (the Origin Server) is distributed to all these other servers.

Now all you have to do is tell your site hosted on the WordPress platform to use Amazon CloudFront. Luckily the W3 Total Cache plugin, and chances are you are already using this, has the functionality to distribute your content to the CloudFront servers.

Do You Need Both Amazon S3 and CloudFront?

The first bit of confusion I had was whether or not I needed to us S3.

Amazon S3 is Simple Storage in the Cloud. Think of it like DropBox or Google Drive.

In order for CloudFront to work, it needs to know what files your site has. Amazon CloudFront will take those files and distribute them across their network. It needs an Origin Server, the server where all your files exist. You have two options to set up an Origin Server:

  1. Creating an Amazon S3 Storage Bucket
  2. Leveraging your existing Web Server

I was hell bent on setting my CDN to use Amazon S3 as the Origin Server. Why? I don’t know, I thought it would be cool seeing all my files in the Amazon AWS Management Console.

You don’t need to. The easiest solution is letting Amazon CloudFront use your existing Web Server as the Origin Server. That way you don’t need to push your files to S3, and worry about keeping they in synch.

You do however need to set up an S3 Bucket for things to work properly. Why? Well I’m not really sure, since the bucket you set up never seems to get populated. But I have tried to set up CloudFront without having an S3 Bucket, and things just don’t work.

Let’s get into the specifics of setting up a WordPress CloudFront CDN using W3 Total Cache.

Setting Up WordPress With CloudFront and W3 Total Cache

Most of the bad information I’ve seen has to do with the CDN settings in W3 Total Cache. Setting up Amazon CloudFront is pretty easy. Getting your WordPress site to act as the Origin Server is the tricky part.

This post on setting up WordPress CloudFront CDN using W3 Total Cache is broken into 2 sections.

  1. Setting up the WordPress CloudFront CDN using the AWS Management Console
  2. Leveraging the WordPress CloudFront Distribution using W3 Total Cache

Creating An S3 Bucket

Before we starting setting up Users and CloudFront, let’s get our S3 Bucket set up.

Step 1: Access Amazon’s AWS Management Console

Log into the AWS Management Console and click on S3.

wordpress cloudfront cdn setup

Step 2: Create A New Bucket

A bucket is nothing more than a storage mechanism. The thing to keep in mind that your bucket name needs to be unique. And when I say unique, I’m talking across the whole of Amazon. So in order for things to work, you’ll want to name your bucket after your website. In my case, it’s called:

www.craigerson.com

  1. From the current screen, click on Create Bucket
  2. Name your bucket (your website domain name)
  3. Under Region select US Standard
  4. Click the Create Button

You’re S3 Bucket is now created.

Amazon CloudFront With WordPress

Once we have our S3 Bucket created, our next step is to set up a User Group and User. W3 Total Cache will take care of everything else.

Step 1: Access Amazon’s AWS Management Console

If you’re still on the S3 screen, click on the Orange Box in the upper left hand corner. That will take you back to the main menu.

Click on Identity & Access Management.

cloudfront wordpress cdn setup

Step 2: Set Up A New User Group

The Identify & Access Management console gives you a lot of flexibility if you have a small or larger business. You can create multiple groups and each group can have multiple users associated with it.

Think of it this way. Every person in your company could have a user id associated with Amazon’s AWS Management Console. Depending on who this person is, they may have different rights in what they can perform within Amazon (Groups). This is the flexibility that Identify & Access Management gives you.

For a simple blog, we’ll have one group with one user defined in that group. First thing is to set up a new User Group

From the Identity & Access Management console, create a New Group.

  1. Select Groups in the left sidebar.
  2. Select Create New Group Button at the top of the page
  3. Give your Group a name (it can be anything)
  4. Click Next Step Button at the bottom of the screen
  5. Apply the Administrator Access Policy, and click Next Step
  6. Finally click on the Create Group Button

amazon cloudfront wordpress

iam management console group rights

Step 3: Set Up A New User

Now that we have a User Group, we need to create an individual User ID that we can assign to that group.

Again, from the Identity & Access Management console, we now need to set up a New User.

  1. Select User in the left sidebar.
  2. Select Create New User Button at the top of the page
  3. Enter a User Name (it can be anything), and be sure “Programmatic Access” is ticked
  4. Click the Next Permissions button at the bottom of the screen
  5. From the next page, click on the Add User To Group box.
  6. Tick the box for the group you want to give the user access to and click the Next Button at the bottom of the screen
  7. Verify the User and Permissions you just set up, and click Create User
  8. The new User was just set up, but there is one more very important step. Be sure to press the Download .CSV button to download your new security credentials. Store this file, as this will be your only opportunity to view or save those credentials.

iam management console user

aws management console add user

aws management console user permissions

aws management console verify permissions

aws management console download credentials

Believe it or not, this is all you have to do in the AWS Management Console to set up WordPress with Amazon CloudFront and W3 Total Cache.

Although CloudFront isn’t quite created yet, we’ll do that in the W3 Total Cache Plugin.

Setting up your WordPress CloudFront CDN with W3 Total Cache

Now comes the fun part. Setting up the WordPress CloudFront distribution using W3 Total Cache

This post is not going to get into all the various settings of W3 Total Cache, there are plenty of other posts that will walk you though that. The focus will be on the CDN settings of W3 Total Cache.

Overview Of CDN Settings

This is where I’ve seen a lot of misinformation. A number of posts will have you set up your CDN configuration as a Generic Mirror. While that option will work, it actually creates additional effort for you in your setup. We want to keep this easy. Let W3 Total Cache handle the heavy lifting for us.

Another area that causes a lot of confusion is Origin Pull vs. Origin Push.

Origin Pull

CloudFront handles the pulling of information from your Origin Server as needed. Remember, that’s your Web Server. There’s no need to upload files. Simply create your post, add images, and publish.

That’s it. Next time a CloudFront distributed server needs to access your post or images, it will get them directly from your Web Server (the Origin Server).

Origin Push

The other option is for you to upload your files manually. So every time you create a new post with images, you have to manually send that information to the Cloud. While W3 Total Cache gives you the functionality to do this, it’s an extra step that’s not required.

Again, we want to keep this simple! The focus of this tutorial is setting up WordPress, CloudFront and W3 Total Cache using Origin Pull.

Step 1: Turn On CDN Functionality

From the W3 Total Cache Performance Menu of your WordPress dashboard, click on General Settings. Scroll down to the middle of the page for the CDN settings.

  1. Tick the box to enable CDN
  2. In the CDN Type Dropdown, you’ll want to select Amazon CloudFront under Origin Pull/Mirror
  3. Click the Save All Settings Button

w3 total cache general settings cdn

Once you hit Save Settings, you’ll receive an error that states:

“A configuration issue prevents CDN from working: The access key, secret key, and replace default hostname with fields cannot be empty”

You can ignore that for now, we’ll fix that in the next step.

Step 2: Configure CDN Settings: General Section

Back to the W3 Total Cache Performance Menu, and select CDN.

In the General Settings section, be sure you have ticks next to all of the following:

w3 total cache cdn settings general

Step 3: Configure CDN Settings: Configuration Section

Remember that file we downloaded when we created the User Name in the Identify & Access Management Console within Amazon? You’ll need that here.

  1. Copy the access key from that file and paste it in the Access Key ID field
  2. Copy the secret key from that file and past it in the Secret Key field
  3. The Origin Field will have defaulted to the URL of your site, which is exactly what we want. This is going to become the name of your Distribution in CloudFront
  4. Press the Create Distribution button next to that name

w3 total cache cdn settings configuration

You just created your WordPress CloudFront distribution. Don’t believe me?

Go back to the AWS Management Console, and click on the CloudFront option.

aws management console cloudfront

You’ll see your new WordPress CloudFront distribution being created.

You’ll notice that it’s processing, so it’s not quite ready yet, it’s going to take a few minutes for CloudFront to scan you site and start pulling everything in. If you have a very large site, it could take a little longer. Don’t freak out if it doesn’t finish right away. It took about 10 minutes to scan this site.

aws distributions management Console

We’re not quite done yet, so let’s continue with our setup while CloudFront is scanning our site and building our distribution.

A Little About Host Name’s

Before we get into the next step, let’s talk a little about host name’s.

In the configuration section, you’ll see a field called “replace sites hostname with”. You should notice that the text box in front of cloudfront.net has been populated with some random characters.

That is the new URL of the distribution that’s being created. This is where your content will be accessed that gives you the benefit of a CDN. In most cases the name here doesn’t really matter. And it’s perfectly fine if you leave it as is.

The only time this name comes into play, is if someone clicks on an image in your post, and it opens in a new tab in your browser. If the user notices the web address, it will look something like this:

xdnbt72rcd.cloudfront.net/images/name.jpg instead of www.craigerson.com/images/name.jpg

Not a very user friendly name is it? I guess it could even cause some confusion to a visitor on your site. We can fix that with a few extra steps.

Step 3: Create A New CNAME

Remember this step is optional…

The first thing to do is visit your hosting providers CPANEL. Every hosting provider is a little different, so it’s difficult to give detailed instructions in this step, not knowing who your site is hosted with. A quick Google Search with something along the lines of the following should help:

“how do I create a CNAME in GoDaddy”

You’ll need to make a DNS change, so you’ll want to look for something called Domain Manager. Once you’ve located that, you want to find the option to create a new CNAME. This is nothing more than an alternate name (or alias) to a specific URL.

In this step we’ll want to create an alternate name to the URL that’s found in the hostname field of the configuration options. This is the name that looks like a bunch of random characters followed by cloudfront.net. You can call this alternate name anything you want, just make it something a little more user friendly.

In my case, I called mine cdn.craigerson.com.

Step 4: Configure CDN Settings: Configuring The Hostname

Once you’ve created that CNAME with your hosting provider, let’s go back to W3 Total Cache and continue with our setup.

We are still in the W3 Total Cache Performance Menu, and in the CDN options under Configuration.

Take the new CNAME that you created and plug it into the field directly below the hostname in the W3 Total Cache labeled 1.

w3 total cache cdn settings host name

Step 5: Configure CDN Settings: Test The WordPress CloudFront Distribution

Hopefully by now your distribution is all synched up in Amazon. Even if it’s not, we can still test things to make sure we’ve got everything configured properly.

Click the Test CloudFront Distribution button at the bottom of the configuration section of W3 Total Cache. If you see a message in green, congratulations, you’re almost there.

Step 6: Adding The CNAME To CloudFront

One last step, and that’s to let your new CloudFront distribution know about your CNAME.

Let’s head back to the AWS Management Console. From the main menu, you’ll want to select CloudFront if you’re not already there.

Note: Be sure to wait until your CloudFront Distribution is in a Deployed Status with an Enabled State before proceeding with this step.

  1. Place a tick next to your distribution
  2. Click on Distribution Settings at the top of the page
  3. Click on the Edit Button found just underneath the General Tab
  4. In the box that’s labeled “Alternate Domain Names (CNAMEs)”, add your new CNAME
  5. Scroll down to the bottom of the screen, and press the Yes, Edit button.

distributions management console settings

cloudfront management console cname settings

Testing The WordPress CloudFront Distribution with your Site

You’re done. You just set up WordPress CloudFront distribution with W3 Total Cache!

Go ahead and open a page on your site in your favorite browser. Hopefully, everything looks the same as it always did. Now refresh that page, and you should notice it’s just loaded a lot faster than normal.

Find an image in the post you just opened. Now click on that image so it opens in a new tab in your browser. Check out the URL that just opened. You should see one of two things:

  1. Either the new CNAME you added or the default host name that shows in the W3 Total Cache settings. If you see this, your CDN is working
  2. Your site’s URL. If you see www.yoursitename.com/image/… something’s not working. Go back through this post and see what you may have missed.

wordpress with amazon cloudfront and w3 total cache

WordPress CloudFront and W3 Total Cache Video

If you’re like me, and prefer visuals, I’ve created a video to help explain things even further. The video follows the steps outlined in this post, and will show you how easy it is setting up a WordPress CloudFront CDN using W3 Total Cache.

Scroll back to the top of this post to view the video on Setting up WordPress CloudFront CDN using W3 Total Cache.

 

Comments

  1. thank you so much , please provide the video for Configure CDN Settings: Configuring The Hostname and Adding The CNAME To CloudFront..
    love you so much….

  2. As soon as I setup this blog on CloudFront using S3 as the origin server, my friends immediately started telling me I was at risk of the duplicate content penalty Google imposes on sites that have nearly identical content. how to avoid it
    pls clarify

    • When using a CDN such as CloudFront, you should be setting it up so it only serves the static files from the CDN (images, javascript, and CSS). The dynamic content, your actual posts are still being served up from your Origin Server from your hosting provider. If you are using W3 Total Cache, the settings will take care of this for you.

      One other thing you can do is check the Add Canonical Header option in W3 Total Cache / CDN Settings, and this will add your site URL as the header to the attachment files in the CDN. This will tell the search engines the preferred URL, thereby preventing the duplicate content issue.

Speak Your Mind

*