I’ve been doing a fair bit of work with the Azure CDN recently. I’ve put together this blog post outlining how to get started and to give an overview of some tooling I’ve written to help you get up and running.
Azure CDN Quickstart
Currently CDNs need to be created in the original Silverlight portal and need to be attached to an existing Hosted Service or Storage Account. We’ll attach ours to a storage account. When creating you should click Enable CDN and Query String (this option will invalidate the CDN cache on any resources if you vary the query string in the resource address, more on this later). You should now have a CDN in the cloud, now to populate it.
Populating the CDN with static content
Assuming you haven’t altered the MVC standard layout, your static content is probably in the Content folder. However, where-ever your static content is residing you’ll need to create a new folder titled CDN and move your content into it. The Azure CDN expects to find your content in the CDN folder. The easiest thing to do is to cut and paste your Content folder into the CDN folder. You should now be ready to update the image references.
Introducing AzureCdn.Me
To make the process of referencing images on the Azure CDN a bit more straight-forward I created the AzureCdn.Me nuget package which includes a couple of extension methods to ease the pain. So install-package AzureCdn.Me into your web project. AzureCdn.Me will create a CDN folder for you and add the extensions Url.AzureCdnContent and Html.IsDebugMode and a couple of parameters into your web.config. If we open web.config we can see the new params:
<add key="AzureCDNEndpoint" value="CDN" /> <add key="AzureCDNDebug" value="true" />
The parameters have been defaulted with the values appropriate for debug. We can now alter our _layout file to use the extensions method. First off you’ll need to reference the package by adding a using statement at the top of the file, eg:
@using AzureCdn.Me.Code.Extensions
<!DOCTYPE html>
<html>
<head>
<title>AzureCdn.Me Sample</title>
<meta charset="utf-8" />
<link href="@Url.AzureCdnContent("~/Content/bootstrap.css")" rel="stylesheet" />
<link href="@Url.AzureCdnContent("~/Content/bootstrap-responsive.css")" rel="stylesheet" />
<link href="@Url.AzureCdnContent("~/Content/azurecdnme.css")" rel="stylesheet" />
...
Note I haven’t altered the address of the static files. Now if we run our project everything should still be fine, however if we open Firebug, we can see that the extension method has both appended the CDN folder to the front of the string, as read from web.cofig, additionally and importantly it’s also added a querystring containing a cache busting random number. As it’s stored in a static class this number should stay the same until you redploy. This is very useful, as if we create subsequent versions of our website, each deploy will force the CDN to fetch a fresh version of the stylesheet.
Overloaded
There is also an overloaded where you can pass in a value of your choice. For example, you could pass in todays date, which would mean that the cache would refresh itself every 24hours. Or you could pass in the version number of the executing assembly etc. Hopefully you get the idea.
<link href="@Url.AzureCdnContent("~/Content/bootstrap.css", DateTime.Now.ToString("ddMMyy"))" rel="stylesheet" />
Doing it Live
So once you’re happy with your site, you want to push your site live, you’re going to need to replace the debug AzureCDNEndpoint value in web.config with the actual value of your CDN endpoint, ie http://az123456.vo.msecnd.net. The easiest way of doing that is with web config transformations. Once deployed your Css files, images etc will be served up from the Azure CDN, and because of the querystring component, any changes will always be picked up as soon as you push the changes live.
In my next post I’ll outline how to minify your css and how you can invalidate the cache for any images that are referenced in your CSS and Javascript .
Convivial Coding 
Pingback: Azure CDN – Cache busting CSS image references and minification | Convivial Coding
Pingback: Reading Notes 2012-07-23 | Matricis