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.
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.
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.
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).
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.
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.
