Enhancing a web application by using the Azure Content Delivery Network

Title: Enhancing a web application by using the Azure Content Delivery Network

Introduction: All my articles are compiled into simple steps with detailed screen shots and elaborative description. By following these steps even, a novice programmer should be able to replicate scenario. Please go through the steps and provide your valuable feedback to make my next articles more clearer and intent.

Note: I took help of various internet sources while researching this item. Credit goes to internet and Microsoft communities. This is one of the topics in Azure certification.

This is my 15th article on Azure.

Please follow below links for my previous Azure articles

Azure AD and User Management

Azure Key Vault With Logic App

Azure Key Vault With Data Factory

Accessing Azure Blob Containers

Working With Azure MSMQ

Key Vault & Secrets

Function App

Azure Work Loads using Images and Containers Azure API Management

Follow below mentioned steps to improve performance of web application using Azure CDN end points.

What is CDN? Azure Content Delivery Network (CDN) lets you reduce load times, save bandwidth, and speed responsiveness—whether you’re developing or managing websites or mobile apps, or encoding and distributing streaming media, gaming software, firmware updates, or IoT endpoints.

After completing this blog, you will be able to do

Create Web application
Create CDN profile
Define end points for CDN
Use these endpoints in web application

Sample Description: We are going to create a web application and a storage account. We will create a CDN profile. Define endpoints for CDN and use them to map storage account and web application.

Step 1: Open Azure portal (https://portal.azure.com)

Step 2: Create a storage account. We will use this storage account to store our multimedia content like images and videos.

Step 3: Access the storage account created in previous step and create a blob container.

Step 4: Access blob container and upload images.

Step 5: Go to properties blade of the blob container and record the value of the URL. We will use this value in later steps.

Step 6: Create another blob and upload the video in to it. Repeat the steps 3,4 & 5.

Step 7: Now we will work on CDN part. First, we need to register CDN provider.

Open the cloud shell from azure portal. If you are accessing it for first time, it will ask for the configuration. Go ahead and configure.

User below command to register CDN. Registering CDN provider is important, so that we can use this in next steps.

“az provider register –namespace Microsoft.CDN”

Step 8: Go to azure portal and create a Content Delivery Network profile as shown below.

Search with Keyword “CDN” and click on create.

Step 9: CDN is ready. Now we need to create endpoints for CDN. Access CDN, we created in earlier step and define endpoints. If you select origin type as storage, it will show storage account we created earlier.

Step 10: Create another end point for video as show similar above.

In previous step and this step, we are creating 2 endpoints- 1 for media blob and other for video blob.

Step 11: Go to azure portal and create a web application. This will application will retrieve the content from storage account and displays.

Step 12: After creating web application access, go to properties blade and copy the URL.

Step 13: Access web app create in previous step and you will see error messages and mentioned below. Until you fix these error messages your web app will not work

Step 14: Go to web application> Settings> Configuration and create a “New application setting”. Provide the url of the media blob we created in previous steps.