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

Question

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 m

Answer 1

If your package is growing too big in size, maybe you can benefit from deploying standalone files, instead of a big single package file. At least in Visual Studio 2012, the Publish Wizard has now this deployment options:

• Web Deploy (I encourage this you one)
• Web Deploy Package
• FTP
• File System

AFAIK, Web Deploy compares source and target files, physically transfering only the different files (It probably compares files hashes, but I don't know about the internals).

Anyhow, I will try to give some more info to solve your questions:

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

Gaurav Mantri already answered this, but just to provide a bit of more recent info, HTTPS is now supported for accessing Azure CDN, so you could avoid Mixed Content message. (Still pending support for custom domain/SSL Certificate (UserVoice request with latest info here).

By the way, using the protocol-less convention ( ://{domain}/{relative path}) the browser will use exactly the same protocol HTTP or HTTPS as the base document.

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.

Syncing static files to blob

One scriptable option for syncing your static files is the AZCopy tool.

An alternative is this powershell script (more info on this post), which, summarizing:

1. Does the initial setup:

   $context = New-AzureStorageContext ` 
       -StorageAccountName $StorageAccount ` 
       -StorageAccountKey (Get-AzureStorageKey $StorageAccount).Primary
   

2. Enumerates all local files on .\Content and .\Scripts:

   $files = (ls -Path $ProjectPath\Content -File -Recurse) + (ls -Path $ProjectPath\Scripts -File -Recurse)
   

3. ...and uploads each file on a loop:

   foreach ($file in $files)  
       { 
           $blobFileName = (Resolve-Path $file.FullName -Relative).TrimStart('.') 
           $contentType = switch ([System.IO.Path]::GetExtension($file)) 
           { 
               ".png" {"image/png"} 
               ".css" {"text/css"} 
               ".js" {"text/javascript"} 
               default {"application/octet-stream"} 
           } 
   
           Set-AzureStorageBlobContent ` 
               -Container $StorageContainer ` 
               -Context $context ` 
               -File $file.FullName ` 
               -Blob $blobFileName ` 
               -Properties @{ContentType=$contentType} ` 
               -Force 
       } 
   

Referencing CDN assets

Another problem to solve is how to reference the files on the CDN, instead of the relative files. Different solutions are there, most of them using helper functions to inject to proper prefix to the relative path (Some answers to following question can help you: ASP.NET MVC Relative Paths).

I suggest having a centralized way of building CDN assets urls, you could even implement some kind cache killer (for this you need to enable query string parameters on Azure CDN):

Razor:

Helper method:

public static string ToCdnUrl(string relativePath)
{
    string prefix = ConfigurationManager.AppSettings["CdnUrlBasePath"];
    string sufix = ConfigurationManager.AppSettings["StaticFilesVersion"];
    return String.concat(prefix, relativePath, "?v=", sufix);
}

AppSettings:

Rendered HTML: