- [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 mycatendpoint.azureedge.net. 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 mywebapp1973.azurewebsites.net, 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 azureedge.net 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.