To The Cloud!

An Introduction to Microsoft Azure

The following guide shows a step-by-step process of creating a scalable web application and it’s deployment to Microsoft Azure. It assumes you have no prior experience using Microsoft Azure.

Voting App (aka. the thing we’ll be building)

The voting app we’ll create will allow users to vote between two options. It’ll be comprised of two web applications (vote and result) and a worker:

1. Vote Web Application
   • Python + Flask application that allows users to vote between two options. The votes are put into an Azure Storage Queue to be processed. Here’s what it looks like (feel free to vote and see the results change below):
2. Worker Web Job
   • As new messages appear in the Storage Queue, the C# worker will save each message and the total vote count to Azure Table Storage.
3. Result Web Application
   • Node.js + Socket.IO application retrieves the vote count from Azure Table Storage and outputs the overall results of the vote:

Prerequisities:

Before we start, you’ll need a couple of things:

• A GitHub account
• A Microsoft account
• Sign up for Azure with your Microsoft account. When you sign up, you’ll automatically get a $200 credit. You’ll also get a few more perks if you sign up via DreamSpark.

With this tutorial, you can get away without running any of the applications locally, but it is highly recommended that you download the tools such that you can debug them applications locally if necessary.

• Python 2.7+
• Node.JS, NPM
• .NET Core
• IDE of choice: Visual Studio Code, Visual Studio 2015

Azure Storage Account

A Storage Account is one of the fundamental building blocks of Azure. In designing applicatiosn for scale, it is important to decouple applications such that they can scale independently. As such, we’ll be using two aspects of Azure Storage:

• Queue Storage
• Table Storage

As users vote through the web application, each vote will be pushed to a queue whereupon it will later be processed by a worker and finally persisted into table storage.

Creating an Azure Storage Account

To create an Azure Storage account, head on over to the Azure portal and follow these instructions.

*Tip: A free tool that you can use to take a look at what’s inside your Azure Storage account is Azure Storage Explorer. It’s free and works on Windows, MacOS, Linux.

Once created, take note of the Azure Storage Name and Azure Storage Key, we’ll need these later.

Voter Web Application

The voter web application issues a cookie to the end-user that serves as the voter_id. When a vote is registered, the voter_id and vote are pushed to the Azure Queue.

1. Fork and clone https://github.com/jpoon/voting-app-voter
2. cd voting-app-voter
3. Run the application locally (optional):
   1. Update the storage_account and storage_account_key with the Azure Storage Account that you had created. You can put the values here.

   2. Setup virtualenv

      pip install virtualenv
      virtualenv env
      source env/bin/activate
      pip install -r requirements.txt
      

   3. Run the app

      python runserver.py
      

4. Create an Azure Web App
   1. Log into the Azure Portal and click the NEW button in the top-left corner
   2. Click Web + Mobile
   3. Select Web App
5. Configure the App Settings adding AZURE_STORAGE_ACCOUNT and AZURE_STORAGE_ACCESS_KEY with the Azure Storage Account that you had created earlier
6. Setup automated code deployment of the voting-app-voter repository in GitHub to the Web App.
7. Done.

Worker Web Job

One feature of an Azure Web App is that you can have it run jobs at no extra cost using Web Jobs. We’ll upload a C# webjob that will run continuously to process the Azure Storage Queue.

Connection strings

Result Web Application

The result web application retrieves the vote count from the Azure Table and displays it on the page. The instructions for deploying the result web application are very similar to the voter web application.

1. Fork and clone https://github.com/jpoon/voting-app-admin
2. cd voting-app-admin
3. Run the applicatino locally (optional):
   1. npm install
   2. node server.js
4. Create an Azure Web App
5. Configure the App Settings adding AZURE_STORAGE_ACCOUNT and AZURE_STORAGE_ACCESS_KEY with the Azure Storage Account that you had created earlier
6. Setup automated code deployment of the voting-app-voter repository in GitHub to the Web App.
7. Done.