Azure CDN and WordPress using W3 Total Cache

Azure storage CDN

This post is a follow-up post to my previous post Optimizing WordPress hosted on Windows.

It’s the holiday season and therefore having some time to spare, I thought I might as well include the part I left out my previous post. Therefore this post focuses solely on including Azure CDN within your WordPress environment using the W3 Total Cache WP plugin.

Azure CDN: Before getting started…

The process of setting up the Azure CDN and including the references within WordPress is as simple as a walk in the park, however the process is somewhat time consuming due to DNS changes and data migration. Not a huge deal, just something to keep in mind.

Setting up the Azure storage components

To keep everything organized, I would recommend creating a new storage container. The name of the storage account and the container will also be part of the URL for accessing the storage service endpoint and CDN.

Examples:

Blob Storage URL: http://[account_name].blob.core.windows.net/[container_name]
CDN URL: http://[id].vo.msecnd.net/[container_name]
CDN URL custom domain: http://[sub_domain].[domain_name]/[container_name]

Step 1 – Creating a new storage account

Open the Azure portal and click the NEW button located all the way down on the right menu. At this point click on Everything and then select Storage, cache + backup. Within the selection pane, select Storage and click the Create button located at the bottom of the page.

Azure-Storage-Setup-1

Azure-Storage-Setup-2

Azure-Storage-Setup-3

Now provide a name (I’m using the name of my blog), a tier, your subscription and location. I would recommend selecting a location close to where your WP site is hosted, all will be populated within the Azure CDN later. If you are hosting your WP site within azure, you could include this storage account within an existing Azure Resources Group. If not, just create a new one. Azure Resources Groups aren’t available within the old Azure Portal.

Step 2 – Creating a new storage container

Open the storage account you’ve just created and click on Containers within the main pane. Click on ADD located within the top of the new configuration pane. Provide a name (i’m using blog) and make sure to select the Access type Blob: Access blobs via anonymous requests.

Azure-Storage-Setup-4

Azure-Storage-Setup-5

Step 3 – Create a new Azure CDN endpoint for your storage account

Note: The CDN endpoint can only be created within the old Azure portal located at manage.windowsazure.com.

Open the old Azure portal, and click on CDN located within the left menu. At this point click on NEW » QUICK CREATE. Select your subscription and specify the storage account created earlier for the ORIGIN DOMAIN. Click the Create button to create the new endpoint.

Azure-CDN-Setup-1

Once the endpoint is created, it appears in a list of endpoints for the subscription. The list view shows the URL to use to access cached content, as well as the origin domain. Make sure to copy the domain which we will need for the creation of a CNAME resource record with your DNS provider that points from [subdomain].yourdomain.com to [your_id].vo.msecnd.net

Azure-CDN-Setup-2

Step 4 – Create the CNAME resource

Sign in to your DNS service provider and open the DNS manager for your domain. I’m using GoDaddy however, the DNS management section will all have similar options. Click Add Record, specify the type CNAME. Provide the host (your CDN subdomain name) and make sure it points to the Azure CDN endpoint.

Azure-CDN-Setup-3

Step 5 – Register a custom domain for an Azure CDN endpoint

Note: Any change you make to your DNS can take some time to resolve. It’s best to wait an hour or so before proceeding.

Open the old Azure portal, and navigate to the CDN created earlier. On the ribbon below, click Manage Domains to display the Manage custom domains dialog box. Now enter your custom domain, including the subdomain, in the dialog box. For example cdn.mydomain.com. Azure will verify that the CNAME record exists for the domain name you have entered. If the CNAME is correct, your custom domain is validated and ready to use with your CDN content.

Azure-CDN-Setup-4

Azure-CDN-Setup-5

Step 6 – Enable and configure W3 Total Cache

Within your WP environment navigate to Plugins » Add New and search for W3 Total Cache. Within the details pane, select Install now to initiate the installation process.

After installing the plugin, a new main menu item will appear named Performance. Click on Performance » CDN. After the page has refreshed navigate to the General section and select the types of files you would like to store within the CDN. I’ve selected all 5 options.

Azure-CDN-WordPress-5
Scroll down to the section named Configuration. Here you will need to provide the information as configured within Azure. The Account name is the name of your storage account, the Account key can be found within the Portal by opening the details of the storage account as shown within the image below.

Azure-CDN-WordPress-6
The Container is just the name of the storage container as created before. Just leave the SSL support setting unaltered and add your CNAME within the first input box at the question; Replace site’s hostname with. After providing all information, make sure to press the Microsoft Azure Storage upload button.

Azure-CDN-WordPress-7

Step 7 – Configure Browser Cache Settings and compression

This is a very important step of the configuration process however, the plugin is only mentioning this at the very bottom of the CDN configuration page. Without configuring the following your CDN won’t lead to any performance gains.

Open the Browser Cache page within the Performance menu. At this page make sure that Enable HTTP (gzip) compression, Set entity tag (eTag), Set expires header, Set W3 Total Cache header and Disable cookies for static files are checked for all media types and save the changes.

NOTE: It turns out that CDN’s are pretty “dumb” and won’t GZIP or set expiration headers by default. The metadata of the stored item needs to include the information allowing the CDN to serve the file with the correct headers.

After configuring the CDN within W3 Total Cache, refresh the WP main page. W3 Total Cache will include leave a message within the notification area indicating stating the following: Settings that affect Browser Cache settings for files hosted by the CDN have been changed. To apply the new settings…

Azure-CDN-WordPress-8

Just note that you can only export one Media Type at the same time.

Step 8 – Testing and Trouble shooting

After you have completed the export as mentioned in step 7, you can access content that is cached at your CDN endpoint using the custom domain. Just navigate to the address of your WP website and drag one of the Images to the address bar. The image URL should point to the Azure CDN.

http://cdn.devslice.net/blog/wp-content/uploads/2014/12/windows-logo.png
http://[custom_CDN_domain]/[container]/[WordPress_content_path]

If this isn’t working, make sure the item is available within your blob storage
http://[account_name].blob.core.windows.net/[container_name]/[WordPress_content_path]

Additional resources:

  • Vivek Jade

    Thank you very much for detailed explanation

  • JP

    Hi Kevin, I hope I don’t annoy you, may I ask why are my resources returning 404 when I enable the cdn – I am missing the part about data migration – is that automatic within Azure or is there an ‘export’ of some sort that I need to do (as you mention in first line step 8)? Thanks

    • Hi there JP,

      Yes, you need to move existing data to azure blob storage. What to export depends
      on the selected options (images, theme files etc.). Fortunately, w3 total cache
      contains a file export module which can be access on the CDN tab.

      In addition to this, I believe that (I have seen it before) total cache displays several
      warning messages stating that context needs to be exported to azure blob storage
      after the CDN configuration has been saved.

      Once the context has been exported to azure blob storage, it will require some time
      before the data can be accessed via the CDN. This depends if the Azure CDN was
      recently created or not.

      • ghz

        Hi Kevin thank you for the tutorial. I have a lot of 404 errors. The problem is that w3 total cache creates random serialized images of one image and those folders I just cant upload to Azure one by one. An example:

        I have an image called compliancefinalprueba1.jpg

        So w3 total cache creates a folder for that image every time we purge all cache:

        http://testblob.blob.core.windows.net/blob/pxb/uploads/cache/images/2016/11/compliancefinalprueba1/278699300.jpg

        I already upload everything the plugin let me to upload and I put the path to the cache but no results. So everytime the sites charges i have all 404 errors of images and some css too :(

        Any ideas of what i must do?

        • Ideally, the upload wizard should only be used after installing w3 total cache or after website design changes. Once exported, w3 total cache should take care of uploading all your new image assets and other files as specified within the configuration.

          Unfortunately, I’m not aware of the internal workings of w3 total cache however, it sounds like a different plugin might be responsible for this. In addition, are you sure that you have configured w3 total to include all folders with changes?

          • ghz

            Thank you Kevin I solved by including the path “{uploads_dir}/cache/*” to the Custom file list. Then i uploaded the custom files and all was beatiful :)

          • ghz

            Kevin :( :( :( . I did the changes and worked fine but was in our backup wordpress. When I tried to use this solution in production I saw that we made a mistake when we migrated our production site to a dedicated server. The problem is that in the previous server the path was home1/… and now the path is home/…. So w3 total cache still works but the CDN is sending a logical error that it cannot find the path (obvious) . I tried even to change the rewrite rules of w3 total cache in the .httaccess file but the plugin doesnt allow me to make this changes to point to the actual path. Any suggestions? Thank you very much

  • Pingback: Migration von Blogger auf Azure Wordpress - SharePoint und Office 365 Blog by Dennis Hobmaier()

Post Navigation