Leveraging sitecore media library with Azure CDN

Using a CDN is an universal best practice to increase the “global” performances of your public web site.

Azure CDN would be the first choice if you are hosting your sitecore site in Azure, but the principles in these article would apply to any other CDN with lazy loading characteristics.

In this post I am assuming that your Sitecore instance it is hosted in Azure as IAAS or as PAAS and that your CDN is in the same instance of the webrole.

My overall goal is to use Azure CDN to cache the static items coming from the media library. In regard of the media library I really like the configuration that comes out of the box storing images on the database, this configuration allow you to use some essential modules like the image cropping one https://marketplace.sitecore.net/Modules/ImageCropping.aspx and the Diangoa Image optimizer (https://github.com/kamsar/Dianoga)

After a bit of research I was able to leverage the Azure CDN on the top of Sitecore MediaLibrary without writing any code but just changing few configuration bits…

The way that my solution work, is the following one:
1) You reference a media library item
2) On CD it points to the CDN url
3) On the first instance, it redirect to youriste.com/cdn/-/media.ashx?something
4) It rewrite the url to -/media.ashx?something
5) It cahce the url on the CDN for the following requests

More specifically this is the todolist to acheive it:

1) Configure Azure CDN on the CDN folder of your web role (you can do it from azure management portal)

2) Enable Querystring cache on the Azure CDN endPoint

3) Install the rewrite module for IIS (if your IAAS scenario) and add the following rewrite rule

     <rule name="RewriteIncomingCdnRequest" stopProcessing="true">
          <match url="^cdn/(.*)$"/>
          <action type="Rewrite" url="{R:1}"/>

4) Configure the media Library to support this scenario

<setting name="Media.MediaLinkServerUrl" value="http://yourcdnurl.vo.msecnd.net/" />
<setting name="MediaResponse.Cacheability" value="public" />


This configuration works well on most of the scenarios, the only case that would not work is the “attach” of a media item, unfortunately there is not a native way to let expire the azure cdn cache and the attached item would be visible when the cdn cache expire….  the simpler way to achieve it is to rename the media item attached, this will force the update of the querystring url….

An other recommended configuration is to change the media library handler from ~/media to -/media anyway this is not mandatory to have the cdn in place..

Hope it helps your Sitecore and Azure experience…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s