Mobile & Global with HTML5, MVC & Windows Azure, Step 4: Cloud-Ready

In this series of posts we’re progressively demonstrating a mobile and global sample, Responsive Tours. The source code for all 7 steps is on CodePlex at http://responsivetours.codeplex.com.

Here in Step 4 of 7 we’re going to make the project ready for cloud computing with Windows Azure. For the time being we are still going to be running the project locally on our development machine, using the Windows Azure Simulation Environment. In this step we will:

• Add a Windows Azure project to the solution
• Configure the MVC project as a Windows Azure web role
• Run the solution in the Windows Azure Simulation Environment

For this step and successive steps you need the Windows Azure Tools for Visual Studio & SDK version 1.6.

Adding a Windows Azure Project to the Solution

To make the solution runnable in Windows Azure we must add a Windows Azure project to it that contains metadata describing the solution’s shape and runtime requirements. We can do this easily by right-clicking the solution in Visual Studio Solution Explorer and selecting Add Windows Azure Deployment Project.

This action adds a new ResponsiveSite.Azure project to the solution and makes it the start-up project.

Configuring a Web Role

Windows Azure solutions consist of one or more roles. A role is like a tier of a solution, and there are several varieties. In this case we want to let the Windows Azure project know that our solution has a Web Role, and that the ResponsiveSite (MVC) project is that web role. All it takes to do this is to right-click the ResponsiveSite.Azure project’s Roles folder and select Associate With > Web Role Project in Solution. The ResponsiveSite project now appears under the Roles folder as shown below.

Configuring Instances

The metadata files in the Windows Azure project allow us to configure runtime information including the number of instances for each role. We’ll set the number of VM instances for our web role to 4 in ServiceConfiguration.Local.cscfg (used in the local simulator) and 2 in ServiecConfiguration.Cloud.cscfg (used in an actual deployment to a cloud data center). Note 2 is a minimum for high availability.

<?xml version="1.0" encoding="utf-8"?>
<ServiceConfiguration serviceName="ResponsiveSite.Azure" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration" osFamily="1" osVersion="*">
  <Role name="ResponsiveSite">
    <Instances count="4" />
    <ConfigurationSettings>
      <Setting name="Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString" value="UseDevelopmentStorage=true" />
    </ConfigurationSettings>
  </Role>
</ServiceConfiguration>

Running the Solution in the Windows Azure Simulation Environment

We’re now ready to run the solution in the Windows Azure Simulation Environment, a feature that allows local development and testing of cloud solutions. Press F5 in Visual Studio, wait for the simulation environment to initialize, and note the solution starts up as usual.

One clue that you’re running a little differently under the hood is the web address you’ll see in the browser: 127.0.0.1:81. To get a better sense for what’s happening, we can use the Compute Emulator UI that is part of Windows Azure Simulation Environment. To do so, right-click the blue Windows Azure icon in your system tray (bottom right on the Windows desktop) and select Show Compute Emulator UI. You’ll soon see a display like the one below showing each of the VM ‘instances’ running (in the simulator, they are processes).

We won’t be deploying to the public cloud for a few more steps, but we’re set up for cloud hosting at this point with the Windows Azure Compute Service. When we do deploy to the cloud, we’ll also move our SQL Server database to a SQL Azure database in the cloud.

Summary

In Step 4 we made the solution ready for Windows Azure by adding a Windows Azure project, declaring the web project a web role, and configuring instances. Our site now has the following functionality:

• Uses HTML5 and open standards on the web client

• Embodies responsive web design and runs on desktops, tablets, and phones.
• Provides server-side dynamic content (promotional items)
• Provides client-side dynamic content (Bing Maps)
• Is set up for Windows Azure Compute

In the next step, we'll secure the application for sign-in with a web/social identity.

Next: Mobile & Global with HTML5, MVC, and Windows Azure, Step 5: Secured