Blog

Using Amazon Cloudfront CDN with W3 Total Cache WordPress Plugin

Posted by Rahul Bansal on in

{11 Comments}

W3 Total Cache is my favorite plugin when it comes to configuring CDN with WordPress. I already posted how to configure MaxCDN with W3 Total Cache almost 2-years back.

Today I will show you how to configure Amazon Cloudfront CDN using W3 Total Cache as a “generic” origin-pull mirror.

This is 2-step process:

  1. Creating Amazon Cloudfront Distribution to be used as CDN for WordPress
  2. Configuring W3 Total Cache to use Amazon Cloudfront Distribution
In between above 2-steps, you can add an extra step to create “white-labelled” CNAME records in case you like to use something like cdn.example.com instead a random subdomain from cloudfront like d3otazh35pn6.cloudfront.net

Creating Amazon Cloudfront Distribution to be used as CDN for WordPress

Login to your amazon aws console: https://console.aws.amazon.com/cloudfront/home and click on “Create Distribution” button.

It will start a 2-step process. In Step-1, use delivery method “Download” which is set by default and click “Continue”.

In Step-2, You will be asked different settings for this new Cloudfront distribution.

Under “Origin Settings”, set…

  1. Origin Domain Name: example.com
  2. Origin ID: example.com
where example.com is your domain name on which you are running WordPress.

Under “Distribution Settings”…

You can add your one or more CNAMEs to Alternate Domain Names(CNAMEs) setting.

This is optional but if you choose to use custom CNAME record(s), do not forget to configure them on your domain registrar’s end. Instructions for CNAME records are NOT covered in this article.

CloudFront Distribution List

Once you complete setup, this newly created distribution will appear in CloudFront Distribution list.

You can see Domain Name value here only which we will need to provide to W3 Total Cache going ahead. This is the value you will also need in case you want to setup your own CNAME records.

You can see more details and complete domain name value by clicking on info icon.

Configuring W3 Total Cache to use Amazon Cloudfront Distribution

W3 Total Cache provides many options to configure a CDN for your website. For Amazon Cloudfront also, they provide 2 different ways. But we will use “Generic Mirror” option as we have configured CloudFront manually in above steps. You are free to configure Amazon using other ways as well.

Go to W3 Total Cache’s General Settings. Scroll down to CDN section (not submenu)

Select “Generic Mirror” option and click “Save all settings” button.

Then go to W3 Total Cache’s CDN Submenu. Scroll down to Configuration section.

In “Replace site’s hostname with:” field, paste value of your CloudFront Distribution Domain Name. You can also paste value of CNAME if you have configured one already.

Next, click “Test Mirror” button. If you get positive response, click “Save all settings” button to save changes.

Finally, clear your page cache. W3 Total Cache will remind you about this. But this time you shouldn’t ignore it!

If you stuck/need help, feel free to use comment form below! ;-)

Related: Using MaxCDN with W3 Total Cache

11 Comments…

 Share your views
  1. rajan anuraj November 20, 2012 at 9:57 pm

    getting this error:

    NoSuchKey
    The specified key does not exist.

    wp-content/uploads/avatars/6831/499807178ba1678eee7d80768cd2dd3a-bpfull.jpg

    FEB78DAAF4507115

    irMPwIoWJpJ9GXbkT6uVMhlb6CxnfMPuVSll2XbZRA9DWqw7i60C3DB1tDd7+0QH

    can you throw some light on this… your help is highly appreciated….

    Reply →
    • Rahul Bansal November 21, 2012 at 1:06 pm
      Avatar of Rahul Bansal

      @Rajan

      Can u share your website and CDN URL?
      Is your website public? Do you have any /etc/hosts entry?
      Also, are you getting error for one file or every file?

      Looks like CDN is not pointing to correct origin (website-domain)…

      Reply →
  2. tom November 25, 2012 at 8:09 pm

    Thanks very much for this. I just moved all my sites from Maxcdn to Cloudfront today.

    Reply →
  3. Josiah December 24, 2012 at 8:16 pm

    It seems that W3TC is replacing the entire image path, not just the host name. Any ideas?

    Reply →
  4. Avi February 5, 2013 at 7:23 am

    Works.

    Thanks for the info.

    Reply →
  5. Josue February 22, 2013 at 11:46 pm

    why you chossed a Origin Pull over Origin Pull?

    I wanna know which one is best and why.

    Thanks

    Reply →
    • Rahul Bansal February 28, 2013 at 6:12 pm
      Avatar of Rahul Bansal

      I think you wanted to ask – why choose Origin Pull over Origin Push?

      My answer to this is – ease of setup. On origin pull, you don’t need to “upload” anything.

      Also, Origin Push is generally expensive in terms of pricing.

      Reply →
  6. seb May 16, 2013 at 5:37 pm

    yo

    when all this is done, how do I sync files with cloudfront? I’ve tested the connection with cloudfront and it says it’s ok but now, i wonder what to do for my filest to be sync with the cdn ??

    thanks

    Seb

    Reply →

Leave a Comment

Connect with:

Your email address will not be published.

*