Introduction
This article is the third post of a series that show a use case of using ASP.NET razor pages, blob storage and Azure CDN.
In the first article https://lemtirisalah.com/using-azure-blob-storage-and-azure-cdn-in-asp-net-5-razor-pages-part-i/ , we started by initiating the ASP.NET Razor page and using Azure Storage emulator locally for development purposes, then, in the second article, we deployed this web application and the storage account to Azure.( https://lemtirisalah.com/using-azure-blob-storage-and-azure-cdn-in-asp-net-5-razor-pages-part-ii/ ).
In today’s topic, we will discuss the usage of Azure CDN to deliver our content worldwide.
If you didn’t have a chance to check my previous posts, I highly recommend to go back and check the articles as we will be using the same resources.
As a reminder, below is the target architecture:
For scripting, I am using Azure CLI and PowerShell. You can feel free to change to another scripting tool depending on your choice and operating system.
Context
Once I deployed my web application and Azure Storage in Azure, I chose in purpose to deploy them to West US2 location to have the biggest distance between my application infrastructure and my current location, which Is based in France, so I can compare the time needed for my application to get the content from the Storage account directly, and then from the CDN endpoint. Furthermore, we are going to use a large file (~10 MB) so we can measure the difference.
Motivation
Azure Storage account is a very powerful PaaS service provided by Azure to store files , data, queuing, Data tables and blob containers. However, it is not meant to deliver content for web applications scenarios, because it doesn’t have any caching mechanism neither multiple access points for proximity delivery.
This is where Azure CDN takes over to manage content delivery.
Microsoft Azure CDN is a content delivery network solution for delivering high bandwidth content. It can be hosted in Azure or any other location. With Microsoft Azure CDN, you can cache static objects loaded from Azure Blob Storage, a web application, or any publicly accessible web server, using the closest point of presence (POP) server. For more information about CDN , visit this link : https://docs.microsoft.com/fr-fr/azure/cdn/
So, for our case study, instead of hitting directly our storage account, we will use a CDN end point that will resolve the nearest POP to get the files we want based on proximity.
We need to create our CDN profile to our resource group, and create an endpoint that will points to our storage account. The CDN will take in charge the creation of POP and all the caching operations to optimize delivery.
NOTE : The number and locations of POP depends on the pricing tier. For more information about the sku, please visit this link : https://docs.microsoft.com/fr-fr/azure/cdn/cdn-pop-locations
Create the CDN profile and end point
We will deploy the CDN and the end point in the same resource group “test-cdn-app-service-rg” we created earlier in our previous posts.
Run this command to create the CDN.
$profil_name="CDN-test"
az cdn profile create --name $profil_name --resource-group $rg --location westeurope --sku Standard_AkamaiTIP : The pricing tier (defines a CDN provider, feature list and rate) of the CDN profile. Defaults to Standard_Akamai. Accepted values: Custom_Verizon, Premium_ChinaCdn, Premium_Verizon, Standard_Akamai, Standard_ChinaCdn, Standard_Microsoft, Standard_Verizon. For more information about the CDN profile visit this link : https://docs.microsoft.com/en-us/cli/azure/cdn/profile?view=azure-cli-latest#az_cdn_profile_create
Then, create the CDN end point :
az cdn endpoint create --name " blobsalah" --resource-group $rg --profile-name $profil_name --origin testcdnappservicest.blob.core.windows.net --origin-host-header testcdnappservicest.blob.core.windows.netIMPORTANT : According to Microsoft, Azure CDN origins, such as Web Apps, Blob Storage, and Cloud Services, require host header value to match the origin hostname.
NOTE : The CDN requires some time before being available, as it requires propagation to POP worldwide. It may take up to 24 hours sometimes.
Test your CDN endpoint
Now that you have created your CDN, make sure that the file you uploaded to the storage account is available from your CDN endpoint by accessing this link : https://blobsalah.azureedge.net/testcdnappservicestcontainer/img1.jpg
If you are able to download the file or visualize it in your browser, you are good to go for the next step.
Test performance
NOTE : For my test I am using Google chrome, but you can make this test with any browser you want.
First, Update the file Images.cshtml in your web application to get the file “img1” from the storage account and from the CDN endpoint. (So we can compare the time needed to download img1 from both sources).
@page
@model Web.Pages.ImagesModel
@{
}
<img src="https://testcdnappservicest.blob.core.windows.net/testcdnappservicestcontainer/img1.jpg" alt="Sample Photo" />
<img src="https://blobsalah.azureedge.net/testcdnappservicestcontainer/img1.jpg" alt="Sample Photo 2" />Then, deploy the new change to the App service.
Once ready, Open your browser in incognito mode and access your web application: https://test-cdn-app-service-wa.azurewebsites.net/
Make sure to hit “F12”, or right click in your mouse and select “Inspect”, and then click in the network tab.
Now click in “List images” and you will see the time needed to download “img1” from the storage account and from the CDN endpoint :
As you can see the download time from the CDN endpoint took 443ms compared to 7.51s from the storage account directly, which greatly improves the performance!!
In the first case the download took so much time because I am accessing an image located in the region west US2 which is 8.271,13Km far away from my current location and the image size is around 10 MB.
In the second case, the download was so quick because I am accessing the file from a close POP to my real location which is optimized for content delivery.
Conclusion
In this article, we went through the steps of establishing a CDN for our application to deserve our content across the world, and make a proof of concept about CDN performance.
The aim of the series “Using Azure blob storage and Azure CDN in ASP.NET 5 Razor pages”, is to focus on the importance of implementing Azure Storage account to host our web files, such as images or videos, and establishing a CDN to serve our content in a multi-region user context, and the simplicity of integrating Azure storage within our Razor web application whether in development or production environment.
Here are the links of the previous posts if you missed it :
PART I : https://lemtirisalah.com/using-azure-blob-storage-and-azure-cdn-in-asp-net-5-razor-pages-part-i/
PART II : https://lemtirisalah.com/using-azure-blob-storage-and-azure-cdn-in-asp-net-5-razor-pages-part-ii/
Leave a comment if you find this article useful, and I will be pleased to answer your questions if you have any problem.
Salah.
Be First to Comment