Deploying Web Applications into Azure with DevOps Tooling

Posted:

In last week’s post we looked at some of the DevOps tools made available by Microsoft. In this week’s post we’ll take a deeper look at how we can use some of these tools to deploy Web Applications into Azure.

 

Microsoft Visual Studio Team Services (VSTS) is a cloud service for sharing code, tracking work and releasing software in any language. It provides free and unlimited private Git repositories for version control of your code; the ability to build CI/CD Pipelines and automate the build, test and deployment of code; and a plethora of Agile tools to support planning, track work, and share progress via dashboards.  We’re going to use it here to automatically deliver an Azure WebApp using a Continuous Delivery Pipeline once we have pushed a code change to a code repository.

 

You’ll need an Azure subscription and a VSTS account to follow the steps. VSTS is free for the first 5 members of your team so it’s easy to get started. You can find steps for setting up an account and your first project here. We’re going to manage code using Git.

 

With the VSTS account configured, we need to import some source code to work with. I’m going to use a Sample HTML/CSS/KS Web App available here.

 

When a VSTS account is setup a new project called MyFirstProject is also set up, select that project and then from the top menu select the Code option. From the MyFirstProject Dropdown select ‘Import Repository’.

 

Pic1.png

 

Copy in the URL to the sample Web App git repository and click import to copy the sample code into your VSTS Git repo

https://azure.microsoft.com/en-us/resources/samples/app-service-web-html-get-started/

 

We’ll now sign-in to the Azure portal and create a WebApp. We’re going to create a standard WebApp, with a Windows OS using the S1 Standard Pricing Tier.

 

pic2-1.png

Once the Web App is up and running we can begin to build our delivery pipeline. From the Web App options select Continuous Delivery and then Configure. Select Choose repository and select VSTS for the repository and MyFirstProject for the Project.

 

pic3-1.png

Select Configure Continuous Delivery and choose Static Web App from the dropdown menu. Leave “Path to application code” empty.

 

We’ll cover test and deploy tasks in a future blog post so leave those fields empty for now. After clicking ‘OK’, Azure Continuous Delivery kicks off build and deployment tasks in VSTS, and the deployment of the application will be automatically initiated. We can check the activity log for progress.

 

pic4-1.png

 

With the build and deployment complete, our sample Web App has been automatically deployed.

 

pic5-1.png

Now that we have automated our delivery pipeline, any change we make to the application in the source code is automatically built and deployed. There is a code editor within VSTS we can use to test this. We’ll use it to add some options to the top menu bar, commit the change and then check as the update is automatically delivered.

 

From the VSTS Code option, edit the MyFirstProject/index.html file.

 

 

pic6-3.png

Add the following to the Navigation bar and then hit Commit to trigger a build.

 

<li><a href=”#services”>Services</a></li>

<li><a href=”#support”>Support</a></li>

<li><a href=”#pricing”>Pricing</a></li>

 

When the build is complete it will trigger a deployment, it’ll take a few minutes but we can track progress either through VSTS or the Azure Continuous Delivery option. Once the deployment is complete we can see the changes we have made have automatically been delivered to the Web Application.

 

pic7-2.png

 

And with that we’ve built a very simple delivery pipeline that will automate the deployment of a Web Application as code changes are made and committed. In future posts we will look at how we can add tests, staging and approval phases to build resiliency into our delivery pipeline.