Penny Pinching Video: Moving my Website's Images to the Azure CDN (and using a custom domain)
I talked about Pinching pennies when scaling in The Cloud last week when I added jQuery lazy loading to my podcast's Website. Next, I moved my website to the same data center as my SQL Database (in fact, they should have always been together!). Now, I'm moving all my show images to the Azure CDN. There's been ~370 shows, and if someone visits the archives page and scrolls around it's about 8 megs of pics.
Additionally, I have a very international group who listen to my podcast, so by moving the images to the CDN I'll get load balancing and edge caching as well. Asians will get the images served from an Asian data center, etc.
Now, to be clear, Azure bandwidth is pretty cheap, with even 100GB costing around ~$11, but I also wanted to learn how to use Blob Storage and the CDN. I've only used it to store Virtual Machines and it's been hidden from me. Bandwidth from the Azure CDN is about the same price, but I get the geo-replication for free. Remember also that "ingress," that is, incoming traffic, is free. When you're estimating your bandwidth costs, you're only worried about outgoing traffic.
I also thought it would be cool to have a custom Hanselminutes subdomain, so I want the images to be served from http://images.hanselminutes.com, because it's cool. Plus, it means I could switch CDNs in the future and not change my URLs.
Here's the steps I used:
- I created a new storage account called 'hanselminutescdn,' then a container called 'images.'
- I went to 'Configure' and setup the images.hanselminutes.com CNAME to point to the new storage account. I went to my DNS provider (DNSimple.com) and added a CName from images.hanselman.com to point to hanselminutescdn.blob.core.windows.net, and then verified the domain per the Azure portable instructions. This involved adding another verification-specific CNAME.
- I downloaded the Azure SDK for .NET and used Visual Studio to upload the images.
- Later after the video, I got CloudBerry Explorer for Windows Azure and used their "sync" option to keep my local show images folder and Azure in sync. Very slick. Their app also lets me easily set HTTP Headers on my images if I want. I may pay for the Pro version.
- I changed my paths in my HTML to images.hanselminutes.com instead of just /images of the website's domain.
- I discovered that CDNs are case sensitive, then ran this PowerShell Script to make ALL my show images files all lowercase.
dir | Rename-Item { $_.Name.ToLowerInvariant() }
- I cleared out the files and reuploaded the new lower-case ones.
- PROFIT.
OK, I haven't figured out that last step, but soon...very soon. ;)
IMPORTANT UPDATE: Commenter Nate Jackson points out that while I've setup access to blob storage, I haven't yet actually enable the Edge Caching abilities of the CDN itself. For this, it seems I have to visit the old management portal (which explains why I missed it completely. It's not intuitive!).
You get to the old portal from your account dropdown:
There's instructions on the Azure docs site the say I need to create a "CDN endpoint" that associates the CDN with my now-public blob storage container.
I visit the Hosted Accounts + CDN button, then click New Endpoint.
The URL template looks like this.
http://<CDNNamespace>.vo.msecnd.net/<myPublicContainer>/<BlobName>
So after clicking new CDN endpoint and enabling the CDN, I'm told my CDN endpoint name is "az415467" per the old portal:
Given the URL template a URL from my container would be:
http://az415467.vo.msecnd.net/images/255.jpg
Then (if you want) click Add Custom Domain:
Then point the domain to the CDN, not to public blob storage:
At this point the old management portal looks like this:
And I can confirm it works when I visit
http://az415467.vo.msecnd.net/images/255.jpg as well as http://images.hanselminutes.com/images/255.jpg
So the idea is that there's storage in general, there's blob storage made public (which is what I did) which can be geo-replicated, and then there's the formal geo-load-balanced Content Delivery Network, which I failed to configure!
CDN -> pulls from -> Public Blob Endpoint -> hosted in -> Your Storage Container itself
I will update the YouTube video soon. Big thanks to Nate Jackson for catching this oversight and educating me!
Related Links
- Pinching pennies when scaling in The Cloud
- Penny Pinching Video: Moving an Azure Website between data centers (YouTube)
- Streaming Diagnostics Trace Logging from the Azure Command Line (plus Glimpse!)
- How to keep your ASP.NET database connection strings secure when deploying to Azure from Source
Sponsor: The Windows Azure Developer Challenge is on. Complete 5 programming challenges for a chance at spot prizes, Stage prizes and the Grand Prize. Over $16,000 is up for grabs with 65 chances to win!
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
Sam
:)
Do you know how/if Azure CDN supports edge pull? I've seen vague mentions that it does, but never seen it implemented correctly.
another alternative was to use the biggest max-age and then have a different folder for each version of the published site.
example:
images.hanselman.com/v20130422/ for the site published today.
what do you think of this approach?
Here is a cheat sheet: http://www.windowsazure.com/en-us/develop/net/common-tasks/cdn/
When you created your storage account, you enabled GEO replication, which just means that Azure will store your stuff in a couple places in case they have disaster. That has nothing to do with CDN.
@Scott Scowden - believe all azure cdn is pull-based, either from blob storage or from a web role where you add content to a cdn subfolder. Note that it must be a web role - a windows azure web site will not work right now.
Thanks everyone!
The only thing that is wrong on that page is how to get to the "previous portal", as the Management portal has changed since they wrote the instructions. You have to navigate to https://manage.windowsazure.com/ and click your account name (e-mail) in the upper right, then you can select Previous portal from the menu.
I did use CloudBerry and will be buying the Pro version for the sync support. They have some really great products for AWS, too.
Scott you need some SignarR on love on your comment section so I can see other peoples comments while I'm typing one :)
Looking forward to the updated version and video.
Like I said, it's the only thing keeping me from Azure.
1) Once you publish a BLOB's URL, NEVER change the contents of the BLOB. If an edit or update is necessary, use a new BLOB with a new URL.
2) Ensure that your content is tagged with appropriate meta-data to allow the web's caching infrastructure to step in and serve the 2nd-n requests for a given resource. In Azure's case, use a tool that lets you manage the meta data that ultimately controls the HTTP Cache-Control headers. You mentioned Cloudberry Explorer; Cerebrata's Azure Management Studio is another option. Or, if you are writing code to post your BLOBs, take control of the expiration headers as shown here: http://msdn.microsoft.com/en-us/library/windowsazure/gg680306.aspx
I used a script doing two things:
var maxage = 86400;
blob.Properties.CacheControl = String.Format("public, max-age={0}", maxage);
Because the CDN resends these headers, it helps to improve loadspeed as well.
I was following Google Pagespeed and even optimized the hell out of my PNGs using PNGPOUT ;)
(I also documented it here: Optimizing My Blog (WordPress) For Speed )
But isn't just a day too little?
instead of using just a day woudn't be better to use 2592000 and change the url when you need to change the image?
I think for me the problem is bigger because I'm in Brazil, very far from azure datacenter, and most of times with a very limited bandwith.
I'm putting together a website to be hosted on azure and realised that I potentially need to host a great deal of images.
This video really pushed me in the right direction.
Someone has removed the CDN link from the old interface, and so I am unable to create a CDN. Could you let someone know this is broken?
Thanks,
Daniel
Ensure that your content is tagged with appropriate meta-data to allow the web's caching infrastructure to step in and serve the 2nd-n requests for a given resource.You created and configured your site to use Azure BLOB storage.
Thanks
John
Does anyone know how to enable the CDN? The newest version of the doucmentation says to
In the Windows Azure Management Portal, in the navigation pane, click CDN.
However, there is in fact no "CDN" link in the navigation pane. I looked through the source code of the page and there does seem to be a reference to the CDN in there, but it does not display. Any idea how to fix this?
CDNs are now accessible from the new portal. If you want to create one, click the "Big Plus" at bottom left and they're under App Services > CDN.
If you have an existing CDN there is a button in the bottom half of the list of objects on the left hand side: https://manage.windowsazure.com/#Workspaces/Cdn
I've got a paying account, and I pay MS a good chunk every month for it. Frustrating.
"I inform you with regret that currently we’re in the process of building out our next generation Windows Azure Content Delivery Network (CDN) architecture, and during this time we are no longer accepting new CDN customers.
With the CDN functionality having recently transitioned to the new Azure management portal, we have enabled it automatically only for customers who were using CDN in the old management portal, so they can continue to manage their CDN configurations. For everyone else, the CDN feature is not enabled in the new portal.
We highly encourage you to wait until we’re ready building our next generation Azure CDN service."
Too bad that more new features are coming on to new management portal but not CDN. Finally our management switched to Amazon CloudFront. CloudFront custom domain SSL is very expensive, we hope Azure CDN on new portal will have some price benefits.
Just so those engineers out there know !
Comments are closed.