Deploying a non-.NET project to Azure Web App using VSO

Over the last couple of months, I've been supporting the start ups at the Microsoft Ventures Accelerator. I recently worked with Dorin of Outleads to setup continuous deployment of her PHP-based platform to Azure. This post will briefly introduce the various options of pushing code to an Azure Web App and go into detail the approach that was taken in order to deploy a non-.NET project (eg. Ember.js, AngularJS, Node.js, Rails, Django, etc) hosted in Visual Studio Online (VSO) to Azure.

Background

Under the covers, Azure can deploy your code to a Web App using WebDeploy, kudu, Git, or FTP. The graphic below breaks it all down:

I'm not going to dig into the details of each as they are all pretty well documented. But here's a quick summary.

FTP

The way we did it back in the 90s.

Kudu

You can think of Kudu as a pull mechanism. Whenever Kudu is notified of a code update (either via a git push or a webhook), it pulls the source code to the Azure Web App, and builds and deploys said source code -- everything happens all within the confines of your Azure Web App.

How does Kudu get the code?

Local Git Repository

A Git repository is setup on the Azure Web App. From your local repository, add a remote origin and push.

$ git remote add azure https://<username>@<webappname>.scm.azurewebsites.net:443/<webappname>.git
$ git push azure master
Remote Repository

After following the UI workflow of authorizing your GitHub/Bitbucket repository, what happened under the covers was that a webhook was setup such that every time code is pushed to your repository, Azure will be notified whereupon Kudu will kick off the whole deployment process.

For repositories that are not natively supported (!GitHub || !BitBucket), you'll need to setup the webhook manually.

Kudu has the code, how does it get built?

The Kudu wiki breaks it all down. Optionally, the default logic can be overridden with custom deployment scripts.

$ npm install azure-cli -g
$ azure site deploymentscript [options]

Web Deploy

Web Deploy is more of a push model. With Visual Studio Online, the VSO build infrastructure builds the source, produces deployment artifacts, and pushes said deployment artifacts to the Azure Web App.

VSO -> Kudu -> Azure Web App

What about the scenario where you want to deploy a project hosted on VSO that doesn't natively support Web Deploy? For instance, how would one go about setting up continuous integration of an Ember/AngularJS/NodeJS/Rails/PHP project hosted on VSO to an Azure Web App?

Easy, use this build definition that I created.

How does this work?

I leveraged the existing build definition template and replaced the Web Deploy step with a step the git push the code to the Azure Web App git repository. The orange dotted boxes denote the new steps that were added:

How do I use it?

This looks awesome! How do I use it for my own project?

  1. Setup Azure Web App to use 'Local Git Repository'. Take note of the Git URL and password; we'll need these later.
  2. git add/commit/push the build definition to your VSO.
  3. Configure a new build with the new build definition. This option is accessible through Visual Studio -> Team Explorer -> Builds. Create a new build definition, When choosing the build process template, select the template that was added to VSO in the previous step. Once selected, you should see a screen similar to below where we'll need to configure the 'Azure Git Repository' with the one created in Step 1.

  4. Voila!