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
All documents and related graphics, codes are provided "AS IS" without warranty of any kind.
Copyright © Shaun Ziyan Xu. This work is licensed under
the Creative Commons License.
