Azure, best way to store and deploy static content (e.g. images/css)?

QFDev picture QFDev · Mar 5, 2013 · Viewed 18.4k times · Source

We're about to deploy our .NET web application to an Azure Web Role. I'm just wondering how others have handled their static content, specifically images and css? At the moment our application package is about 25mb but 18mb of that is derived purely from images, things like navigation buttons, icons and template components that rarely ever get updated. Would it be wise to partition this out of the deployment package and move it to blob storage?

I have a few doubts about this approach that I'm wondering are valid...

  1. 80% of our site runs in a HTTPS environment. Will accessing images in a blob store introduce cross-scripting problems?

  2. Vulnerability to money leakages, if someone tries to maliciously hammer our images (most are under 20kb)?

  3. I'm struggling to see how it's possible to upload files to a blob container (from VS2010 + Azure SDK) with directory naming convention so I don't need to rewrite 1000s of path references? I appreciate directories are an abstract concept in blob containers, but I can write files with a forward slash to imitate this in code. Obviously Windows does not allow me to do this before I upload in Visual Studio.

Any thoughts or alternative strategies would be welcome. The goal really is to shrink our deployment package to speed up the deploy time. Also I quite like the idea of offloading the image serving to a dedicated node to improve the performance on the web server, maybe my image collection is so small that it's hardly worth bothering?

Update 16th May ------------------------------------------------------------------------

Here's what I did in the end:

1.Transferred all images + css to blob storage containers. I maintained the structure of any sub-directories within the images and css folders.

2.Applied a URL Rewrite rule in our web.config file as follows..

  <rewrite>
    <rules>
      <rule name="imagestoazure">
      <match url="images/(.*)" />
      <action type="Redirect" url="https://xxxxx.vo.msecnd.net/images/{R:1}" />
    </rule>
  </rules>
  </rewrite>

3.Excluded the images + css folders from the application and deployed.

My deployment is now much smaller and the images are running off a CDN freeing up bandwidth, improving downloads speeds and releasing some load off the web-server.

Update: September 2015

When reviewing this recently I came across the following guide from Microsoft. It goes into more detail about how you can automate the deployment of your assets and cache bust using querystrings.

Serve Content from Azure CDN in Your Web Application

Answer

Stopped Contributing picture Stopped Contributing · Mar 5, 2013

Some comments:

Would it be wise to partition this out of the deployment package and move it to blob storage?

Absolutely. I can see many benefits of doing this:

  1. As you mentioned, this would reduce your package size considerably thus deployment becomes much faster.
  2. Again as you mentioned, it would take the load off of your web server thus will make your site more responsive.
  3. If you need to update images, js, css files you can just replace those files in blob storage. If they were left in your package, you would need to redeploy your package.
  4. You could also take advantage of Windows Azure CDN which works off of blob storage.

80% of our site runs in a HTTPS environment. Will accessing images in a blob store introduce cross-scripting problems?

As long as you're not reading the contents through AJAX, I don't think you'll run into cross-scripting issues (How to access XML hosted as azure blob from azure website). However if your page is served via https and you reference static resources via http, your users might get mixed content (secured and unsecured) message.

Vulnerability to money leakages, if someone tries to maliciously hammer our images (most are under 20kb)?

Do take a look at the outbound bandwidth pricing here: http://www.windowsazure.com/en-us/pricing/details/#header-11. Currently Windows Azure is running a promotion where up to 5 GB of data transfer out is free and it's $0.12 / GB which is quite cheap. You would also need to take storage transactions into consideration which is also very cheap. I wouldn't worry too much about it. In the worst case scenario, you could always revert to shared access signature and protect the resources.

I'm struggling to see how it's possible to upload files to a blob container (from VS2010 + Azure SDK) with directory naming convention so I don't need to rewrite 1000s of path references? I appreciate directories are an abstract concept in blob containers, but I can write files with a forward slash to imitate this in code. Obviously Windows does not allow me to do this before I upload in Visual Studio.

There're a number of 3rd party tools available to you which will preserve the folder structure of your local computer when uploading in blob storage. Do take a look at this blog post from Windows Azure Storage team: http://blogs.msdn.com/b/windowsazurestorage/archive/2010/04/17/windows-azure-storage-explorers.aspx. Obviously my personal favorite is Cloud Storage Studio from Cerebrata :) [I'm one of the devs for that product]