Yesterday I told Wang Tao, an annoying colleague sitting beside me, about how to make the static content enable the CDN in his website which had just been published on Windows Azure. The approach would be

• Move the static content, the images, CSS files, etc. into the blob storage.
• Enable the CDN on his storage account.
• Change the URL of those static files to the CDN URL.

I think these are the very common steps when using CDN. But this morning I found that the new Windows Azure SDK 1.4 and new Windows Azure Developer Portal had just been published announced at the Windows Azure Blog. One of the new features in this release is about the CDN, which means we can enabled the CDN not only for a storage account, but a hosted service as well. Within this new feature the steps I mentioned above would be turned simpler a lot.

Enable CDN for Hosted Service

To enable the CDN for a hosted service we just need to log on the Windows Azure Developer Portal. Under the “Hosted Services, Storage Accounts & CDN” item we will find a new menu on the left hand side said “CDN”, where we can manage the CDN for storage account and hosted service. As we can see the hosted services and storage accounts are all listed in my subscriptions.

To enable a CDN for a hosted service is veru simple, just select a hosted service and click the New Endpoint button on top.

In this dialog we can select the subscription and the storage account, or the hosted service we want the CDN to be enabled. If we selected the hosted service, like I did in the image above, the “Source URL for the CDN endpoint” will be shown automatically. This means the windows azure platform will make all contents under the “/cdn” folder as CDN enabled. But we cannot change the value at the moment.

The following 3 checkboxes next to the URL are:

• Enable CDN: Enable or disable the CDN.
• HTTPS: If we need to use HTTPS connections check it.
• Query String: If we are caching content from a hosted service and we are using query strings to specify the content to be retrieved, check it.

Just click the “Create” button to let the windows azure create the CDN for our hosted service. The CDN would be available within 60 minutes as Microsoft mentioned. My experience is that about 15 minutes the CDN could be used and we can find the CDN URL in the portal as well.

Put the Content in CDN in Hosted Service

Let’s create a simple windows azure project in Visual Studio with a MVC 2 Web Role. When we created the CDN mentioned above the source URL of CDN endpoint would be under the “/cdn” folder. So in the Visual Studio we create a folder under the website named “cdn” and put some static files there. Then all these files would be cached by CDN if we use the CDN endpoint.

The CDN of the hosted service can cache some kind of “dynamic” result with the Query String feature enabled. We create a controller named CdnController and a GetNumber action in it. The routed URL of this controller would be /Cdn/GetNumber which can be CDN-ed as well since the URL said it’s under the “/cdn” folder. In the GetNumber action we just put a number value which specified by parameter into the view model, then the URL could be like /Cdn/GetNumber?number=2.

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.Mvc;

   6:  

   7: namespace MvcWebRole1.Controllers

   8: {

   9:     public class CdnController : Controller

  10:     {

  11:         //

  12:         // GET: /Cdn/

  13:  

  14:         public ActionResult GetNumber(int number)

  15:         {

  16:             return View(number);

  17:         }

  18:  

  19:     }

  20: }

And we add a view to display the number which is super simple.

   1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<int>" %>

   2:  

   3: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

   4:     GetNumber

   5: </asp:Content>

   6:  

   7: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

   8:  

   9:     <h2>The number is: <%
   1: : Model.ToString() 
%></h2>

  10:  

  11: </asp:Content>

Since this action is under the CdnController the URL would be under the “/cdn” folder which means it can be CDN-ed. And since we checked the “Query String” the content of this dynamic page will be cached by its query string. So if I use the CDN URL, http://az25311.vo.msecnd.net/GetNumber?number=2, the CDN will firstly check if there’s any content cached with the key “GetNumber?number=2”. If yes then the CDN will return the content directly; otherwise it will connect to the hosted service, http://aurora-sys.cloudapp.net/Cdn/GetNumber?number=2, and then send the result back to the browser and cached in CDN.

But to be notice that the query string are treated as string when used by the key of CDN element. This means the URLs below would be cached in 2 elements in CDN:

• http://az25311.vo.msecnd.net/GetNumber?number=2&page=1
• http://az25311.vo.msecnd.net/GetNumber?page=1&number=2

The final step is to upload the project onto azure.

Test the Hosted Service CDN

After published the project on azure, we can use the CDN in the website. The CDN endpoint we had created is az25311.vo.msecnd.net so all files under the “/cdn” folder can be requested with it. Let’s have a try on the sample.htm and c_great_wall.jpg static files.

Also we can request the dynamic page GetNumber with the query string with the CDN endpoint.

And if we refresh this page it will be shown very quickly since the content comes from the CDN without MCV server side process.

We style of this page was missing. This is because the CSS file was not includes in the “/cdn” folder so the page cannot retrieve the CSS file from the CDN URL.

Summary

In this post I introduced the new feature in Windows Azure CDN with the release of Windows Azure SDK 1.4 and new Developer Portal. With the CDN of the Hosted Service we can just put the static resources under a “/cdn” folder so that the CDN can cache them automatically and no need to put then into the blob storage. Also it support caching the dynamic content with the Query String feature. So that we can cache some parts of the web page by using the UserController and CDN. For example we can cache the log on user control in the master page so that the log on part will be loaded super-fast.

There are some other new features within this release you can find here. And for more detailed information about the Windows Azure CDN please have a look here as well.

Hope this helps,

Shaun