Configure Azure CDN In Sitecore Application

What is CDN (Content Delivery Network or Content Distribution Network)?

CDN a geographically distributed network what provides high availability and performance to the end-users especially for static resources like media assets, CSS, Javascript, etc. Every cloud provider like Azure, AWS provides this service to make the website more efficient and a high performer. And unlike any other applications, Sitecore applications are not any exception to use this. Configuring any CDN in Sitecore is very simple and hassle-free. 
Example of a few CDN services 
You can choose from any one of these to set up your CDN as per your requirement. 

CDN in Sitecore 

In this article, we will use Azure CDN for our Sitecore Application. Out of three providers (Microsoft, Varizon & Akamai), we are going to use Akamai.

Creating a CDN profile in Azure

To create a  CDN profile in Azure, you have to go to CDN profiles. You can search on the search bar "CDN Profiles". Over there all the profiles will be listed. To add a new one click on  "Add". Fill the name, resource group and sucscription. In the Pricing tier we are selecting Standard Akamai. Choose others as per your need. You can set the CDN endpoint now or later. We are going to add the same later. 
Once this will be saved in the CDN Profiles list you can see your created CDN. Now click on the CDN to set the endpoint. 
Click on the "EndPoint" to add a new endpoint. Endpoints are the actual points from where the resources will be served. It may be a web app or a storage account or any other website (custom origin). For us, this will be the CD (Content Delivery) server of the Sitecore application. We are not going to add the CM (Content Management) server as it will be bound in some groups of people where performance is not at the highest priority. 
While adding the endpoint please make sure the usages of resources is as per the usages (storage), as the price will vary. 
In Sitecore, we are going to use our CD server as the endpoint. If your CD Server is within the Azure subscription of the CDN profile, you have to choose "Web app"  while creating the endpoint and then the CD server Web App from the drop-down. 
After selecting the endpoint, it will take some time to sync all the static resources. You can set any custom URL in your CDN, this will be used while we will configure the CDN at the Sitecore end.   

Cache every unique URL with Revision Id 

Every media (images, videos, JS & CSS) in Sitecore uses revision id to clear the cache after publishing the same. You need to set the policy of your CDN. To set this, go to the configure section of your CDN endpoints and select "Cache every unique URL". 
Now your CDN is ready to serve the static resources. 
CD server URL: https://<cd-server-url>/-/media/project/home-banner.jpg
CDN URL:  https://<cdn-url>/-/media/project/home-banner.jpg

Configure in Sitecoere 

Now open your application and create a new patch file and name it zz.Azure.CDN.config. 
Write down the below code over there.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <configuration xmlns:patch="">    
  3.     <sitecore>    
  4.         <settings>    
  5.             <!--                        
  6. MediaResponse.AlwaysIncludeServerUrl must be true, to always include CDN    
  7. url when getting media item url.     
  8.                   Otherwise, the request will    
  9. not be served by CDN server.     
  10.             -->    
  11.             <setting name="Media.AlwaysIncludeServerUrl">    
  12.                 <patch:attribute name="value">true</patch:attribute>    
  13.             </setting>      
  14.             <!--                       
  15. MediaResponse.MediaLinkServerUrl must be set to url of the CDN endpoint.    
  16.                   Change it from, to the url of the CDN endpoint.    
  17.             -->    
  18.             <setting name="Media.MediaLinkServerUrl">    
  19.                 <patch:attribute name="value">https://<your cdn end point></patch:attribute>    
  20.             </setting>     
  21.             <!--                       
  22. MediaResponse.AlwaysAppendRevision should be true to always append    
  23. revision when getting media item url.    
  24.                   The purpose of the value is    
  25. to generate a unique URL for every revision.    
  26.             -->                
  28.             <setting name="Media.AlwaysAppendRevision">    
  29.                 <patch:attribute name="value">true</patch:attribute>    
  30.             </setting>    
  32.             <!--      
  33.                   MediaResponse.Cacheability    
  34. must be Public to let the CDN server cache the response.    
  35.                   Otherwise instead of caching    
  36. the response, the CDN server will ask for the response from Sitecore server    
  37. every time.     
  38.             -->      
  39.             <setting name="MediaResponse.Cacheability">    
  40.                 <patch:attribute name="value">Public</patch:attribute>    
  41.             </setting>      
  42.             <!--      
  43.                  The max-age to use in media    
  44. response headers.    
  45.                  CDN server uses this value as    
  46. max-age of the response cache.    
  47.             -->    
  48.             <setting name="MediaResponse.MaxAge">    
  49.                 <patch:attribute name="value">30.00:00:00</patch:attribute>    
  50.             </setting>    
  51.         </settings>    
  52.     </sitecore>    
  53. </configuration>    
Save & upload the file in the Include folder within App_data. After the app pool restart, all your media resources will be severed from CDN.