Configuring a

Microsoft Azure CDN

Get Your Content Closer
Introduction
Hosting Web Sites in Microsoft Azure is something which seems to get better with age just like a fine
wine. This is because Microsoft is aggressively charging to add new features to Microsoft Azure all of
the time and Web Sites seems to be one area which gets a lot of love.

With the modern web, people can be trying to access your site at any time of day from any corner of
the earth. Whilst the performance of the Microsoft Azure Web Sites service is very good, why not
make it better?

In this short guide, I will run through the process of deploying Microsoft Azure CDN allowing you to
get your content closer to your users making it faster to serve and putting less load on your web site
or storage.

This guide as are all my publications, dedicated to my wife Nicky and my three daughters; Madison,
Jessica and Layla who are subjected to living with me and technology and not always in that order.

Authors
Richard J Green works as a Senior Technical Consultant for Infront Consulting, specializing in
delivering System Center solutions helping customers leverage their investment in IT through
Microsoft management technologies. Richard works extensively with Windows Azure.

He has an unhealthy obsession with the colour pink hence the colour choice of this guide.

You can follow Richard on Twitter @richardjgreen or read his blog at focusing on Microsoft products
and technologies along with other digital ramblings at http://richardjgreen.net.

This guide was kindly reviewed by Paul Keely, Principal Consultant for Infront Consulting who is a five
time awarded MVP in the field of System Center Cloud and Datacenter Management.

Copyright
This book is copyright of Richard J Green and co-authors. No unauthorised copying of material in this
book shall be performed without the prior written consent of Richard Green or one of the co-
authors.

2014
Contents
Introduction ...................................................................................................................................... 2
Authors ............................................................................................................................................. 2
Copyright .......................................................................................................................................... 2
Introduction to Azure CDN ................................................................................................................ 4
What is a CDN? .............................................................................................................................. 4
What is Azure CDN?....................................................................................................................... 5
What Can Azure CDN Cache? ......................................................................................................... 5
Prerequisites for Configuration .......................................................................................................... 6
Example Deployment Architecture .................................................................................................... 7
Adding the Public Cache-Control HTTP Header .................................................................................. 8
Programmatically Set the Cache-Control Header ........................................................................... 8
Manually Set the Cache-Control Header ........................................................................................ 8
Verifying the Public Cache-Control Header ...................................................................................... 10
Create an Azure CDN Endpoint ........................................................................................................ 11
CDN Endpoint Fill Delay ................................................................................................................... 14
Enabling HTTPS for the CDN Endpoint (Optional) ............................................................................. 15
Set a Custom Domain Name for the CDN Endpoint (Optional) ......................................................... 16
Verifying the CDN Endpoint Fill ........................................................................................................ 18
Utilizing the CDN Endpoint (IIS URL Rewrite).................................................................................... 19
Utilizing the CDN Endpoint (Alternate)............................................................................................. 20
jQuery URL Rewrite ..................................................................................................................... 20
WordPress Plugins ....................................................................................................................... 20
Configuring a Microsoft Azure CDN

Introduction to Azure CDN

In this opening chapter, Im going to lay out what a CDN is, what it can do for you and why you may
or may not want to use one.

What is a CDN?
A CDN is a Content Delivery Network. CDNs are in use on nearly all major websites today but that
doesnt mean your website cant make avail of it just because you may not be big.

Take Microsoft as an example website. Microsoft are a US based company but they have a global
presence. Their software is used around the world which means that people from anywhere in the
world may try to research information on TechNet or MSDN about the products or a home user may
be trying to download the latest Windows Update packages to their machine on Patch Tuesday.

Having a website running in a single location in the US, Seattle for example means that people
accessing the website and its content from Seattle or neighbouring areas are going to get great
performance from the site due to the fact that they are so close, the latency and round trip time will
be really low.

If you are customer of a Microsoft product in Germany trying to download the latest Windows
Update, when you do this, and the site hosting this content is only hosted in Seattle then your
packets need to travel all of the way from Germany to Seattle and back again. This introduces a lot
of latency in the transaction because of the time taken for the data to travel back and forth those
thousands of miles.

A CDN placed in Germany however would cure this problem. The CDN automatically caches copies of
information into other datacentres around the world and in doing so, puts the content closer to the
user reducing the time to retrieve the content and thus making things happen faster.

A by-product of using a CDN is that content served from a CDN isnt touching your web server which
therefore reduces load on the web server, potentially freeing up processor cycles for processing of
dynamic page content and using Microsoft Azure, reduced compute consumption means reduced
costs.

Not everything can be cached I need to stress early on but well get to that shortly.

4
 Introduction to Azure CDN

What is Azure CDN?

Azure CDN is the Microsoft Azure implementation of a CDN network. Microsoft provide multiple
CDN locations (nodes) throughout the world. When you provision a CDN in Microsoft Azure and host
content in it, your content is automatically replicated to all of these locations.

East US CDN Central US West US CDN North Europe West Europe Asia CDN
Nodes CDN Nodes Nodes CDN Nodes CDN Nodes Nodes
Atlanta Chicago Los Angeles Copenhagen Amsterdam Batam
Miami Dallas San Jose Helsinki Frankfurt Hong Kong
New York Seattle Stockholm Milan Jakarta
Washington Vienna London Kaosiung
DC Warsaw Madrid Singapore
Paris Sydney
Tokyo
Osaka

As you can see, at the time of writing there are some 28 worldwide locations where your data is
cached in the Microsoft Azure CDN nodes making your data very distributed and accessible for users.

As with all services in Microsoft Azure, the CDN is a multi-tenant platform, servicing many customers
like yourself.

What Can Azure CDN Cache?

Caching in a CDN is designed for servicing static content due to the very nature of caching. Dynamic
content generated at a server head-end such as streaming media or ASP.NET and PHP pages
generated just-in-time using server-side technologies are not CDN friendly.

What is CDN friendly are static elements and artefacts which build together to create a page.

Take the homepage of my blog for example. At the time of writing, there are roughly 10 images and
3 CSS style sheets which make up the page layout. There are then several JavaScript, jQuery and
other components which all add to the makeup of the page. Whilst the text in each blog post
originates from a SQL database and is dynamically called, all of these images and other artefacts are
static and required to be loaded for every page on the site to build it to the specification laid out in
the code.

Azure CDN can only cache data which is tagged as publicly cacheable which means you are going to
need to have your cache-control HTTP headers in order. We will cover off how to manage that later.

Azure CDN can be implemented for the following Microsoft Azure services:

BLOB Storage Accounts

Cloud Services

You will need to create a new CDN Endpoint in Microsoft Azure for each BLOB Storage account or
Cloud Service that you want to cache which is also worth pointing out before you think that a single
CDN Endpoint can do it all for you.

5
Configuring a Microsoft Azure CDN

In this guide, Im going to be focusing on BLOB Storage caching with CDN as this is the most common
implementation for it and also the easiest to convey. Caching of Cloud Services will be an integral
part of the build process for the Cloud Service in code which is ultimately bespoke for each
implementation you have.

Prerequisites for Configuration

The prerequisites for the configuration of Azure CDN are short and sweet. You will need to have the
following:

1. Access to a Microsoft Azure Subscription which allows you to create new objects such as
new BLOB Storage Accounts and CDN Endpoints.
2. Sufficient spending limit entitlement remaining in the subscription to create the required
resources if your subscription is capped to a budgetary limit

For the remainder of this guide, I am assuming that you currently have no CDN Endpoints configured
but that you do have an existing BLOB Storage Account which is hosting your static content.

6
 Example Deployment Architecture

Example Deployment Architecture

In this guide, Im going to be using my blog as an example deployment architecture. Its a simple
architecture while taking advantage of a few niceties in Microsoft Azure making it more complex
than just a simple Web Site and an integrated MySQL database instance.

As you can see from the high level architecture above, Ive got a single Azure Web Site which has a
linked resource of a SQL Azure database which is configured to use SQL Azure Sync and replicate
with another SQL Azure database, something which I detailed in my previous guide Configuring a
Windows Azure SQL Sync Group on the TechNet Gallery.

Using the excellent Windows Azure Storage for WordPress plugin created by a team at Microsoft
called Microsoft Open, I am already hosting my image uploads to the site in Microsoft Azure BLOB
Storage instead of directly on the Web Site instance taking a great weight off the site.

As a side process which I did manually, I am hosting all of my JavaScript, theme images and CSS style
sheets in a second BLOB Storage account to take more load off the site. This was done because
storage is cheap and storage access even cheaper. Compared to the price of compute for a Web Site
instance it makes perfect sense and Id highly recommend doing the same for any sites you run if
you can.

What I am going to be doing in this guide is inserting an Azure CDN Endpoint into the architecture to
host content for the BLOB Storage account which hosts the theme content.

7
Configuring a Microsoft Azure CDN

Adding the Public Cache-Control HTTP Header

For your content to be permissible for caching not just in the Microsoft Azure CDN but in any CDN or
caching service which honours cache-control flags, we need to make sure that your artefacts are set
to public.

By default, BLOBs uploaded into a Microsoft Azure BLOB Storage account are not assigned any
cache-control attribute which means they will not be cached.

Programmatically Set the Cache-Control Header

If you are developing an application to utilize BLOB Storage yourself then you should ensure that the
code for your application creates the BLOBs with the appropriate caching headers.

A great example of how to do this is on MSDN at How to Manage Expiration of Blob Content in the
Azure Content Delivery Network (CDN).

Manually Set the Cache-Control Header

If like me, you are using a third-party application to upload your BLOBs into your Storage Account
then you cannot code the application to do this for unless the developer of the software was very
nice to you.

In my sake, the WordPress plugin for uploading content to the BLOB Storage Account does not do
this so a manual step for me after the upload is to set the header. I use an application called
CloudBerry Explorer for Azure BLOB Storage which is a really nice application for exploring your
storage accounts and I would highly recommend it.

Once a BLOB is uploaded, I use CloudBerry to right-click on the BLOB and select the Set HTTP
Headers menu item.

This then presents me with a dialog displaying all of the current HTTP headers on the BLOB and
allows me to edit them and add new headers.

8
 Adding the Public Cache-Control HTTP Header

I spent a lot of time researching and planning how I was going to format my header value and I
settled on the public, max-age=2592000, must-revalidate value as shown below.

There are lots of great articles online which can explain to you the various possibilities with this
header but I will break down my value as I think its a common and good use.

public Instructs a CDN, proxy server, client browser or other caching engines that
this artefact is eligible for caching.

max-age=2592000 Instructs a device which intends to cache this artefact that it should not be
cached for any longer than 30 days.

I settled on this value after deciding how often I was likely to make
changes to my static content and how long was I potentially happy for
someone to see stale content before it is refreshed.

must-revalidate This setting instructs any device caching the artefact that the next time
the artefact is called it must revalidate with the original source that it has
not changed. This generates a little overhead at my expense but helps
prevent against stale caching.

Using CloudBerry I can multi-select items to set the header and with all of my existing BLOBs set
already, its just a quick click or two to set it for new uploads. If I was PHP savvy enough then I would
look to updating the WordPress plugin myself to add the cache-control header but lets leave that as
out of scope for this guide.

9
Configuring a Microsoft Azure CDN

Verifying the Public Cache-Control Header

With your Storage BLOBs now set to be permissible in public caches, we need to verify that this is
indeed configured. We can use Internet Explorer Developer Tools for this and its really simple.

Firstly, open the page which has the artefacts on it. Once the page is loaded, press F12 to open the
Developer Tools.

Using Internet Explorer 11 in Windows 8.1, click the icon in the left black navigation bar which looks
like a wireless access point for the Network Summary.

Click a URL for an object loaded with the page which you have in your BLOB Storage Account and
then click the Detail link at the top of the Developer Tools and then click the Response Header sub-
menu link.

Here, we can see that the cache-control header was returned to my Internet Explorer browser
session and that my public, max-age=2592000, must-revalidate header value was sent from the
Storage Account correctly.

10
 Create an Azure CDN Endpoint

Create an Azure CDN Endpoint

With our content now correctly labelled up with the Cache-Control HTTP header, we are ready to let
the content delivery begin.

Firstly, you need to login to the Microsoft Azure portal. Currently, we are in the middle of a
transition with the new Microsoft Azure Portal Preview announced however CDN is currently not
available for creation in this new portal but this is only correct for the time of writing so make sure
you are logging into the existing portal at https://manage.windowsazure.com.

Once you are logged in, click the CDN link in the left navigation area to view the CDN Endpoints
page.

As we have no CDN Endpoints right now, click Create a CDN Endpoint in the main screen area to get
started.

11
Configuring a Microsoft Azure CDN

The Quick Create option for CDN will be automatically selected. Check that you have the correct
subscription selected and from the Origin Domain drop-down menu, select the Cloud Service or
BLOB Storage Account that you want to have published into the CDN.

Ive selected a Storage Account which hosts all of my static content such as CSS stylesheets,
JavaScript and such like.

Click the Create button at the bottom once youve verified youve got the correct subscription and
origin domain selected.

12
 Create an Azure CDN Endpoint

Once you have selected Create, you will be taken back to the portal page and a new CDN Endpoint
will now be visible with the Create CDN Endpoint job at the bottom of the screen showing that the
job succeeded.

Once you have created a CDN Endpoint for a Cloud Service or a Storage Account it can take some
time for the CDN to fill with your content. Do not head straight over to your application and re-write
your URLs to use the CDN until you have verified the content fill.

13
Configuring a Microsoft Azure CDN

CDN Endpoint Fill Delay

The previous comment gets a special emphasis because this is a really important point.

Microsoft MSDN guidance suggests that it can take an hour for the CDN Endpoints to start caching
your content and for it to be available in the CDN as the notification and request to cache has to be
sent out around the CDN worldwide nodes.

I found that in testing for writing this guide that my BLOB Storage Account with relatively few items
actually took about 2 hours to be completely available with some content appearing early and
others coming in a bit later.

This is both an important point for migrating to use the CDN but also for when you add new static
content.

When migrating to the CDN initially, you will need to make sure that all of your artefacts are in the
CDN before you migrate your URLs over to use it as otherwise end-users for the website, service or
anything dependant on the artefacts will likely see a HTTP 404 object not found error.

The second area in which this is important to note is later adding new content. If you plan to deploy
a new static artefact to a service or website, make sure that the artefact is available at the URL you
expect it to be in the CDN before you add it to your site or service.

14
 Enabling HTTPS for the CDN Endpoint (Optional)

Enabling HTTPS for the CDN Endpoint (Optional)

By default a CDN Endpoint is enabled for HTTP access only.

If you are serving static artefacts for a site which is using HTTPS SSL then you will also want to enable
HTTPS support for the Endpoint. If you do not enable HTTPS on the Endpoint and you access HTTP
resources for a site which is otherwise operating in HTTPS then your end-users will likely see a
warning in the browser requesting them to confirm whether they want to only show secure content
which harms your user experience.

To enable HTTPS on the CDN Endpoint, open the Endpoint Properties in the portal.

At the bottom of the page in the buttons in the centre is a button labelled Enable HTTPS. Simply click
the button and HTTPS will be enabled.

You can verify that HTTPS has been enabled later once weve given the Endpoint time to content fill
by testing some content access requests but for now we can verify this at a high level in the portal as
Protocol Enabled will now report HTTP and HTTPS as shown above.

15
Configuring a Microsoft Azure CDN

Set a Custom Domain Name for the CDN Endpoint (Optional)

When you are serving content from the CDN, the URL used to access your content will by default be
in the format of http://<Endpoint Name>.vo.msecnd.net or https://<Endpoint
Name>.vo.msecnd.net.

This may or may not be an issue according to your use case but I for one like to use my domain name
where possible as it means for people who may try to view the source code of a page or view the
properties of an image on the site they see my domain name and not the default Azure CDN URLs.

To add a Custom Domain Name to the CDN Endpoint requires you to have access to your domain
DNS administration panel from your domain name provider or whomever is hosting your DNS zone.

From the CDN Endpoint properties, select the Manage Domains link at the bottom of the page in the
portal.

The on-screen instructions here are very helpful and tell you want you need to add in your DNS
zone. You need to add any records to your DNS zone before you try to add the domain name to the
dialog.

Contrary to what my domain registrar tells me about waiting 24 hours before using the records,
when I update my DNS zone, I can normally add the record and come straight back to Azure and it
works but this may not be the case for everyone.

16
 Set a Custom Domain Name for the CDN Endpoint (Optional)

Once youve added your records into your DNS, add the custom domain name to the Domain Names
list below the default vo.msecnd.net record.

Assuming Azure is able to find your DNS record, you will see a green tick to verify that the domain
name was validated as shown in the previous image. Click the Tick button in the bottom right to
apply the custom domain name.

17
Configuring a Microsoft Azure CDN

Verifying the CDN Endpoint Fill

Once weve enabled our CDN Endpoint for HTTPS and added a Custom Domain Name, some of the
time for the CDN Endpoint to fill has passed but probably not all of it so go get yourself a well-earned
spot of lunch and upon your return, hopefully this has finished for you.

URLs in the CDN Endpoint will match that of your Storage Account structure so that all you need to
do is change the leading domain name portion of the URL.

I verified the CDN fill by using Internet Explorer to navigate to some of the artefacts in my Storage
Account and replacing the URL with the CDN Endpoint URL.

As you can see from the URLs in the screenshots above, I was able to load images in both HTTP and
HTTPS protocol. These were loaded using the default Azure CDN URLs so I now need to verify these
using the Custom Domain Name I specified.

Both of the test images were able to be requested using the Custom Domain Name however it is
good to note here that the HTTPS protocol requested image is reporting that there is a certificate
problem.

Viewing the certificate properties, we can see that Microsoft are signing the CDN Endpoints with a
Wildcard SSL Certificate issued to *.vo.msecnd.net. If I apply this certificate issue to one embedded
within the website, we can see that if I call the picture of me on my blog over HTTPS with the
certificate warning, I dont get the image.

Although the HTTPS feature is there, be careful how you use it. The problem here is because of the
certificate error, Internet Explorer does not want to load the image to protect me as the end user.

18
 Utilizing the CDN Endpoint (IIS URL Rewrite)

Utilizing the CDN Endpoint (IIS URL Rewrite)

A really neat way to utilize the CDN is to not modify any of your object paths and to use the IIS URL
Rewrite module to do it for you.

The IIS URL Rewrite module is pre-installed and available to use in Microsoft Azure Web Sites and
can be installed in a Web Role that is part of a Cloud Service.

IIS URL Rewrite is most commonly used to generate Search Engine Optimized (SEO) URLs to make
your website more attractive to Google and Bing and also to end users. Instead of having URLs with
trailing file extensions or query strings in them, we can write Regular Expressions (RegEx) rules in the
web.config file for a website to amend the incoming URLs on the fly and map them to back end files
and address.

In our use case, we want to use an IIS URL Rewrite Outbound rule. An Outbound rule can be
configured to read the HTML content of a page before it is pushed out to the user requesting the
page and modify its contents. We can use this therefore to update the URLs for our static content to
point to the CDN.

This rule needs to be written once and then assuming you dont update your site structure in a way
which changes how the rule needs to work, we can forget about it and it will work for us all day long.

This method does have a drawback in that when using an outbound rule, we need to disable content
compression in IIS but the fact that we arent serving our heavy image and static content from the
web server means this may not be an issue after all.

The system.webServer Configuration Reference on IIS.NET has the details you will require to amend
a web.config file to not use compression at
http://www.iis.net/configreference/system.webserver/httpcompression.

For information on how to write an IIS URL Rewrite Outbound Rule, I would also suggest referring to
a learning page on IIS.NET available at http://www.iis.net/learn/extensions/url-rewrite-
module/creating-outbound-rules-for-url-rewrite-module.

As every website is different in structure and the structure of the RegEx and the rule will be unique
to each person, I cant really offer any advice in this general guide on how to write one of these rules
but what I can offer is advice to trial any rules on a test or development site. URL Rewrite rules have
the potential, if incorrectly written to stop the function of a site.

Make sure you take a backup of your site before taking to writing a rewrite rule or at a minimum,
backup the web.config file before you make any changes or modifications to it.

19
Configuring a Microsoft Azure CDN

Utilizing the CDN Endpoint (Alternate)

In addition to the IIS URL Rewrite method, there are other methods to rewrite the URLs for your
static content to point to the new CDN if you dont want to update things manually.

The jQuery method is almost universal in the sense that it could be applied to any site which has a
suitable jQuery module version loaded. This method will work regardless of whether it is an Azure
Web Site or a website hosted elsewhere and whether it runs in PHP or ASP.NET code.

The WordPress plugins are obviously tied to a site running on WordPress but you could also use one
of these plugins to help you interpret a method for rewriting URLs in PHP. If the site you run is based
on PHP then you open the source for a plugin to see how it works and try a touch of reverse-
engineering.

jQuery URL Rewrite

If you are using a site which perhaps has thousands of images then you could look to use jQuery to
dynamically update the img src tags. jQuery is a library of JavaScript designed primarily for
manipulating the Document Object Model (DOM) of a web page to alter its appearance based on
rules and conditions. Its actually really hard to find a website these days which isnt utilizing jQuery
in some way.

Im not going to provide you with specific code samples for jQuery here as a) Im not a jQuery expert
and b) There are many ways to implement this with jQuery so you need to find the way which works
best for you.

WordPress Plugins
If you are using WordPress then there are number of plugins on the WordPress Plugin Directory at
http://wordpress.org/plugins which can automatically re-write URLs for you. These plugins will be
using either jQuery or a PHP re-write to perform the task meaning that they work in the same way as
I mentioned above.

I havent tried any of these plugins for myself so I cannot vouch for any of them specifically but there
are quite a few different plugins available. My advice would be toread through the information and
support details for them all and what they have to offer and make a decision for yourself.

20