You are currently viewing Azure CDN – With .NET Core 5 Web Application

Azure CDN – With .NET Core 5 Web Application

We already have created an Azure CDN profile and created an endpoint which can be used with Azure Storage Account. In this post, we are going to create a web application, deploy it as Azure Web App, and then configure CDN with it.

Create Web App

Create a ASP .NET Core web application (MVC) using visual studio. Then publish it as a web app in Azure. If you need to know the detailed steps, refer this post to publish the Azure Web App.

Create Azure CDN Profile

Refer this post for creating Azure CDN profile.

Associate Azure CDN

Now, navigate to the Azure web app and then select Networking from the left navigation. On the new panel, click on Configure Azure CDN for your app.

Azure Portal: Configure Azure CDN on Azure Web App

On the new panel, you need to provide details:

  • Select existing CDN profile demo-cdn-profile
  • Provide the CDN endpoint name
  • Provide the origin hostname (which is URL of the Azure app service)

Once these inputs are provided, click on Create.

Azure Portal: Azure CDN Endpoint for Azure Web App

After the CDN is populated (it took 30 min for me), you would be able to see the web app even using the CDN endpoint as shown in below snapshot.

Azure CDN: Showing the same web app

Modify Web App and Publish Again

In order to understand how the CDN caching works, we can modify the web app to show name Sample App v3 and publish to the Azure app service. Confirm that the app service URL is showing the latest version.

Now, CDN has already cached a version and it will be there for next 7 days. So CDN endpoint will continue showing the older version (v2 in my case).

Azure CDN: Showing older cached version of site

Purge Cached Contents

Now, in order to flush data from Azure CDN cache, let’s navigate to the CDN profile and open the Overview blade. Next, click on Purge button. This would open a new right side panel.

On the new panel, select the web app end point. Then you can either select purge all, or you can provide the relative paths under Content path list and then click on Purge to purge selective cached data.

Azure CDN: Purge the cached data

After the data is purged, when you try to access the CDN endpoint for the web app, you should be able to see the latest web page.

I hope you find this information useful. Let me know your thoughts.

Leave a Reply