Outside-the-Box Pizza, Part 5: Hosting the Front End in the Cloud

In this series, we’re looking at Outside-the-Box Pizza, a web-mobile-social-cloud demo, from a variety of perspectives that include design, technologies, and techniques. The online demo is at http://outsidetheboxpizza.com. Here in Part 5, we’ll be looking at how the front end (the web site) is hosted in the cloud on the Windows Azure platform. We’ll look at three things:

• Hosting the Web Site in Windows Azure Compute
• Media Files in Windows Azure Storage
• Scaling the Solution

Hosting the Web Site in Windows Azure Compute

We host Outside-the-Box Pizza.com on Windows Azure, Microsoft’s cloud computing platform. Given the need to support pizza ordering across the United States, OutsideTheBoxPizza.com needs to be widely available, which makes the cloud a perfect place to host it. Moreover, there is a strong need for scale. Traffic will surge at times based on seasonal patterns and on special days such as the Super Bowl. In addition, the overall load will change over time as the as the chain grows. The cloud’s ability to quickly scale up (or down) to match demand makes it a strong fit for a national franchise. That’s the beauty of cloud computing: you only pay for what you use, and only use what you need.

Hosted Service & Web Role

The Windows Azure Compute service hosts applications. A project is called a Hosted Service, which we’ve created in the South Central U.S. Data Center. Here’s how it looks in the management portal:

Outside-the-Box Pizza Front End in Windows Azure Compute

Each tier of a cloud application that needs to run code is implemented as a role (VM farm). There are several kinds of roles available. For a web site, the right role is a Web Role. A Web Role gives us a farm of Windows Server 2008 R2 VMs, each pre-configured with IIS enabled. Internet traffic is relayed to the role via an HTTP endpoint and a round-robin load balancer.  

Web Role

We can change the number of instances (servers) in a role as we see fit, but the minimum for high availability is 2. The Windows Azure Compute Service provides an SLA of 99.95% availability.

In addition to this web role, there’s an additional role for the back end. We’ll cover that in our next installment.

Metadata

The solution for Outside-the-Box Pizza includes a Windows Azure project, which defines the shape and size of the deployment in the cloud via metadata files.

 Outside-the-Box Pizza Solution

Below is the Service Definition (.csdef) file, which defines the shape of the solution. It specifies the roles and their details, such as VM machine sizes, endpoints, and certificates. Notice there is a Web Role (the front end) as well as a Worker Role (the back end).

<?xml version="1.0" encoding="utf-8"?>
<ServiceDefinition name="OutsideTheBoxPizza.Azure" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">
  <WebRole name="OutsideTheBoxPizza" vmsize="Small">
    <Sites>
      <Site name="Web">
        <Bindings>
          <Binding name="Endpoint1" endpointName="Endpoint1" />
        </Bindings>
      </Site>
    </Sites>
    <Endpoints>
      <InputEndpoint name="Endpoint1" protocol="http" port="80" />
    </Endpoints>
    <Imports>
      <Import moduleName="Diagnostics" />
    </Imports>
  </WebRole>
  <WorkerRole name="OutsideTheBoxPizza.OrderProcessing" vmsize="Small">
    ...
  </WorkerRole>
</ServiceDefinition>

Matching the Service Definition file is a Service Configuration (.cscfg) file that defines runtime values for the cloud application. This includes the number of VM instances for each role and settings such as connection strings.

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

Developing and Testing Locally

When a developer is working on Outside-the-Box Pizza, they can
test their code locally on their development machines using the Windows Azure
Simulation Environment, which includes a Compute Emulator. 

Running Locally in the Compute Emulator

The Compute Emulator has an insightful UI where you can see what’s going on under the hood. Here we can see how each instance of each role is doing via its console, which includes diagnostic information from the Windows Azure Simulation Environment as well as application trace messages.

Compute Emulator UI

Deployment

When a developer is ready to deploy to a data center in the cloud, they can package and publish directly from Visual Studio. This creates a package (.cspkg) file. The .cspkg and .cscfg files are uploaded to the cloud and deployed.

Publishing from Visual Studio

Media Files in Windows Azure Storage

Outside-the-Box Pizza has media files: images and video. Although these could be just made part of the web solution, there’s value in putting this content in the Windows Azure Storage Service as blobs. A blob is similar to a file, but is stored with triple-redundancy. Moreover, blobs can be served up as URLs over the Internet—which makes them easily referenced by web pages.

To use Windows Azure Storage, a Storage Account needs to be provisioned in a Windows Azure Data Center. We’ve created one in the South Central U.S. data center. Naturally, you want your data to be in the same data center as your application for efficiency.

Windows Azure Storage Account

We’ve put the HTML5 videos for the site in Windows Azure Blob Storage. Viewed in a storage tool, they look like this:

Video Blobs

We’ve put the videos in a container named (naturally) video, and configured it for public access which allows its content to be served up as Internet URLs. The freshingredients.mp4 video, for example, has a public Internet URL of http://outsidetheboxpizza.blob.core.windows.net/video/freshingredients.mp4.

Video Blob Accessed as an Internet URL

Here’s how the video URLs are referenced in our HTML5 markup:

<video controls>
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/freshingredients.mp4" type="video/mp4" />
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/freshingredients.ogg" type="video/ogg" />
</video>

<video controls poster="~/Images/pizzacollage.png">
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/pizzacollage.mp4" type="video/mp4" />
    <source src="http://outsidetheboxpizza.blob.core.windows.net/video/pizzacollage.ogg" type="video/ogg" />
    (unable to play video on this browser)
</video>

This renders as shown below in a browser capable of HTML5 video, complete with video controls

HTML5 Video Served up from Windows Azure Blob Storage

Scale

Scaling of applications hosted in Windows Azure Compute is done by altering the number of instances in each role. Since Outside-the-Box Pizza is only a demo, we usually run the minimum 2 instances, but we could scale up to dozens or hundreds of servers if we needed to. The number of instances can be changed easily through the management portal, and the allocation of additional servers is usually accomplished in 10-15 minutes.  Although we haven’t done it here, note that it’s also possible to automate scaling of a Window Azure cloud application. Microsoft provides an Autoscaling Application Block for this purpose.

We can also scale storage. If we were running at full scale, we would enable the Windows Azure Content Delivery Network (CDN) in the management portal for our stroage account. The CDN would cache the media content blobs, based on user location, via a worldwide network of edge cache servers. After enabling the CDN, the only change we'd need to make in the program code is the URL prefix used for the images in our HTML tags.


Summary

In this post we’ve seen that Windows Azure provides the perfect platform for hosting a national franchise. The front end of Outside-the-Box Pizza is hosted in Windows Azure Compute with media files in Windows Azure Blob Storage. These two services both scale easily to any desired level.