Hands-On LabWindows Azure Content Delivery NetworkLab version: 2.0.0

Last updated: 5/20/2023

Page | 1

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: USING THE CDN TO DELIVER STATIC CONTENT..........................................................5Task 1 – Loading Resources from the Hosting Server..........................................................................6

Task 2 – Uploading Static Content to Blob Storage............................................................................11

Task 3 – Delivering Content from Blob Storage.................................................................................13

Task 4 – Enabling the Content Delivery Network (CDN)....................................................................16

Task 5 – Delivering Resources from the CDN.....................................................................................20

Task 6 – Publishing Content Over HTTPS...........................................................................................25

EXERCISE 2: MANAGING CACHE EXPIRATION AND RESOURCE VERSIONING.............................30Task 1 – Controlling the Lifetime of a Cached CDN Resource............................................................30

Task 2 – Using Versioning to Invalidate Content Cached by the CDN................................................39

EXERCISE 3: CACHING CONTENT FROM HOSTED SERVICES..........................................................45Task 1 – Creating a Hosted Service for the Application.....................................................................46

Task 2 – Enabling the CDN for the Hosted Service.............................................................................48

Task 3 – Generating Dynamic Content...............................................................................................53

Task 4 – Publishing the Application to Windows Azure.....................................................................56

Task 5 – Testing the Application in the Cloud....................................................................................57

SUMMARY................................................................................................................................................ 61

APPENDIX A: PUBLISHING AN APPLICATION TO WINDOWS AZURE...............................................61Task 1 – Configuring your Windows Azure Management API Credentials in Visual Studio................61

Task 2 – Configuring Remote Desktop...............................................................................................69

Task 3 – Publishing the Application to a Hosted Service....................................................................75

Page | 2

Overview

Windows Azure provides the Windows Azure Content Delivery Network (CDN) to deliver Windows Azure Blob content. Windows Azure CDN offers developers a global solution for delivering high-bandwidth content.

Windows Azure CDN has several locations globally (United States, Europe, Asia, Australia and South America) and continues to expand. Windows Azure CDN caches your Windows Azure blobs at strategically placed locations to provide maximum bandwidth for delivering your content to users. You can enable CDN delivery for any storage account via the Windows Azure Platform Management Portal. The CDN provides edge delivery only to blobs that are in public blob containers, which are available for anonymous access.

The benefit of using a CDN is better performance and user experience for users who are farther from the source of the content stored in the Windows Azure blob storage.

When you enable CDN access for a storage account, the Management Portal provides you with a domain name of the following format: http:/ /<identifier>.vo.msecnd.net/. This domain name can then be used to access blobs in a public container. For example, given a public container “images” and a storage account “youraccount”, once the storage account is enabled for CDN access, users can access the blobs in that container using either of the following two URLs:

Windows Azure blob storage URL: http://youraccount.blob.core.windows.net/images/

Windows Azure CDN URL: http://<identifier>.vo.msecnd.net/images/

When a request is made using the Windows Azure Blob service URL, the blob is read directly from the Windows Azure Blob service. When a request is made using the Windows Azure CDN URL, the request is redirected to the CDN endpoint closest to the location from which the request was made to provide access to the blob. If the blob is not found at that endpoint, then it is retrieved from blob storage and cached at the endpoint, where a time-to-live (TTL) setting is maintained for the cached blob. The TTL specifies that the blob should be cached for that amount of time in the CDN until it is refreshed by the Blob service. The CDN attempts to refresh the blob from Windows Azure blob storage only once the TTL has elapsed. As described in this msdn article, the default TTL is calculated as 20% of the interval between the present time and the last-modified time, up to a maximum interval of 72 hours. For example, a blob whose last-modified time was 30 minutes ago will be considered fresh for six minutes in the CDN cache. If this value is specified for a blob, then the TTL period will be set to the value specified in Cache-Control HTTP header.

The value of caching blobs in the Windows Azure CDN is realized only when the content is delivered from the CDN edge cache, so content requested only once during the blob’s TTL period will not get performance improvements from edge caching. The blob content that benefits the most from caching are blobs accessed frequently during their cached TTL period.

Page | 3

Blobs already cached in the CDN will remain cached until the TTL for each blob expires. When the TTL expires, the Windows Azure CDN will check to see whether the CDN endpoint is still valid and the Windows Azure blob is still anonymously accessible. If it is not, then the blob will no longer be cached. This means that if you want to change the content of the blob and the blob is currently cached in the CDN, the new content will not be available via the CDN until the CDN refreshes its content when the cached content TTL expires.

When you enable the CDN the configuration created for this endpoint is not immediately available; it can take up to 60 minutes for the registration to propagate through the CDN network worldwide. Users who try immediately to use the CDN domain name will get a 400 error until the configuration is updated worldwide.

Objectives

In this hands-on lab, you will learn how to:

Enable Windows Azure CDN

Leverage Windows Azure CDN for static content

Use TTL headers to control CDN caching scenarios

Prerequisites

The following is required to complete this hands-on lab:

IIS 7 (with ASP.NET, WCF HTTP Activation)

Microsoft Visual Studio 2010

Microsoft .NET Framework 4.0

Windows Azure Tools for Microsoft Visual Studio 1.5

Setup

In order to execute the exercises in this hands-on lab you need to set up your environment.

1. Open a Windows Explorer window and browse to the lab’s Source folder.

2. Double-click the Setup.cmd file in this folder to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab.

3. If the User Account Control dialog is shown, confirm the action to proceed.

Note: Make sure you have checked all the dependencies for this lab before running the setup.

Page | 4

Using the Code Snippets

Throughout the lab document, you will be instructed to insert code blocks. For your convenience, most of that code is provided as Visual Studio Code Snippets, which you can use from within Visual Studio 2010 to avoid having to add it manually.

If you are not familiar with the Visual Studio Code Snippets, and want to learn how to use them, you can refer to the Setup.docx document in the Assets folder of the training kit, which contains a section describing how to use them.

Exercises

This hands-on lab includes the following exercises:

1. Using the CDN to Deliver Static Content

2. Managing Cache Expiration and Resource Versioning

3. Caching Content from Hosted Services

Estimated time to complete this lab: 60 minutes.

Note: When you first start Visual Studio, you must select one of the predefined settings collections. Every predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. If you choose a different settings collection for your development environment, there may be differences in these procedures that you need to take into account.

Exercise 1: Using the CDN to Deliver Static Content

In this exercise, you explore the use of the Windows Azure Content Delivery Network, otherwise known as the CDN, to deliver static content in your Web application. For this purpose, you will use a sample application implemented with ASP.NET MVC that makes use of static resources such as CSS style sheets and script files. In its original implementation, these resources are stored as part of the application,

Page | 5

within its folder structure, and linked to these locations from the pages in the application. In this scenario, when viewing a page, the browser retrieves these static resources from the web role hosting the application.

To off-load delivery of static content, Web applications can take advantage of Windows Azure storage. To explore this scenario, you upload the static content in the sample application to Windows Azure blob storage and update the application to link to the uploaded blobs, thus freeing the hosting server from having to manage these resources.

While delivering content in blob storage is beneficial in terms of the resources needed by the server hosting the application, it also means that clients around the world will need to retrieve the content from a single location. For clients located far from the data center hosting the Windows Azure storage services account, this can result in increased latencies. Enabling the CDN for the storage account allows resources to be replicated and cached in many locations around the world, thus placing the content close to the users. To complete this exercise, you enable the CDN for your storage account and configure the application to use it.

Task 1 – Loading Resources from the Hosting Server

In this task, you run the application configured to link its static resources to a location within the application’s folder structure.

1. Open Visual Studio in elevated administrator mode from Start | All Programs | Microsoft Visual Studio 2010 by right-clicking the Microsoft Visual Studio 2010 shortcut and choosing Run as administrator.

2. If the User Account Control dialog appears, confirm that you wish to proceed.

3. In the File menu, choose Open and then Project/Solution. In the Open Project dialog, browse to Ex1-UsingAzureCDN\Begin in the Source folder of the lab, select Begin.sln and then click Open.

4. Open the Site.Master page in the Views\Shared folder of the CDNSample project. Examine the markup, in particular the content inside the head tag, and notice how a helper method generates the URL of the linked resources.

Figure 1Linking static content in the application

Page | 6

5. Now, open the UrlHelperExtension.cs file inside the Helpers folder. The UrlHelperExtension class provides extension methods to the UrlHelper class commonly used to build URLs in MVC applications. Examine the StaticContent method in this class and notice how it returns an absolute path that maps resources to the Content folder of the application.

Figure 2Using extension methods to link static resources

Note: Using a helper method to construct the URL of static resources allows you to relocate these resources easily.

6. Open the Index.aspx view in the Views\Home folder of the project. Notice that it uses the ImageUserControl partial view to generate its output.

Figure 3Markup for the home view

Note: The ImageUserControl partial view renders an image along with its URL and information about its origin, namely whether the image was loaded from the hosting server, blob storage, or the CDN. This control is located in the Views\Shared folder of the application and uses an extension method in the UrlHelperExtension class named GetSource that analyzes the URL of the image to determine the location from which it was loaded.

Important: Before you execute the solution, make sure that the start-up project is set and that the start page of the Web project is blank.

Page | 7

To set the start up project, in Solution Explorer, right-click the CDNService project and then select Set as StartUp Project. To set the start page, in Solution Explorer, right-click the CDNSample project and then select Properties. In the Properties window, select the Web tab and in the Start Action, select Specific Page. Leave the value of this field blank.

7. Press F5 to build and launch the application in the compute emulator. Wait for the home page to open in your browser, which should appear as shown in the following figure. Notice the source of the image is the server hosting the application and that its URL is relative to the Content folder of the application.

Figure 4Application home page showing content downloaded from the hosting server

8. If you are viewing the page in Internet Explorer 8 or above, press F12 to open the Developer Tools.

Note: The home page of the application contains references to several static resources including a CSS style sheet, a script file, and an image.

The following steps require the use of the Internet Explorer Development Tools available in Internet Explorer 8 or above to determine the location used by the browser to download each

Page | 8

linked resource. If you use a different browser, you will need to use other means to display the origin of these documents, for example, by displaying the source of the page and examining the origin for each linked element. Alternatively, you may examine every request issued by the browser in an HTTP debugging tool such as Fiddler.

9. In the Developer Tools menu, point to Images and then select View Image Report. Notice that the SRC attribute indicates that the image is loaded from the Content/images folder of the application.

Figure 5Image report showing an image downloaded from the Content folder of the application

10. To verify the origin of the script file, in the Development Tools UI, switch to the Script tab and then open the drop down list enumerating the scripts on the page. Notice that the scripts are also loaded from the scripts folder inside Content.

Page | 9

Figure 6Script view showing a script downloaded from the Content folder of the application

11. Similarly, to determine the origin of the CSS files, switch to the CSS tab and examine the drop down listing CSS style sheets loaded by the page. Again, notice that the style sheet origin is the Content/styles folder of the application.

Figure 7CSS view showing style sheets downloaded from the Content folder of the application

12. (Optional) Launch the Fiddler HTTP debugging tool. Next, in the browser window’s address bar, replace the host portion of the current address (127.0.0.1) with the host name ipv4.fiddler (e.g.

Page | 10

http://ipv4.fiddler:81) to redirect the local traffic through Fiddler. Now, examine the requests issued by the browser in Fiddler’s Web Sessions pane, in particular, the Host column showing the requests to the server hosting the application.

Figure 8Fiddler capture showing the requests to the hosting server

13. Close the browser window to stop debugging and shut down the running application.

Task 2 – Uploading Static Content to Blob Storage

In this task, you upload the static content in the application to a container in the Windows Azure Blob service using a PowerShell script. The script recursively copies all the files and directories inside the application’s Content folder to a given container in blob storage.

1. To configure the Windows Azure storage services account where the tool uploads the files, open the configuration.xml file inside the Assets folder of the lab.

2. In this file, fill in the ID of your Windows Azure subscription and the name and primary access key for your storage account, replacing the corresponding placeholders in this file.

Page | 11

Figure 9Configuring the script to upload content to blob storage

3. Save the configuration.xml file.

4. In Windows Explorer, browse to the Assets folder of the lab, then right-click the UploadBlobs.cmd script and select Run as administrator. Wait for the script to complete its execution.

Figure 10Uploading the static content to Windows Azure blob storage

Page | 12

Note: The script uses the StorageClient library to upload the resources stored in the Content folder of the application to a container in blob storage also named content and then updates the cache header of each uploaded blob to set its time-to-live (TTL) to 1 day.

In general, static resources that rarely change can be configured with relatively long TTL values to allow the CDN edge servers to cache this content and avoid having to access the source blob frequently. Note, however, that once the content is cached, any changes to the source blob will not be available from the CDN until the TTL period is over. Nevertheless, if a resource with a long TTL needs to be updated, there are techniques to refresh the content seen by the application. Exercise 2 in this lab shows an example of such a technique.

Task 3 – Delivering Content from Blob Storage

In this task, you update the application to deliver its static content from the blobs uploaded in the previous task.

1. Open the UrlHelperExtension class file and replace the body of the StaticContent method with the code shown below, substituting the placeholder [YOUR-ACCOUNT-NAME] with your Windows Azure Storage account name.

C#

public static string StaticContent(this UrlHelper helper,string resource){  return "http://[YOUR-ACCOUNT-NAME].blob.core.windows.net/content/" + resource;}

2. Press F5 to build and launch the application in the compute emulator. Wait for the home page to open in your browser and verify that everything continues to be loaded normally.

Page | 13

Figure 11Home page showing an image loaded from blob storage

3. In Internet Explorer, press F12 to open the Developer Tools. In its menu, point to Images and then select View Image Report. Notice that the image is now loaded from the Content container in your Windows Azure Storage account.

Note: The following steps require the use of the Internet Explorer Development Tools available in Internet Explorer 8 or higher to determine the location used by the browser to download each linked resource. If you use a different browser, you will need to use other means to display the origin of these documents, for example, by displaying the source of the page and examining the origin for each linked element. Alternatively, you may examine every request issued by the browser in an HTTP debugging tool such as Fiddler.

Page | 14

Figure 12Image report showing content linked to a Windows Azure Storage Services blob

4. Similarly, switch to the Script tab and notice that the origin of the script is also blob storage.

Figure 13Script view showing script downloaded from blob storage

5. Finally, switch to the CSS tab to determine the source of the style sheet.

Page | 15

Figure 14CSS view showing style sheet downloaded from blob storage

6. (Optional) Launch Fiddler, refresh the page in the browser window, and then examine the requests issued by the browser in Fiddler’s Web Sessions pane, in particular, the Host column showing the requests to your Windows Azure Storage Services account.

Figure 15Fiddler capture showing the requests to the CDN

Task 4 – Enabling the Content Delivery Network (CDN)

In this task, you enable the CDN in your Windows Azure Storage service.

1. Navigate to the Management Portal and, if necessary, sign in using your Windows Live ID credentials.

2. In the Management Portal UI, select the Hosted Services, Storage Accounts & CDN tab followed by the CDN option and then click New Endpoint on the ribbon.

Page | 16

Figure 16Enabling a CDN endpoint for a storage account

3. In the Create a New CDN Endpoint dialog, expand the drop down list labeled Choose a content provider and locate the name of the storage account for which you want to enable the CDN. If your account is associated with multiple subscriptions, choose the one where you created the storage account. Check the option labeled Enable CDN, leave the HTTPS and Query String options unchecked and then click OK.

Page | 17

Figure 17Creating a new CDN endpoint

4. Read the message shown after you select to enable the CDN and confirm that you want to proceed.

Figure 18Enabling the use of the CDN

5. Wait until the CDN endpoint status changes to Enabled. Select this endpoint in the middle pane and take note of its Default HTTP endpoint in the Properties window. You will need this value shortly to configure the application.

Page | 18

Figure 19Retrieving the CDN endpoint for the storage account

Note: After you enable the CDN, it may take some time before the changes propagate worldwide. Users who try to use the CDN domain name immediately will receive status code 400 (Bad Request) until the content is available via the CDN.

The URL allocated by Windows Azure provides access to your CDN endpoint. As an option, you can assign a custom domain and use that to access the content in the CDN. To take advantage of this feature, you need to register a domain name and assign it to the CDN endpoint. To start the procedure, click Add Domain located on the Custom Domain section of the ribbon. Note that you do not require a custom domain to complete this hands-on lab and that the procedure for enabling this feature will not be explained here.

Page | 19

Figure 20Configuring a custom domain for the CDN

Task 5 – Delivering Resources from the CDN

In this task, you update the application to enable static content to be retrieved from the CDN.

Note: Important: If you enabled the CDN for your storage account during the previous task, you need to allow the change to become effective before continuing with this task. This may take up to 1 hour.

If the CDN endpoint has not fully propagated worldwide, you may encounter script errors and missing style sheets while browsing the application.

1. Open the UrlHelperExtension.cs file in the Helpers folder of the application and replace the body of the StaticContent method with the code shown below, substituting the placeholder labeled [YOUR-BLOB-STORAGE-CDN-ENDPOINT] with the CDN endpoint that you recorded in the previous task when you enabled the CDN in your storage account, for example, az12345.vo.msecnd.net.

C#

public static string StaticContent(this UrlHelper helper, string resource){  return "http://[YOUR-BLOB-STORAGE-CDN-ENDPOINT]/content/" + resource;}

Note: StaticContent is a helper method that generates the URL for a resource stored in Windows Azure blob storage and delivered by the CDN.

2. Press F5 to build and run the application in the compute emulator. Verify that everything continues to be loaded normally.

Page | 20

Figure 21Home page showing an image loaded from the CDN

3. In Internet Explorer, press F12 to open the Developer Tools. In its menu, point to Images and then select View Image Report. Notice that the image is now loaded from the CDN endpoint.

Page | 21

Figure 22Image report showing content downloaded from the CDN

4. Similarly, switch to the Script tab and notice that the origin of the script is also the CDN.

Figure 23Script view showing script downloaded from the CDN

5. Finally, switch to the CSS tab and confirm that the browser downloaded the style sheet from the CDN.

Page | 22

Figure 24CSS view showing style sheet downloaded from the CDN

6. (Optional) Launch Fiddler, refresh the page in the browser window, and then examine the requests issued by the browser in Fiddler’s Web Sessions pane, in particular, the Host column showing the requests to your CDN endpoint.

Figure 25Fiddler capture showing the requests to the CDN

7. Next, open a command prompt window.

8. At the command prompt, enter the following command to show the route and number of “hops” necessary to retrieve a resource from the Blob service. Replace the placeholder [BLOB-STORAGE-ENDPOINT] with the host name of your Blob service account, for example, yourname.blob.core.windows.net.

Note: A ”hop” is the term used to describe a step in the path a packet takes as it crosses the network to its destination. The tracert output shows each hop in the route, three measured round trip times in milliseconds, and the IP address of each intermediary network device.

Page | 23

The round trip time (RTT) measures how long it takes a packet to reach the destination and back again giving an indication of the latency of the network link.

Command Prompt

tracert –d [BLOB-STORAGE-ENDPOINT]

Figure 26Tracert output to the Blob service account

9. Next, enter the following command to show the network path used to retrieve the same image from the CDN. Replace the placeholder [CDN-ENDPOINT] with the URL of the CDN endpoint that you recorded earlier for your storage account. Notice that it requires fewer hops to access the image from the CDN and that the round trip times (RTT) are significantly lower, which should translate into lower latency.

Command Prompt

tracert –d [CDN-ENDPOINT]

Page | 24

Figure 27Tracert output to the CDN edge server

Task 6 – Publishing Content Over HTTPS

In many Web applications, pages accessed through HTTPS often reference other static content that can benefit from using the CDN for its delivery, such as style sheets and images. However, publishing this content over HTTP while the rest of the content uses HTTPS results in security warnings from the browser that detract from the overall user experience. Enabling HTTPS for your CDN endpoint allows you to avoid this problem by delivering all your content securely.

In this task, you configure the lab’s application to use SSL and run it locally in the compute emulator to observe the mixed content security warnings. After that, you enable HTTPS support for your CDN endpoint and test the application again to confirm that the warnings have disappeared.

1. In Solution Explorer, expand the Roles node in the CDNService project and then double-click the CDNSample role to open its properties window.

2. Select the Endpoints tab, locate the endpoint named HttpIn, and then change its Protocol to https.

Page | 25

Figure 28Enabling SSL in the web role

Note: In general, to enable SSL for a role’s endpoint, you need to specify a certificate in the Certificates tab and then assign this certificate to the HTTPS endpoint, under SSL Certificate Name. In this case, you will only test the application in the cloud emulator, which uses its own self-signed certificate, so you can forego this step.

For more information about securing Windows Azure applications with SSL, see the Deploying Applications in Windows Azure hands-on lab in this training kit.

3. Press F5 to build and run the application in the cloud emulator. Notice that the browser displays a security warning concerning the site’s security certificate. Click the link labeled Continue to this website (not recommended) to proceed.

Figure 29

Page | 26

Security warning about untrusted certificate

Note: The cloud emulator uses its own self-signed certificate to provide SSL support. However, the certification authority for the certificate that it uses is not trusted, hence the warning. This warning is unrelated to the problem addressed in this exercise and you may safely ignore it while testing your application locally.

4. After you continue to the website, notice that the browser shows a security warning alerting you that some content in the page you are about to view was not delivered using HTTPS.

Figure 30Security warning about mixed content

Note: The risk of displaying mixed content is that a non-secure webpage or script might be able to access information from the secure content.

5. Click Yes to proceed. Notice that the page does not render correctly because it did not retrieve the style sheet and images from the CDN using HTTP.

Page | 27

Figure 31Missing elements when viewing only content delivered securely

6. Refresh the page again and this time, answer No to the security warning. Notice that the page renders correctly but in doing so, you were forced to adopt an unsafe practice.

7. Close the browser window to exit the application and detach the debugger.

8. Return to the Management Portal, select the Hosted Services, Storage Accounts & CDN tab and then the CDN option.

9. In the middle pane, select the CDN endpoint that you created earlier for your storage account and then enable the HTTPS checkbox on the ribbon.

Page | 28

Figure 32Enabling HTTPS support for a CDN endpoint

10. After you enable HTTPS support, the change needs to propagate to every node in the CDN. Wait for at least 60 minutes before continuing with the following steps or, if you prefer not to wait, proceed to the next exercise, which is unaffected by the availability of HTTPS. You can return later and complete the current task.

11. Now, open the UrlHelperExtension.cs file in the Helpers folder of the CDNSample project and locate the StaticContent method. In the line of code that generates the URL of a resource in the CDN, change the scheme used from http to https.

Figure 33Mapping static content to an HTTPS endpoint

Page | 29

12. Once again, press F5 to restart the application in the compute emulator. Proceed beyond the untrusted certificate warning, which is unrelated to the issue being addressed in this task, and notice that, this time, you are able to access the home page of the application without encountering any security warnings from the browser.

Figure 34Retrieving HTTPS content from the CDN

Exercise 2: Managing Cache Expiration and Resource Versioning

The time-to-live (TTL) setting for a blob controls for how long a CDN edge server returns a copy of the cached resource before requesting a fresh copy from its source in blob storage. Once this period expires, a new request will force the CDN server to retrieve the resource again from the original blob, at which point it will cache it again.

In this exercise, you will see how to manage the TTL of the resources cached by the CDN and explore a technique that will allow you force the CDN to retrieve updated content from the Blob service whenever a cached resource needs to be updated.

Task 1 – Controlling the Lifetime of a Cached CDN Resource

In this task, you update the application so that for each request for its home page, it processes the image shown on the page to overlay a caption with the current time and then saves the updated image back to blob storage, after setting its TTL to 30 seconds. To show the effect of the time-to-live (TTL) setting on the responses from the CDN, you add a second image to the page whose source is the original blob, allowing you to view the image retrieved from the Blob service and the image returned by the CDN side-by-side.

Page | 30

1. Open Visual Studio in elevated administrator mode from Start | All Programs | Microsoft Visual Studio 2010 by right-clicking the Microsoft Visual Studio 2010 shortcut and choosing Run as administrator.

2. If the User Account Control dialog appears, confirm that you wish to proceed.

3. In the File menu, choose Open and then Project/Solution. In the Open Project dialog, browse to Ex2-CDNVersioning\Begin in the Source folder of the lab, select Begin.sln and then click Open. Alternatively, you may continue with the solution that you completed during the previous exercise.

Note: If you start with the new solution, make sure to configure your CDN endpoint in the StaticContent Extension Method, located in the UrlHelperExtension.cs file inside the Helpers folder.

4. You need to update the connection string to specify storage account settings including your account name and key. To do this, replace [YOUR-ACCOUNT-NAME] and [YOUR-ACCOUNT-KEY] in the ServiceConfiguration.cscfg file, where [YOUR-ACCOUNT-NAME] is the name of your Windows Azure Storage account and [YOUR-ACCOUNT-KEY] is your access key.

Figure 35Configuring your Windows Azure Storage account connection string

Note: A storage account is a unique endpoint for the Windows Azure blob, queue, and table services. You must create a storage account in the Management Portal to use these services.

5. Open the IndexViewModel.cs file in the Models folder of the CDNSample project and insert the following (highlighted) property into the class.

(Code Snippet - Windows Azure CDN- Ex02 IndexViewModel TTL property)

C#

public class IndexViewModel{ public double TTL { get; set; }}

Page | 31

6. Open the HomeController.cs file in the Controllers folder of the application.

7. Add a declaration for the IMAGE_TTL constant to the HomeController class.

(Code Snippet - Windows Azure CDN- Ex02 IMAGE_TTL constant)

C#

[HandleError]public class HomeController : Controller{ const int IMAGE_TTL = 30; ...}

8. Next, insert a SaveImageToStream method into the class, as shown in the following code snippet.

(Code Snippet - Windows Azure CDN- Ex02 SaveImageToStream method)

C#

[HandleError]public class HomeController : Controller{ ...

private void SaveImageToStream(Stream output, string caption) { using (FileStream input = System.IO.File.OpenRead(HttpContext.Server.MapPath("~/content/images/Source.jpg"))) { // overlay caption on input image var image = new Bitmap(input); using (Graphics graphics = Graphics.FromImage(image)) { using (Font font = new Font("Tahoma", 11F, FontStyle.Regular)) { graphics.SmoothingMode = SmoothingMode.AntiAlias; SizeF size = graphics.MeasureString(caption, font, image.Width); graphics.DrawString(caption, font, Brushes.White, image.Width - size.Width - 5, 6); graphics.DrawString(caption, font, Brushes.Black, image.Width - size.Width - 6, 5); } }

// save image to stream

Page | 32

image.Save(output, ImageFormat.Jpeg); } }}

9. Now, insert the UpdateBlob method into the HomeController class, as shown below.

(Code Snippet - Windows Azure CDN- Ex02 UpdateBlob method)

C#

[HandleError]public class HomeController : Controller{ ...

private void UpdateBlob(string caption, double ttl) { // read account configuration settings var storageAccount = CloudStorageAccount.FromConfigurationSetting("DataConnectionString");

var blobStorage = storageAccount.CreateCloudBlobClient(); CloudBlockBlob dstBlob = blobStorage.GetBlockBlobReference("content/images/Destination.jpg"); using (BlobStream output = dstBlob.OpenWrite()) { SaveImageToStream(output, caption); }

// save to blob and set its TTL dstBlob.Properties.ContentType = "image/jpeg"; dstBlob.Properties.CacheControl = "public, max-age=" + ttl.ToString("N0"); dstBlob.SetProperties(); }}

Note: The UpdateBlob method overlays a caption on the original image with the current time. It then saves the updated image back to blob storage, setting its Cache-Control header to define a TTL for the blob of 30 seconds. Note that the TTL value is set to an extremely low value to test its expiration. To perceive the true benefits of the CDN, the TTL would typically be much longer.

10. Locate the Index action and replace its body with the following (highlighted) code.

Page | 33

(Code Snippet - Windows Azure CDN- Ex02 Index action)

C#

[HandleError]public class HomeController : Controller{ const int IMAGE_TTL = 30;

public ActionResult Index() { UpdateBlob(DateTime.Now.ToLongTimeString(), IMAGE_TTL);

DateTime lastRefreshed = (DateTime)(HttpContext.Application["LastRefreshed"] ?? DateTime.MinValue); DateTime currentTime = DateTime.Now; double age = currentTime.Subtract(lastRefreshed).TotalSeconds; if (age > IMAGE_TTL) { HttpContext.Application["LastRefreshed"] = currentTime; age = 0; }

IndexViewModel model = new IndexViewModel() { TTL = IMAGE_TTL - age };

return View(model); }}

Note: The inserted code calls UpdateBlob to overlay the current time on the original image and store the result back into the blob. It then estimates the TTL of the resource in the CDN cache by maintaining a timestamp that records the last time that the user refreshed the page. Whenever the TTL of the resource expires, it resets the estimated value and updates the LastRefreshed timestamp to the current time.

11. Open the UrlHelperExtension.cs file in the Helpers folder of the CDNSample project and add the following (highlighted) method to the class.

(Code Snippet - Windows Azure CDN- Ex02 BlobStorageContent Helper Method)

C#

public static class UrlHelperExtension{

Page | 34

... public static string BlobStorageContent(this UrlHelper helper, string resource) { return "http://" + Microsoft.WindowsAzure.CloudStorageAccount.FromConfigurationSetting("DataConnectionString").BlobEndpoint.Authority + (Microsoft.WindowsAzure.CloudStorageAccount.FromConfigurationSetting("DataConnectionString").BlobEndpoint.IsLoopback ? "/devstoreaccount1" : "") + "/content/" + resource; } ...}

Note: BlobStorageContent is a helper method that generates the URL for a static resource in the Blob service.

12. Open the Index.aspx view in the Views\Home folder.

13. Locate the Content2 placeholder control and insert the following (highlighted) script block immediately below the opening tag, as shown below.

(Code Snippet - Windows Azure CDN- Ex02 DisplayTTL script)

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> $(document).ready(function () { var ttl = <%= Model.TTL.ToString(System.Globalization.CultureInfo.InstalledUICulture) %>; var timer = window.setInterval(function () { if (ttl >= 0) { $('#ttl').text(ttl.toFixed(1) + ' seconds'); } else { $('#ttl').addClass('expired').text('Cache expired!'); window.clearInterval(timer); } --ttl;

Page | 35

}, 1000); }); </script>

<table> ... </table> </asp:Content>

Note: The inserted script implements a countdown timer that estimates the time remaining until the TTL expires.

14. Next, locate the table element, also inside the Content2 placeholder control, and insert two additional rows, as shown (highlighted) in the following snippet.

(Code Snippet - Windows Azure CDN- Ex02 Source Image)

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> ... </script>

<table> <tr> <% Html.RenderPartial("ImageUserControl", Url.StaticContent("images/Destination.jpg")); %> </tr> <tr> <% Html.RenderPartial("ImageUserControl", Url.BlobStorageContent("images/Destination.jpg")); %> </tr> <tr> <td></td> <td class="content"><dl><dt>Estimated TTL</dt><dd id="ttl">&nbsp;</dd></dl></td> </tr> </table> </asp:Content>

Page | 36

Note: The inserted rows display the original image in blob storage and an estimate of the time-to-live (TTL) of the cached image in the CDN. You need Javascript enabled in your browser to view the TTL value.

Important: Before you execute the solution, make sure that the start-up project is set and that the start page of the Web project is blank.

To set the start up project, in Solution Explorer, right-click the CDNService project and then select Set as StartUp Project. To set the start page, in Solution Explorer, right-click the CDNSample project and then select Properties. In the Properties window, select the Web tab and in the Start Action, select Specific Page. Leave the value of this field blank.

15. Press F5 to build and launch the application in the compute emulator. Notice that the page displays both images next to each other with an overlay caption that shows the current time and that initially, both show the same timestamp. The image on the top is the one returned by the CDN, while the one on the bottom corresponds to the source image in blob storage. The Estimated TTL timer shows an approximation of the time-to-live value for the image cached by the CDN.

Figure 36Initial request showing that content cached by the CDN matches the source blob

Page | 37

16. Refresh the page in the browser. Notice the updated timestamp shown for the image retrieved from the Blob service (bottom) while the image returned from the CDN (top) still shows the original timestamp. In addition, the Estimated TTL timer shows the decreasing TTL for the blob cached by the CDN.

Figure 37Request showing that the CDN returns cached content

Note: Because the Cache-Control header for the blob containing the image is set to 30 seconds, the CDN continues to return the cached image until it expires.

17. Refresh the page a few more times before the TTL timer reaches zero to confirm that the image from the CDN remains cached.

Note: The controller action that renders the page calculates the TTL value shown on the page. Note, however, that this is only an estimate and what ultimately determines the TTL of the cached blob is the moment the browser makes its initial request to the CDN to retrieve the image. The value is shown for your convenience but consider that other factors could lead to delays between the time that the server performs the calculation and the time that the browser renders the page that could result in discrepancies. Use this value simply as a rough indicator.

Page | 38

18. Finally, wait until the time-to-live (TTL) expires and then refresh the page one more time. Notice that, once the TTL expires and you refresh the page, both images display the same timestamp again showing that the CDN fetched the image from blob storage and cached it again.

Figure 38Waiting for the blob to expire in the CDN cache

Task 2 – Using Versioning to Invalidate Content Cached by the CDN

In general, it is more efficient to configure resources that rarely change with a relatively long TTL. However, this can cause problems if a resource needs to be updated and the changes propagated immediately to clients. Content stored by a CDN edge server remains in its cache for as long as is specified by the Cache-Control header on the source blob. This means that clients requesting the resource receive a copy from the server’s cache until the resource’s TTL expires. Only then does the server retrieve an updated copy from its source.

Since the CDN caches content based on a resource’s URL, a possible mechanism that allows an application to retrieve updated content consists in updating the URL used so that it is different from the previous one.

In this task, you explore a variation of this technique that involves appending a version identifier to the query string in the URL. This requires you to enable query string support for the CDN endpoint.

1. In the Management Portal, select the Hosted Services, Storage Accounts & CDN tab and then the CDN option.

Page | 39

2. In the middle pane, select the CDN endpoint that you created earlier for your storage account and then enable the Query String checkbox on the ribbon.

Figure 39Enabling HTTPS support for a CDN endpoint

3. After you enable query string support, the change needs to propagate to every node in the CDN. Wait for at least 60 minutes before continuing with the following steps or, if you prefer not to wait, proceed to the next exercise. You can return later and complete the current task.

4. Open the IndexViewModel.cs file in the Models folder of the CDNSample project and add the following (highlighted) properties to the class.

(Code Snippet - Windows Azure CDN- Ex02 IndexViewModel versioning properties)

C#

public class IndexViewModel{ public double TTL { get; set; } public bool EnableCDNVersioning { get; set; } public int Version { get; set; }}

Page | 40

5. Next, open the UrlHelperExtension.cs file in the Helpers folder. Locate the StaticContent method and replace it with the following (highlighted) code. Make sure that you replace the placeholder labeled [YOUR-BLOB-STORAGE-CDN-ENDPOINT] with the CDN endpoint for your storage account, for example, az12435.vo.msecnd.net. Note that the new code replaces the original method and creates an additional overload.

(Code Snippet - Windows Azure CDN- Ex02 StaticContent method)

C#

public static class UrlHelperExtension{ public static string StaticContent(this UrlHelper helper, string resource) { return StaticContent(helper, resource, 0); }

public static string StaticContent(this UrlHelper helper, string resource, int version) { return "http://[YOUR-BLOB-STORAGE-CDN-ENDPOINT]/content/" + resource + ((version > 0) ? "?" + version : ""); } ...}

Note: The new overload for the StaticContent method takes a new parameter named version that it appends to the query string in the generated URL. By updating the version number, the application generates unique URLs that make the CDN go back to the source in blob storage to retrieve the updated content.

6. Open the HomeController.cs file in the Controllers folder and add the following (highlighted) method to the HomeController class.

(Code Snippet - Windows Azure CDN- Ex02 InvalidateCache method)

C#

[HandleError]public class HomeController : Controller{ ... public ActionResult InvalidateCache(bool enabled) { HttpContext.Application["EnableCDNVersioning"] = !(bool)(HttpContext.Application["EnableCDNVersioning"] ?? false);

Page | 41

TempData["InvalidatingCache"] = true; return RedirectToAction("Index"); } ... }

Note: The InvalidateCache action enables versioning the URLs used to access CDN resources. Whenever this method is called, it toggles the state of the EnableCDNVersioning application variable.

7. Now, locate the Index action and replace its body with the following (highlighted) code. Before you do this, take some time to compare the original code and review the changes.

(Code Snippet - Windows Azure CDN- Ex02 Index method with versioning)

C#

[HandleError]public class HomeController : Controller{ const int IMAGE_TTL = 30;

public ActionResult Index() { if (TempData["InvalidatingCache"] == null) { UpdateBlob(DateTime.Now.ToLongTimeString(), IMAGE_TTL); }

int version = (int)(HttpContext.Application["Version"] ?? 0); bool enableCDNVersioning = (bool)(HttpContext.Application["EnableCDNVersioning"] ?? false); if (enableCDNVersioning) { version++; HttpContext.Application["Version"] = version; }

DateTime lastRefreshed = (DateTime)(HttpContext.Application["LastRefreshed"] ?? DateTime.MinValue); DateTime currentTime = DateTime.Now; double age = currentTime.Subtract(lastRefreshed).TotalSeconds; if (age > IMAGE_TTL || enableCDNVersioning) { HttpContext.Application["LastRefreshed"] = currentTime; age = 0;

Page | 42

}

IndexViewModel model = new IndexViewModel() { EnableCDNVersioning = enableCDNVersioning, TTL = IMAGE_TTL - age, Version = enableCDNVersioning ? version : 0 };

return View(model); } ...}

Note: The updated code updates the Version number of the image resource with each request, provided the EnableCDNVersioning flag is set.

8. Finally, open the Index.aspx view in the Views\Home folder of the application.

9. Locate the call to the StaticContent method that generates the URL for the image retrieved from the CDN and append an additional parameter, Model.Version, to use the versioning overload of this method.

Figure 40Adding versioning to the URL of the CDN resources

10. Now, in the bottom row of the table element, insert the following (highlighted) markup into the first column defined by the td HTML tag, as shown below.

(Code Snippet - Windows Azure CDN- Ex02 EnableCDNVersioning UI)

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> ... <table> <tr>

Page | 43

<% Html.RenderPartial("ImageUserControl", Url.StaticContent("images/Destination.jpg", Model.Version)); %> </tr> <tr> <% Html.RenderPartial("ImageUserControl", Url.BlobStorageContent("images/Destination.jpg")); %> </tr> <tr> <td> <label>Invalidate CDN Cache:</label> <dd> <%if (Model.EnableCDNVersioning) { %> Yes | <%=Html.ActionLink("No", "InvalidateCache", new { enabled = false }).ToString()%> <%} else { %> <%=Html.ActionLink("Yes", "InvalidateCache", new { enabled = true }).ToString()%> | No <%} %> </dd> </td> <td class="content"><dl><dt>Estimated TTL</dt><dd id="ttl">&nbsp;</dd></dl></td> </tr> </table> </asp:Content>

Note: The inserted markup creates a link to enable the CDN versioning feature by executing the InvalidateCache action in the controller.

11. Press F5 to build and launch the application in the compute emulator. Refresh the page a few times to confirm that the image is cached by the CDN.

12. Wait until there is ample time before the TTL expires to ensure that the CDN image has not expired. If necessary, let the current TTL expire and then refresh the page.

13. Next, click Invalidate CDN Cache to enable versioning of the URL used to access the image. Notice that the URL of the image downloaded from the CDN now includes a query parameter with a version number and that the image immediately updates to match the source image in blob storage despite the fact that the remaining TTL is not yet zero. This confirms that, because of the unique URL, the CDN is forced to request the image again from the Blob service.

Page | 44

Figure 41Invalidating the CDN cache by versioning the URL of the resource

14. Refresh the page a few more times and notice that each time, the version in the URL increases and that the image retrieved from the CDN is always synchronized with the source blob.

Note: The version number is increased here with each request to demonstrate how to invalidate a cached resource. Typically, you would only update the URL when the source blob changes and you need to invalidate the cache.

Exercise 3: Caching Content from Hosted Services

Previously, you saw content stored in blob storage delivered using the CDN. The Windows Azure CDN is also capable of caching content produced by your hosted services and distributing it to customers around the globe with minimal latency.

In previous exercises, the published content was retrieved from Windows Azure storage, thus allowing you to take advantage of CDN caching even while running the application locally in the cloud emulator.

Page | 45

In contrast, to cache content from hosted services, the CDN must first retrieve it from the application itself and this cannot happen while the application executes in the cloud emulator in your machine. As a result, for this exercise, you publish the application to a hosted service in Windows Azure to allow you to test its use of CDN caching.

To show the caching of content from hosted services, instead of showing an image in blob storage, you update the home page to retrieve an image served by the application itself from one of its controller actions. Once again, the image is processed to overlay a caption with the time of each request. Currently, the CDN requires that content in hosted services that it needs to publish reside under the /cdn folder of the application. To fulfill this requirement, the route for the controller action that generates the timestamped image is configured to map the action to this particular path.

Note: To complete this exercise, you require a Windows Azure Hosted Service and a Windows Azure Storage Account. For more information on how to purchase a Windows Azure subscription, visit http://www.microsoft.com/windowsazure/offers/.

Task 1 – Creating a Hosted Service for the Application

In this task, you create a hosted service in your Windows Azure subscription to publish the application. If you plan to publish the application to an existing hosted service, you may skip this task and proceed to the next one.

1. Navigate to the Windows Azure Management Portal and sign in using your Windows Live ID.

2. In the navigation pane, select the Hosted Services, Storage Accounts & CDN tab followed by Hosted Services, and then click New Hosted Service on the ribbon.

Figure 42Creating a new hosted service at the Windows Azure Portal

Page | 46

3. In the Create a new Hosted Service dialog, if you have multiple subscriptions, pick the subscription where you will create the hosted service for this hands-on lab.

4. Next, enter a Service Name and the URL Prefix for the service. The dialog validates the URL prefix as you type it and warns you if the one you choose is unavailable.

5. Expand the drop down list labeled Choose a region and pick the geographic region where you want to create the service.

6. Finally, in the Deploy pane, select the option labeled Do not deploy, and then click OK.

Page | 47

Figure 43Creating a new hosted service

Task 2 – Enabling the CDN for the Hosted Service

In this task, you enable the Windows Azure CDN in the hosted service.

Page | 48

1. In the Management Portal UI, select the Hosted Services, Storage Accounts & CDN tab followed by the CDN option and then click New Endpoint on the ribbon.

Figure 44Enabling a CDN endpoint for a hosted service

2. In the Create a New CDN Endpoint dialog, expand the drop down list labeled Choose a content provider and locate the name of the hosted service created during the previous task. If your account is associated with multiple subscriptions, choose the one where you created the service. Check the options labeled Enable CDN and Query String, leave HTTPS unchecked, and then click Create.

Page | 49

Figure 45Creating a new CDN endpoint

3. Read the message and then click Close to dismiss the Enable CDN message box.

Figure 46Confirming the creation of the CDN endpoint

4. You may receive the following warning alerting you that there is currently no deployment in the production environment of the hosted service. Click Yes to dismiss the dialog and proceed. You will deploy an application to the hosted service shortly.

Page | 50

Figure 47Message warning about the missing deployment

5. After you create the CDN endpoint, the UI in the Management Portal updates to shows the status of the operation.

Page | 51

Figure 48CDN endpoint creation status

6. Wait until the CDN endpoint status changes to Enabled. Select this endpoint in the middle pane and take note of its Default HTTP endpoint in the Properties window. You will need this value shortly to configure the application.

Page | 52

Figure 49CDN endpoint properties window

Task 3 – Generating Dynamic Content

In this task, you update the lab’s solution to show an image that the application generates in one of its controller actions alongside another image—also generated by the same controller action—but whose source is the CDN endpoint for the hosted service.

1. Open Visual Studio in elevated administrator mode from Start | All Programs | Microsoft Visual Studio 2010 by right-clicking the Microsoft Visual Studio 2010 shortcut and choosing Run as administrator.

2. If the User Account Control dialog appears, confirm that you wish to proceed.

3. In the File menu, choose Open and then Project/Solution. In the Open Project dialog, browse to Ex3-HostedServiceCaching\Begin in the Source folder of the lab, select Begin.sln and then

Page | 53

click Open. Alternatively, you may continue with the solution that you completed during the previous exercise.

Note: If you start with the new solution, make sure to configure your CDN endpoint in the StaticContent Extension Method, located in the UrlHelperExtension.cs file inside the Helpers folder.

4. Open the HomeController.cs file in the Controllers folder of the application and insert the following controller action into the HomeController class.

(Code Snippet - Windows Azure CDN- Ex03 GetImage action)

C#

public class HomeController : Controller{ ... [OutputCache(VaryByParam = "", Duration = IMAGE_TTL, Location = System.Web.UI.OutputCacheLocation.Downstream)] public ActionResult GetImage() { string caption = DateTime.Now.ToUniversalTime().ToLongTimeString();

Stream output = new MemoryStream();

SaveImageToStream(output, caption);

output.Seek(0, SeekOrigin.Begin); return new FileStreamResult(output, "image/jpeg"); } ...}

Note: The GetImage controller action reads an image from disk, overlays a caption with the current time, and then writes the binary content of the image to the response stream after setting the content type to indicate that the response contains an image file.

The OutputCache attribute that decorates the controller action ensures that the Cache-Control header is set appropriately to determine the TTL of the response. Notice that it uses the IMAGE_TTL constant to set its value, which is currently set to 30 seconds.

5. Open the UrlHelperExtension.cs file in the Helpers folder of the CDNSample project and add the following (highlighted) method to the class, substituting the placeholder labeled [YOUR-HOSTED-SERVICE-CDN-ENDPOINT] with the Default HTTP endpoint that you recorded in the

Page | 54

previous task when you enabled the CDN in your hosted service, for example, az12345.vo.msecnd.net.

(Code Snippet - Windows Azure CDN- Ex03 HostedServiceContent helper method)

C#

public static class UrlHelperExtension{ ... public static string HostedServiceContent(this UrlHelper helper, string resource, int version) { return "http://[YOUR-HOSTED-SERVICE-CDN-ENDPOINT]/" + resource + ((version > 0) ? "?" + version : ""); }}

Note: HostedServiceContent is a helper method that generates the URL for a resource served by the application and delivered by the CDN.

6. Open the Index.aspx view in the Views\Home folder.

7. Locate the table element inside the Content2 placeholder control and replace the first two rows with the following (highlighted) markup.

Notice that you are replacing the origin of the top image that originally pointed to a CDN endpoint in blob storage with the CDN endpoint of the hosted service and the source of the bottom image, which originally pointed to blob storage, with the URL of the GetImage controller action.

(Code Snippet - Windows Azure CDN- Ex03 Image sources)

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script type="text/javascript"> ... </script>

<table> <tr> <% Html.RenderPartial("ImageUserControl", Url.HostedServiceContent("GetImage", Model.Version)); %> </tr> <tr>

Page | 55

<% Html.RenderPartial("ImageUserControl", Url.Action("GetImage")); %> </tr> ... </table> </asp:Content>

Note: The updated rows display an image displayed from the CDN as well as its source retrieved directly from the GetImage controller action of the application.

8. Finally, open the Global.asax file in the CDNSample project, locate the RegisterRoutes method, and then add the following (highlighted) code to register a new route that maps the /cdn/GetImage path to the Home controller.

(Code Snippet - Windows Azure CDN- Ex03 CDN route)

C#

public class MvcApplication : System.Web.HttpApplication{ public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute( "CDN", // Route name "cdn/GetImage", // URL with parameters new { controller = "Home", action = "GetImage", id = UrlParameter.Optional } // Parameter defaults );

routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults );

}}

Note: The content in your hosted service published using the CDN needs to reside under the /cdn folder root of the application.

Page | 56

Task 4 – Publishing the Application to Windows Azure

In this task, you update the storage connection strings to point to your Windows Azure storage account.

1. In Solution Explorer, expand the Roles node inside the CDNService cloud project and then double-click the CDNSample role.

2. In the CDNSample [Role] window, switch to the Settings tab, locate the DataConnectionString setting and replace the placeholder labeled [YOUR-ACCOUNT-NAME] with the name of your Windows Azure storage account and the placeholder labeled [YOUR-ACCOUNT-KEY] with its shared key.

Figure 50Configuring the application for deployment

3. Repeat the previous step to configure the storage account credentials for the Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString setting. This is the storage account used for diagnostics.

4. Press CTRL + S to save your changes.

5. Publish the application to the hosted service that you created for this hands-on lab during the first task of this exercise. If you have not previously deployed an application to Windows Azure, you can find a detailed walkthrough describing the procedure in Appendix A: Deploying an Application to Windows Azure.

Task 5 – Testing the Application in the Cloud

In this task, you browse the application published in Windows Azure to verify that the CDN caches the content retrieved from its controller action.

Page | 57

1. Open a browser window and navigate to the URL of the application at http://[yourservice].cloudapp.net, where [yourname] is the name that you chose when you created the hosted service.

Notice that the page displays both images next to each other with an overlay caption that shows a timestamp. The Estimated TTL timer shows an approximation of the time-to-live value for the image cached by the CDN.

Note: The CDN retrieves the top image from the controller action before it caches it whereas the browser retrieves the bottom image when it refreshes the page. These actions happen at different times; therefore, the timestamp in both images may not necessarily match, though they should be close.

Figure 51Initial request showing that content cached by the CDN and retrieved from the application

2. Refresh the page in the browser.

Page | 58

Notice the updated timestamp shown for the image retrieved from the controller action in the application (bottom) while the image returned from the CDN (top) still shows the previous timestamp. In addition, the Estimated TTL timer shows the decreasing TTL for the image cached by the CDN.

Figure 52Request showing that the CDN returns cached content

Note: Because the Cache-Control header for the image is set to 30 seconds, the CDN continues to return the cached image until it expires.

3. Refresh the page a few more times before the TTL timer reaches zero to confirm that the image from the CDN remains cached.

Note: The controller action that renders the page calculates the TTL value shown on the page. Note, however, that this is only an estimate and what ultimately determines the TTL of the cached blob is the moment the browser makes its initial request to the CDN to retrieve the image. The value is shown for your convenience but consider that other factors could lead to

Page | 59

delays between the time that the server performs the calculation and the time that the browser renders the page that could result in discrepancies. Use this value simply as a rough indicator.

4. Finally, wait until the time-to-live (TTL) expires and then refresh the page one more time. Notice that the timestamp for both images is updated, confirming that the CDN updated the content by accessing the controller action again.

Figure 53Waiting for the blob to expire in the CDN cache

5. Next, click Invalidate CDN Cache to enable versioning of the URL used to access the image. Notice that the URL of the image downloaded from the CDN now includes a query parameter with a version number and that the timestamp of the upper image immediately updates.

6. Refresh the page a few more times and notice that each time, the version in the URL increases and that the timestamp on the image retrieved from the CDN updates each time. This confirms

Page | 60

that, because of the unique query string in the URL, the CDN is forced to request the image again from the hosted service.

Summary

By completing this hands-on lab, you learned techniques that allow you to use the Windows Azure Content Delivery Network (CDN) to deliver content in your Web applications from strategically placed locations, providing maximum bandwidth to your users. Using the CDN, you published content stored in Windows Azure blob storage account as well as produced by your hosted service and saw how to set the time-to-live (TTL) in order to control for how long CDN edge servers returns a copy of the cached resource before requesting a fresh copy from its source. Finally, you explored a technique that allows you to invalidate content cached by the CDN after you update its source.

Appendix A: Publishing an Application to Windows Azure

Visual Studio provides two options for publishing your application to Windows Azure:

Create Service Package Only

Publish your Windows Azure project to Windows Azure

If you choose the first option, you can upload the generated package using the Management Portal. The following walkthrough describes the second option and shows you how to deploy your application directly from Visual Studio.

Task 1 – Configuring your Windows Azure Management API Credentials in Visual Studio

In this task, you create a management certificate using Visual Studio and then upload it to the Windows Azure Portal. The procedure described here is necessary to be able to publish services to Windows Azure directly from Visual Studio and you only need to complete it once. If you have already configured the credentials to access your subscription, you may skip this task and continue with the next one.

1. In Solution Explorer, right-click the Windows Azure project and select Publish.

Page | 61

Note: Ensure that you click the Windows Azure cloud project and not one of its associated roles.

2. In the Publish Windows Azure project dialog, expand the drop down list labeled Credentials, and then select Add.

Figure 54Configuring Windows Azure account credentials

3. In the Windows Azure Project Management Authentication dialog, expand the drop down list below the label Create or select an existing certificate for authentication and select one of the existing certificates or choose Create.

Note: A certificate is necessary to create the credentials for accessing your Windows Azure subscription. If Visual Studio cannot find a suitable certificate in your personal certificate store, it will prompt you to create a new one.

4. If you chose to create a certificate in the previous step, in the Create Certificate dialog, enter a suitable name that will allow you to identify it, for example AzureMgmt, and then click OK.

Figure 55Creating a new management certificate

Page | 62

5. Back in the Windows Azure Project Management Authentication dialog, choose the certificate from the drop down list.

Figure 56Choosing a certificate for authentication

Note: The drop down list contains all the certificates that are suitable for authentication with the Azure Management API.

6. Now, click the link labeled Copy the full path to store the path of the certificate public key file to the clipboard.

Page | 63

Figure 57Copying the path of the certificate file generated by Visual Studio to the clipboard

Note: Visual Studio stores the public key file for the certificate it generates in a temporary folder inside your local data directory.

7. Click OK to dismiss the confirmation message box and then save the path in the clipboard to a safe location. You will need this value shortly, when you upload the certificate to the portal.

Figure 58Confirmation that the file path was copied to the clipboard successfully

Page | 64

8. Next, in the Windows Azure Project Management Authentication dialog, click the link labeled Windows Azure Portal to open a browser window and navigate to the Management Portal.

Figure 59Navigating to the Windows Azure Management Portal in your browser

Page | 65

9. At the Management Portal, if you have not already done so, sign in using your Windows Live ID.

10. Select the Hosted Services, Storage Accounts & CDN option, click Management Certificates, and then click Add Certificate on the ribbon.

Figure 60Adding a new management certificate to your subscription

11. In the Add New Management Certificate dialog, click Browse, change the file name to the path for the public key certificate file (.cer) generated by Visual Studio, which you copied earlier in this task to your clipboard, and then click Open. Click Done to upload the certificate to the Management Portal.

Figure 61Uploading an API certificate to the Management Portal

Page | 66

12. In the Properties pane, copy your subscription ID to the clipboard. You will need it for the next step.

Figure 62Retrieving your subscription ID from the Management Portal

13. To complete the setup of your credentials, return to the Windows Azure Project Management Authentication dialog in Visual Studio and paste the subscription ID value that you retrieved from the Management Portal into the corresponding text box.

Page | 67

Figure 63Entering your Windows Azure subscription ID

14. Finally, provide a name to identify your credentials, for example MyWindowsAzureAccount, and then click OK.

Figure 64

Page | 68

Saving the Windows Azure credentials

15. After you confirm the creation of the new credentials, Visual Studio uses them to access the management service to verify that the information that you provided is valid and notifies you if authentication fails. If this happens, verify the information that you entered making sure that you have uploaded the correct certificate to the Management Portal and then re-attempt the operation.

Figure 65Authentication failure while accessing the management service

Task 2 – Configuring Remote Desktop

In this task, you enable remote desktop access to your hosted service’s role instances. This task is optional.

1. In Solution Explorer, right-click the Windows Azure project and select Publish.

Note: Ensure that you click the Windows Azure cloud project and not one of its associated roles.

2. In the Publish Windows Azure project dialog, click Configure Remote Desktop connections.

Page | 69

Figure 66Opening the Remote Desktop Configuration UI

3. In the Remote Desktop Configuration dialog, check the option labeled Enable connections for all roles.

4. Expand the drop down list labeled Create or select a certificate to encrypt the user credentials and select Create.

Note: If you have previously created a certificate for encrypting remote desktop user credentials, you may choose it instead.

5. In the Create Certificate dialog, enter a name to identify the certificate, for example, AzureRemote, and then click OK.

Page | 70

Figure 67Creating a certificate for Remote Desktop connections

6. Now, back in the Remote Desktop Configuration dialog, choose the newly created certificate from the drop down list, enter the name of the user that you will use to connect remotely to your role–this can be any name of your choice–enter a password and confirm it. Optionally, you may choose an account expiration date.

Figure 68Configuring Remote Desktop settings

Page | 71

7. Before you close the dialog, click View located next to the certificate drop down list. In the Certificate dialog, switch to the Details tab and click Copy to File to start the Certificate Export Wizard.

Figure 69Exporting the remote desktop certificate

8. Follow the wizard to export the certificate to a file making sure that you choose the option to export the private key. Save the resulting file to a suitable location in your hard disk. You will need to upload this file to the Management Portal shortly.

Page | 72

Figure 70Exporting the certificate’s private key

9. Click OK to close the Remote Desktop Configuration dialog.

Page | 73

10. Return to the Management Portal UI, select the Hosted Services, Storage Accounts & CDN option, click Hosted Services, expand your hosted service node in the middle pane to display and then select the Certificates node. Then, click Add Certificate on the ribbon.

Figure 71Configuring hosted service certificates

Page | 74

11. In the Upload an X.509 Certificate dialog, click Browse and navigate to the location where you stored the certificate that you created and exported when you configured remote desktop, enter the assigned password, confirm it, and then click Create.

Figure 72Uploading the Remote Desktop certificate to the service

Task 3 – Publishing the Application to a Hosted Service

In this task, you publish the application to the hosted service package directly from Visual Studio.

1. In Solution Explorer, right-click the Windows Azure cloud project and select Publish.

Note: Ensure that you click the Windows Azure cloud project and not one of its associated roles.

2. In the Publish Windows Azure project dialog, select the credentials for your Windows Azure subscription from the drop down list.

3. After you select the credentials, the dialog populates the drop down list labeled Windows Azure environment with the information for all the hosted services configured in your Windows Azure account. Select the hosted service and the slot, Production or Staging, where you want to publish the application.

4. Similarly, the dialog populates the drop down list labeled Publish Storage Account with all the storage services in your Windows Azure account. Select the storage service that you wish to use for this purpose.

Page | 75

Note: To publish a service, Visual Studio first uploads the service package to Azure storage and then publishes the service from there.

5. Update the Publish Label to identify the deployment in the Management Portal UI or accept the one suggested in the dialog.

6. Optionally, enable the check box labeled Enable IntelliTrace for .NET 4 roles. This allows you to capture detailed trace logs of your running service in the cloud that you can download to your desktop to perform historical debugging.

7. Finally, click OK to begin the deployment process.

Figure 73Publishing the application to Windows Azure

Page | 76

Note: The deployment process is asynchronous so you can continue to work while you wait for the deployment to complete. You can monitor the progress of the deployment from the Windows Azure Activity log and the status of the Hosted Service from the Windows Azure Compute node in the Server Explorer window.

If this window is not visible, in the View menu, point to Other Windows, and then select Windows Azure Activity Log. By default, the log shows a descriptive message and a progress bar to indicate the status of the deployment operation. To view detailed information about the operation in progress, click the green arrow on the left side of the activity log entry.

The information provided includes the deployment slot, Production or Staging, the Website URL, the Deployment ID, and a History log that shows state changes, including the time when each change occurred.

Figure 74Monitoring the progress of the deployment operation

Page | 77