In Focus

Caching Rules In Azure CDN

From this article you will learn how to work with caching rule settings in Azure CDN.

Introduction:

In my last article, I discussed how to create an Azure CDN using the Azure Storage Service. Now, in this article, we will see how to play with caching rules in the Azure CDN.

Caching Rules in Azure CDN

By default, Azure CDN TTL (Time to Live) is applied for 7 days. If the TTL for the file hasn’t expired, the edge server returns the file from the cache, which will be faster.

We can set two types of rule for the Azure CDN.

  1. Global Rule
  2. Custom Rule

 1. Global Rule

Let’s set a global rule for the CDN which was created in my last article.

Step 1

Go to the Azure portal from CDN profile, select the End Point for the blob.

Step 2

From the setting, select Caching rules.

 
Figure 1 

Step 3

The Caching rules window will appear. Right now, we don’t have any caching rules applied to the endpoint. You can see that, by default, it holds 7 days of TTL.

 
Figure 2 

Step 4

Now, we need to set a global rule. Under the global caching rule section, select the Caching behavior as Override; make Cache expiration duration as 10 days, since our end point doesn’t contain any query string, let it ignore the query string for Query string caching behavior. Finally, select Save.

  
Figure 3 

It can take up to 90 minutes for the settings to reach every CDN POP (point of presence).

Custom Rule 

Custom rule is very handy when we are dealing with multiple endpoints.

In the caching rule setting page, go to custom caching rules and choose the match condition as a path. The matched value should be the path /[container_name]/[blob_name], the caching rule should be overridden as we did in the Global rule. You can set the time based on your requirement. In my case, I set it as 10 days.

 
Figure 4 

 
Figure 5
   
Finally, save.

It can take up to 90 minutes for the settings to reach every CDN POP (point of presence). I'm running the application using above CDN in the browser.
 
KendoAutocomplete.html  
  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>  
Max- age of CDN 
 
 

From the above figure, you can notice that the cache-control - max-age = 864000, which means 10 days.     
 
I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.