Post
Ask Question

Azure CDN With Azure Storage

Introduction

Content Delivery Network is a distributed network of internet servers. Basically, it is used to deliver static content/information with high bandwidth by caching. In this article, I’m going to explain how to create Azure CDN with Azure Storage Service.

Content

  1. Creating an Azure CDN in Azure Storage
  2. Uploading a static file in Azure Storage
  3. Configuring the Azure CDN with the static content
  4. Experimenting with the Azure CDN

Creating an Azure CDN in Azure Storage

Step 1

Log in to Azure Portal https://portal.azure.com

Click here to learn how to create an Azure storage.

Step 2

Go to your Azure storage. In my case, I have created anAzuree storage with a name “demostoragego”. Click on Azure CDN from the Azure Storage, as shown in below figure.

Step 3

Now, it will step into creating a new endpoint.

   

        1. CDN profile – Name the CDN profile which contains an endpoint.

        2. Pricing tier - choose the pricing tier based on your requirement; in my case, I have selected standard verizon plan.

   
     

Endpoint Name- give an end point name.

Once the CDN is created successfully, you will be notified.

 

Uploading a static file in Azure Storage:

Basically, I’m going to use the blob to store the static content. Click here to know how to create a blob in Azure Storage Service. In my case, I named my container as js-resource. I’m going to upload a JavaScript file into the container as a blob.

Note

While creating a container, make sure the public access level should be blob because it is a JavaScript file and I’m going to make it accessible to anonymous users as read-only.
 
 Blob Container  
 
 
 
 File uploaded 
 
  
 
 

Configuring the Azure CDN with the static content:

Open the Azure CDN(autocompletefilter) which we created and click on Load. In the load screen, mention the content path.

 
 
 

The path should be /<publiccontainer>/<blobname>

In my case, it is /js-resource/autocomplete.js

 
 
End Point

https://autocompletefilter.azureedge.net/js-resource/autocomplete.js

Experimenting the Azure CDN

I have created an HTML page to experiment the CDN. I removed the JS file with the local reference and added the Azure CDN as script source.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>  
  14.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jszip.min.js"></script>  
  15.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>  
  16.     <!--<script src="http://localhost:11207/JS/autocomplete.js"></script>-->  
  17.     <script src="https://autocompletefilter.azureedge.net/js-resource/autocomplete.js"></script> <!-- Azure CDN -->  
  18.   
  19. </head>  
  20.   
  21. <body>    
  22.     <input id="autocomplete" />  
  23. </body>  
  24. </html>  

Result in browser

 
 
 
 

You can see from the network that the Azure CDN is successfully loaded.

I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.


Similar Articles