Adding Azure CDN to an Azure Web App
Start course

This course provides an overview of Redis Cache and how to create a Redis Cache instance in Azure. With Redis Cache deployed in Azure, we’ll then connect an application to the cache.
Next, we’ll walk through the process of storing and retrieving data in Redis Cache. After covering Redis Cache, we’ll walk through an overview of what CDN is and what it’s used for. We’ll then develop some code for leveraging CDN. As we wrap up the course, we’ll cover the process for invalidating data in both Redis Cache and in a CDN.

Intended Audience

This course is intended for IT professionals who are interested in earning Azure certification and those who need to incorporate Redis Cache or CDN into their solutions. To get the most from this course, you should have at least a moderate understanding of what caching is and why it’s used.

Learning Objectives

By the end of this course, you should have a good understanding of what Redis Cache and CDN are and what purposes they serve. You’ll also know how to connect to each from applications and how to purge or invalidate data in both.


- [Instructor] In this demonstration, we're going to add an Azure CDN to an existing Azure web app. What we're going to do is deploy a CDN profile in Azure, along with an endpoint for our web app. The web app that we're going to use is a basic static HTML page that we're going to use to demonstrate the functionality of the CDN and how to purge CDN content. 

On the screen, you can see my dashboard for my CDNLab. We already have a basic web app deployed. It's a static HTML page, and it's essentially a picture of a cat, because I like cats, and a little bit of text at the bottom. The website in its starting form displays a sentence called "This is a cat!!" in red text. We're going to use the color of this text to demonstrate how a CDN caches content from a web application. So let's bounce back over into my dashboard here. 

The first thing I need to do is create a CDN profile and an endpoint. So let's go ahead and click Create a resource here, and search for CDN. We'll deploy a CDN, and create it. And we'll call it mycdnlabdemo. And we'll put this in our CDNLab Resource group. And for the Pricing tier, we're going to use the Standard Akamai. This is because we need to be able to configure custom rules later on. 

Now to create our CDN endpoint, which points to our application, we'll click the checkbox, and then give our CDN endpoint a name. This needs to be unique across the entire Azure landscape. So I'll just call it And what we're going to do is specify an Origin type of Web App, since it's a web app we're pointing to. And we'll browse to the Origin hostname, which is themywebapp1973, which you saw up here. So we'll go ahead and create that CDN profile and endpoint. 

So now that we have our CDN profile created, what we can do is browse to our CDN and see that our endpoint is running. If we click on our endpoint here, we can get the hostname. So we'll copy this and paste it into a new tab. Now the name of our file here, our HTML page, is CDNDemo.htm. So we'll append that to our cache. So as you can see, our CDN cache is the same as our application, our web app. So now that we've confirmed that our cache and our live site both match, what we're going to do is make a change to the website itself. So to do this, I'm going to drop down into my FTP client here, which is already connected to my web app. If I open up my CDNDemo page on my live site, I can see that I'm specifying a red color for the text. We're going to go ahead and change this to blue, and we'll save it. 

Now if I bounce back up to my web app itself, which is denoted by, if I refresh my page here, I now have blue text. However, if I go to my endpoint in my CDN, which is denoted by my endpoint name with an attached to it, and refresh, the text is still red. This is because the cache content hasn't been updated yet. Now the CDN, in and of itself, will periodically refresh its content from the origin webpage. This is based on the TTL configuration. That being said, the default TTL is seven days. 

So there will be times when content is updated on a website that we may wish to purge the cached content from our CDN. This is one of those cases. So what we're going to do is purge the content from our CDN by browsing over, back into our Azure portal, and into our endpoint here. If we roll back out into our demo here, we can see our endpoint listed. What we can do is click Purge at the top here. And I'm going to purge the CDNDemo. And we'll purge it. Now this takes a minute or so to do, but once this happens, we'll go back up and refresh our endpoint here to see if it's updated. So let's bounce back up into our endpoint here and do a refresh. 

And there you have it. So by purging the CDN cache, we've allowed it to recache the new content from the source website. So now you know a little bit about how to deploy your CDN profile, how to create that endpoint that references the production website, and how to purge your CDN content to ensure it pulls down the latest version of the content so that it can serve it up properly.

About the Author
Learning Paths

Tom is a 25+ year veteran of the IT industry, having worked in environments as large as 40k seats and as small as 50 seats. Throughout the course of a long an interesting career, he has built an in-depth skillset that spans numerous IT disciplines. Tom has designed and architected small, large, and global IT solutions.

In addition to the Cloud Platform and Infrastructure MCSE certification, Tom also carries several other Microsoft certifications. His ability to see things from a strategic perspective allows Tom to architect solutions that closely align with business needs.

In his spare time, Tom enjoys camping, fishing, and playing poker.