The Azure Content Delivery Network (CDN) is a service that allows you to send audio, images, and other static files faster and more reliably to customers across the globe. It does this by utilizing a worldwide network of servers that are capable of serving content from the nearest node relevant to each user (an updated list of all current node location can be found here). This can dramatically increase speed and availability, resulting in a significant improvement to user experience. CDNs are commonly used to serve images and scripts for websites, and now, Azure Websites supports direct integration with CDN. This blog post will walk you through setting up a basic website, integrating CDN support, and then using Developer Tools to see our CDN in action.

 

Create a website in the portal

• Login to the Azure Management Portal
• Click the +New icon on the bottom left of the dashboard
• Select Compute – Web Site – Quick Create
• In the URL box provide a unique name for your web site
• Click the Create Web Site button

 

Now a website is created and should be visible within the portal’s Web Sites tab

 

Create a CDN

Now that your website is setup you’ll want to create an associated CDN

• Click the +New icon once again
• Select App Services – CDN – Quick Create
• Select the Subscription associated with your website in the dropdown
• Click the Origin Domain dropdown
• You should see a category, Web Sites, and your associated site URL under there
• Select your site and click Create

 

The CDN will be created and can be viewed within the portal’s CDN tab

Note: the original site URL is on the far right, and the URL for the associated CDN is to its left.

Now try clicking the link to access the CDN

Oh no! What did we do wrong? Actually, nothing. The CDN Network can take up to 60 minutes to propagate, so you may  receive a status code 400 (Bad Request) or 404 (Not Found) until it comes online.

Don’t worry though, you will still be able to complete this tutorial and can check back later to see the results once the CDN is available.

Note: In general there is no reason to access the CDN directly (simply reference it in the source for your web page) but clicking the link directly is an easy way to see if the URL has come online yet.

 

Update website contents to fetch from CDN

For this section we will need a simple web page to host on our site.  Deploying your own content to an Azure site is out of the scope of this tutorial, but you can choose any one of the (many) methods detailed here.

If you want to follow along, however, below is the file structure + source for my sample page.

File Structure

root-site-folder
  | index.html
  | Images
    | panda.jpg

index.html

    
        
        
    
    
        
Hello Panda

        
Web Server Hosted Image:
        

        
CDN Hosted Image:
        
        
    

 

Our basic page loads the same image twice, once from the web server directly, and the other time from the CDN.

To access cached content on the CDN, use the CDN URL provided in the portal. The address can be found in the portal’s CDN tab under the URL column, and will look similar to the following:

https://<CDNNamespace>.vo.msecnd.net/

 

Also, notice the pattern for accessing static content from the CDN. As the CDN has been auto-configured relative to your website, its file structure is identical. Therefore, if you want to access static content through the CDN instead of the web server, you simply need to replace the site-relevant URL with a similar CDN-relevant URL in the source tag, like so:

Site-relevant:

CDN-relevant:

 

Now publish the web site.

If everything worked correctly you should see both images load, like below:

If however you see this:

It is likely that your CDN still hasn’t finished coming online and you will need to wait until that happens and refresh the page.

 

See the Results

You can see the difference in the load times of the two images by monitoring the network activity in Developer Tools. This tutorial will be using Internet Explorer, but the steps should be identical in all major browsers.

• Open IE
• Navigate to your site’s URL
• Press F12 to open Developer Tools
• Click the Network tab
• Toggle the record button to Capture Network Traffic
• Refresh the page

Notice the difference in loading time between the server-hosted and CDN-hosted image:

Note: These numbers will vary greatly depending on location of the web server, location of the end-user, and general server load

 

Conclusion

You should now have a clear understanding of how to set up a CDN endpoint and integrate it with your Azure Website, as well as how to use some basic browser tools to measure its effectiveness. For more information on customizing and working with your CDN, see the documentation, here.