Migrating a Blog to Windows Azure Web Sites

For many years, I’ve hosted my blog on Orcsweb.  I moved there about 5 years ago or so, after outgrowing webhost4life.  Orcsweb is a huge supporter of the community and has offered free hosting to MVPs and MSFTies, so it seemed like a no brainer to go to a first class host at no charge.  Orcs is also local (Charlotte, NC) and I know many of the great folks there.  But, the time has come to move my blog to Windows Azure Web Sites (WAWS).  (This switch, of course, should be transparent.) This isn’t meant as disappointment with Orcs, but lately I’ve noticed my site throwing a lot of 503 Service Unavailable messages.  Orcs was always incredibly prompt at fixing the issue (I was told the app pool was stopping for some reason), but I always felt guilty pinging support.  Frankly, my blog is too important to me, so it seemed time to take responsibility for it. WAWS allows you to host 10 sites for free, but if you want custom domain names, you need to upgrade to the shared plan at $10/mo.  This is a great deal for what you get, and offers great scalability options when needed.   My colleague, Andrew, recently had a great post on WebGL in IE11, and he got quite a bit of traction from that post as you can see from the green spike in his site traffic: This is where the cloud shines: if you need multiple instances for redundancy/uptime, or simply to scale when needed, you can do it with a click of a button, or even automatically.  Migrating the blog was a piece of cake.  You’ve got a couple of options with WAWS: you can either create a site from a gallery of images (like BlogEngine.net, Wordpress, et al.), as shown in red below, or simply create an empty website to which you can deploy your own code (shown in green). Although I use BlogEngine, I already have all the code locally so instead of creating a site from the gallery, I created an empty website using Quick Create and then published the code.  If you’re starting a new blog, it’s certainly faster to select a blog of your choice from the gallery and you’re up and running in a minute. After clicking Quick Create, you just need to enter a name (your site will be *.azurewebsites.net) and a region for your app to live: Once your site is created (this should only take a few seconds) we’ll see something like this: Since the site I’m going to be pushing up has already been created, all I need right now is the publish profile.  You can certainly publish from source control, but for the time being let’s assume we have a website in a directory we want to publish.  I saved that file in a convenient place. There are two quick ways to bring up the Publish dialog in VS, either through Build – Publish Web Site, or right click on project and select Publish Web Site.  The next step is to locate the publish profile: Once imported, the connection details should be filled and the connection validated: The first deploy can obviously take a little while depending on the size of the solution, and you can see what’s going on in the output window:   The website should launch automatically when done: Easy, huh?  On the configure page, we can add our custom DNS names: For example, on my blog, I’ve got a few domains that I’ve added: When first trying to add a domain name, you may see something like this:   What the message is saying is that before the website will respond to that domain, we need to prove that we, in fact, own the domain name.  We can go about this two ways, either by creating an A record or CNAME.  A CNAME is technically the most appropriate, however, it’s often insufficient because many people try browse to a root domain, such as “http://structuretoobig.com” instead of “http://www.structuretoobig.com” or “http://blog.structuretoobig.com”.  In these cases, you need an A record, but that’s another topic entirely.  Here’s an example of the somedomain CNAME for my blog on my DNS registrar (this is not something you do on Windows Azure – this is to be done by your domain registrar): Once done, you might have to wait a short while for those changes to propagate the DNS cache.  (1 hour TTL is pretty low – typically you’d bump that a bit higher but when doing migrations, it’s best to keep this low so any changes you make are more immediate.) Once done and after waiting about 2 minutes, the domain is verified in the Windows Azure DNS page: In this case I created a CNAME over to this blog, so if we try it, here we are!  How cool is that … I’m writing about what’s on the screen.  Hmmm … this is kind of strange… So what if we wanted to create something from the gallery, instead?  For example, setting up a new BlogEngine site instead of downloading the code and publishing it.  If we clicked on “From Gallery” when first creating our web site, we’ll see something like this: The advantage of this approach is that it copies all of the files for you into your site.  You still have total access to those files, but this is perfect for new blogs and you know you’ll have a working configuration right away.  On the dashboard of the page, you’ll notice you have all the links you need to connect to your site, download a publish profile, set up source control, etc.  You can also configure an FTP password.  If we open this in FileZilla, we can see it has the same directory structure as our code, as the gallery image happens to be using the same version.  If we wanted to, we could pull down this code and redeploy it as necessary with any changes: The bottom line:  this post took a lot longer to write that it did for me to migrate my entire blog.  It’s easy to get going, and scalable to exactly what you need.  If you’re pulling in advertising or have critical uptime needs, you can have 2 or more instances for extra reliability and load capacity, or simply when needed.  If you don’t need a custom DNS name, the free tier gives you some great benefits and liberal usage.  Want to get started with Azure?  Here’s a link to a free trial, and of course, the free stuff remains free after the trial.

Microsoft DevRadio: (Part 7) Using Windows Azure to Build Back-End Services for Windows 8 Apps – Authentication Tips and Tricks

At long last!  Our final installment to the series – check it out! About this Video: Wrapping up their  “Using Windows Azure to Build Back-End Services for Windows 8 apps” series Brian Hitney , Andrew Duthie  and Peter Laudati, as they showoff some useful tips and tricks around authentication for your Windows Azure Mobile Server based apps. Tune in as they enable persistent login for a mobile service, and then discuss how we can get additional information about users from the configured identity provider(s).  Check out the full article here. Watch Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. Start your FREE trial now. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Blogs & Articles: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Article:  “Getting user information on Azure Mobile Services” Article:  “Using Azure Mobile Services authentication” Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)

Microsoft DevRadio: (Part 3) Using Windows Azure to Build Back-End Services for Windows 8 Apps – ASP.NET Web API

Abstract: Back for part 3 in their series for “Using Windows Azure to Build Back-End Services for Windows 8 apps”, Peter Laudati, Brian Hitney and Andrew Duthie show us how easy it is to host services built with the ASP.NET Web API using the new Windows Azure Web Sites feature. Check out the full article here. Part 1 | Part 2 After watching this video, follow these next steps: Step #1 – Try Windows Azure: No cost. No obligation. 90-Day FREE trial. Step #2 – Download the Tools for Windows 8 App Development Step #3 – Start building your own Apps for Windows 8 Subscribe to our podcast via iTunes or RSS If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information: Register for our Windows Azure Hands-on Lab Online (HOLO) events today! Windows Azure Hands-on Labs Online Blogs: Brian Hitney’s blog Peter Laudati’s blog Andrew Duthie’s Blog Videos: Microsoft DevRadio: How to Get Started with Windows Azure Microsoft DevRadio: (Part 1) What is Windows Azure Web Sites? Microsoft DevRadio: (Part 2) Windows Azure Web Sites Explained Microsoft DevRadio: How to Integrate TFS Projects with Windows Azure Web Sites Virtual Labs: MSDN Virtual Labs: Windows Azure Download MP3 (Audio only) MP4 (iPod, Zune HD) High Quality MP4 (iPad, PC) Mid Quality MP4 (WP7, HTML5) High Quality WMV (PC, Xbox, MCE)

Skipping SSL Connections Locally

When developing locally, often times you don’t want to use SSL for a variety of reasons.  There’s no real point, since the request isn’t going over the wire.  Most of the time, connections are done via the loopback 127.0.0.1 address (although localhost can be used) which throws certificate errors.  This one problem is often easy to solve, but it relates to a bigger issue: dictating when (and when not) to use SSL on your site.  In the ol’ days, you wouldn’t want an entire site to be SSL for performance reasons.  Ideally, you want to gracefully redirect users to/from SSL based on the requirements of the page.  If a user navigates to a secure section like their account page, you’d like to use SSL.  If they navigate away to a page not needing SSL, you’d want to use http and not https.  There are a LOT of ways to do this, such as using MVC filters for MVC based applications.  One way I’ve solved this before was simply calling a method like so with each request: private void SetupSslIfNeeded() { //bail out on local connections – never need ssl if (Request.IsLocal) { return; } bool requiresSsl = false; string curPath = Request.Path; if (curPath.StartsWith("/account", StringComparison.OrdinalIgnoreCase) || curPath.StartsWith("/user", StringComparison.OrdinalIgnoreCase) || curPath.StartsWith("/admin", StringComparison.OrdinalIgnoreCase)) { requiresSsl = true; } //redirect to secure page if (requiresSsl && !Page.Request.IsSecureConnection) { string currentUrl = HttpContext.Current.Request.Url.ToString(); string newUrl = currentUrl.Replace("http://", "https://"); Response.Redirect(newUrl); } //redirect to non-secure page if (!requiresSsl && Page.Request.IsSecureConnection) { string currentUrl = HttpContext.Current.Request.Url.ToString(); string newUrl = currentUrl.Replace("https://", "http://"); Response.Redirect(newUrl); } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } It’s a little more verbose than it needs to be, but it’s done to because there were a few port handling lines I left out for simplicity.  What this will do is avoid using SSL for local connections, and any page on the site except for those in the account, user, or admin folders.   The main downside of this approach is that it requires a redirect, which is a round trip to the server.  Ideally, you’d want your links to always be smart enough to know if they should go http:// or https://, but realistically, context switching between SSL and non-SSL pages is pretty rare so the client needing to endure the few extra milliseconds is an acceptable situation.  This is the way we currently handle SSL on http://www.rockpaperazure.com. 

Creating a Quick Progress Visual like UpdateProgress

On Thursday, we’re going to go live with our RockPaperAzure coding challenge – and it’s time to brain dump on some of the lessons learned while building out the solution – some small (like this one), some large. When developing the RPA website, I chose to use ASP.NET Webforms and ASP.NET Ajax.  The reason for this is simple … I’m a big fan ASP.NET MVC, but for this, given the very short time frame, it was the fastest route to completion.   (For those familiar with Aaron’s base project on Github, I thought about doing it all client side via JQuery but wasn’t impressed with the perf, so decided to go server side.) ASP.NET Ajax has a nifty UpdateProgress control that is useful during async postbacks to show activity, and while it has a display delay property, it doesn’t have a minimum display time property.  This is problematic because if you want a small spinning icon/wait cursor, displaying it too briefly is just an annoyance.  (Of course, brief is good because it means your page is snappy.)  One of the solutions to this (as I read on StackOverflow) was to simply put a Thread.Sleep in the server postback method, causing the round-trip to take longer and thus display your animation longer.  While this will work, it will crush scalability.  Depending on how many concurrent users you have, a Thread.Sleep on an ASP.NET thread should be avoided at all costs, and this wasn’t something I was willing to do.  There are a few commercial controls that will do this, and indeed, using the Ajax toolkit, you can develop a control that will accomplish the same.  But I wanted something that I could develop in 5 minutes – basically in less time than it is taking me to write this blog post.  I already have the spinning icon, so I wrapped it in a div or span (whatever is appropriate): 1: <span id="ProgressTemplate" style="visibility: hidden;"> 2: <img src="~/images/rpadie.gif" clientidmode="Static" runat="server" 3: id="imganim" height="18" width="18" /> 4: </span> Then, we just plug into the request model to show/hide the control.  It’s a little hack-ish – for example, I reset the visibility to visible on EndRequest because the span, with a default of hidden, will disappear on its own.  This can be fixed by making it a server control and enabling viewstate.  Still, not too bad for 5 minutes: 1: <script language="javascript" type="text/javascript"> 2: <!-- 3: var prm = Sys.WebForms.PageRequestManager.getInstance(); 4: 5: prm.add_initializeRequest(InitializeRequest); 6: prm.add_endRequest(EndRequest); 7: var postBackElement; 8: function InitializeRequest(sender, args) { 9: postBackElement = args.get_postBackElement(); 10: $get('ProgressTemplate').style.visibility = 'visible'; 11: } 12: function EndRequest(sender, args) { 13: $get('ProgressTemplate').style.visibility = 'visible'; 14: setTimeout('hideProgress()', 1000); 15: } 16:  17: function hideProgress() { 18: $get('ProgressTemplate').style.visibility = 'hidden'; 19: } 20: // --> 21: </script> When the Ajax request comes back, it will keep the span visible for 1 second.  Ideally, a nice modification would use a elapsed time mechanism, so if the request actually took 1 second for some reason, it would hide the span without delay.  This isn’t took hard to implement, but broke the 5 minute goal.

Roadshow Materials

Thanks for those who came out to the roadshow over the past few weeks!   In this post, I’ll include the sample files and slides used in my ASP.NET 4.0 overview talk.  A couple of notes:  each presentation on the show was a bit different.  In some cases, some slides were not used.  Also, the VS2010 demo solutions here are “approximate” as they were done a bit differently at each venue. The webforms solution demos routing in web form as well as using the QueryExtender control.  This requires an AdventureWorks database, or replace with one of your own.  The AJAX sample demos client-side templates and data binding, the latter of which also requires the adventure database exposed by ADO.NET Data Services.  You can easily change this to your own datasource by creating a new Entity Data Model, changing the ADO.NET Data Service to this new type, and modifying the AJAX (in Demo3) to point to the correct resource. Download: ASPNET4.zip

My Apps

Dark Skies Astrophotography Journal Vol 1 Explore The Moon
Mars Explorer Moons of Jupiter Messier Object Explorer
Brew Finder Earthquake Explorer Venus Explorer  

My Worldmap

Month List