DevOps with Microsoft VSTS: CI/CD to an Azure Web App

Microsoft VSTS DevOps features for automating the build (Continuous Integration) and release process (Continuous Delivery) to Azure Web App:

In VSTS Part 1 Tutorial, we learned how Microsoft VSTS can be used as an ALM tool (Work Items, Agile Project Planning, Version Control) in the cloud.

                      Suggested Reading => Thorough DevOps Training Tutorials

In this part 2 tutorial, we will extend the VSTS tutorial to showcase the DevOps features especially Continuous Integration and Continuous Delivery to an Azure Web App.

Apart from deploying as an Azure Web App, you can also deploy to a Windows Virtual Machine (VM) which is created as an instance from the Azure portal.

DevOps with Microsoft VSTS

In this tutorial, we will discuss the following in detail:

  1. Create Build Definition (Continuous Integration)
  2. Create Release Definition (Continuous Delivery)

Create Build (Continuous Integration)

A continuous integration or CI is a process when every time a developer commits or delivers source code changes to the version control repository, in this case, it is the VSTS repo in which the build is performed either on every check-in or using a schedule.

To start setting up continuous integration in VSTS we first start by creating a build definition.

Create a New Build Definition

Go to the Builds section of the Build and Release hub and create a New definition

create a New definition

Click on Empty Process template to start. We will add all the steps that are required to build our solution successfully.

elect Agent queue as Hosted

Agents are normally required on the build machines and the environments where the build and deploy would be done. So here in VSTS, this agent queue is inbuilt for you to build your app. This is very comfortable to use as you do not need to download and install any agents for build and release.

In the first step select Agent queue as Hosted 2017.

select Agent queue

Make sure to save the Build definition.

save the Build definition

save the Build definition

Click on Save

Click on Save

Click on Get Sources task to select the visual studio solution which is shared to the VSTS version control repository.

Click on 3 DOTS (…) next to Server path and select the solution folder and click OK.

select the solution folder

select the solution folder

Click on Save. Click on Add + next to Phase 1.

The tasks that you will add here will ensure that they run on the agent identified. Add two NuGet tasks in the following order to restore the NuGet packages.

First, add NuGet Tool Installer and then NuGet Restore. NuGet is basically designed to share the code in .NET with the help of packages. More on NuGet can be found @ https://docs.microsoft.com/en-us/nuget/what-is-nuget

dd NuGet Tool Installer and then NuGet Restore

add NuGet Tool Installer and then NuGet Restore

dd NuGet Tool Installer and then NuGet Restore

Next, under the Build category select MS Build and click on ADD8

select MS Build and click on ADD

Select the Build Solution Step and click on 3 DOTS (…) next to Project box and select the solution file.

Build Solution

Build Solution


Save the Build Definition.

Add another step to Publish the artifacts to the server as a drop folder which will be used later during the Release process.

Under Utility select the Publish Build Artifacts step.

Publish Build Artifacts

Publish Build Artifacts

Save the build definition.

Option – Before triggering a build, if required, enable the option to build on every check-in in the Triggers TAB of the Build Definition. If not based on the Continuous Integration option then enable the Scheduled option on the right to build the solution during a specified weekday and time. This will depend on how you want your project to be built.

enable the option to build on every check-in

Trigger a build by selecting the Queue option.

Trigger a build by selecting the Queue

Trigger a build by selecting the Queue

Click on Queue button. Once the build starts, click on Build number, as highlighted below, to view the build status.

click on Build number

As shown below the build is successful using the inbuilt hosted agent.

Build is successful

Click on the build number (E.g. Build 40 in this screenshot) to verify whether the artifacts have been uploaded to the drop folder in the server or not. Click on Artifacts TAB => drop folder.

Click on the build number

Create a Web Appresource in the Azure portal

As of the previous section we have defined the Build Definition (Continuous Integration). In this section, we will see now see how to set up a Release Definition (Continuous Delivery) process to Azure of the ASP.NET application built earlier.

Pre-requisite

We will have to create a web app using the portal as shown below before proceeding with deploy to Azure Cloud.

Create an Azure web app using the portal

  1. Sign into the Microsoft Azure portal
  2. Choose the + New icon in the left navigation bar, then choose Web App.

2. Choose the + New icon in the left navigation bar

Enter a name for the App which will be used later in the release process to be created in VSTS.

Enter a name for the App

Click Create.

Next, Click on All Resources to view the web app created.

Click on All Resources

The resource SampleWebApp-VN in Create New option will display the URL of the application which will be deployed using release process in VSTS.

SampleWebApp-VN will display the URL

Create Release Definition (Continuous Delivery)

Since the build artifacts are available in the drop folder as in the build definition the release definition which we will create now for deployment will pick up the artifacts and then deploy them as an Azure web application.

Back in VSTS dashboard create a release definition and link to the build definition which will enable the continuous delivery process.

In the Build and Release hub, Click and select Create release definition as shown.

Click and select Create release definition

Select Azure App Service Deployment option under Featured templates and click on Apply. Select Azure App Service Deployment option

Rename the environment to QA Env.

Rename the environment to QA Env

Click on the + Add link under Artifacts and select your build definition to link to. Under Source type on the right select the build definition created earlier.

select your build definition

Select the Build Definition created earlier and click on ADD.

Click on Continuous Deployment trigger icon and enable the same. This is to ensure that the deployment starts once the Build is completed.

the deployment starts once the Build is completed

Enable the slider for Continuous deployment trigger.

If enabled this ensures the release will start automatically and deployment will be triggered to Azure.

deployment will be triggered to Azure.

Next click on the link view environment logs under the QA Env to start configuring the tasks to deploy to Azure Web App.

start configuring the tasks to deploy to Azure

Choose the appropriate Azure Subscription and App Service name created in Azure portal earlier after Authorization. Also, ensure to select the application to deploy which is in the drop folder.

elect the application to deploy

Save the Release Definition.

Create a Release to Deploy your App

We can now start the deploy process of the build by creating a Release.

#1) Select + Release drop down and Create Release. Select the Environments as QA Env and proceed. The release is now shown as successful in GREEN TICK.

. The release is now shown as successful in GREEN TICK

. The release is now shown as successful in GREEN TICK

Double click on the Release-<Number> under Title to look at the Deployment status of the application to all the different environments defined in the release definition.

Deployment status of the application

#2) The Logs tab will provide details of the entire release process steps to all environments run to deploy the web application to Azure.

Logs tab will provide details of the entire release process

#3) Once the release has run successfully, to view the web application deployed on Azure as a web application browse to the URL provided in the portal.

In this Example, click here to navigate to the sample web app.

The ASP.net web application is now deployed to Azure.

The ASP.net web application

Summary

In this two-part series, we have seen how Microsoft VSTS can be used as an ALM tool (Work Items, Agile Project Planning, Version Control) on the cloud and can be extended for automating the build (Continuous Integration) and release process (Continuous Delivery) to Azure Web App.

For almost all the DevOps enthusiasts and .NET project teams, Microsoft VSTS would be an ideal tool for the end to end delivery of your software applications.

Watch out our upcoming tutorials to know more about AWS DevOps tools.

PREV Tutorial | NEXT Tutorial