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.
In this tutorial, we will discuss the following in detail:
- Create Build Definition (Continuous Integration)
- Create Release Definition (Continuous Delivery)
Table of Contents:
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
Click on Empty Process template to start. We will add all the steps that are required to build our solution successfully.
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.
Make sure to save the Build definition.
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.
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
Next, under the Build category select MS Build and click on ADD8
Select the Build Solution Step and click on 3 DOTS (…) next to Project box and select the solution file.
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.
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.
Trigger a build by selecting the Queue option.
Click on Queue button. Once the build starts, click on Build number, as highlighted below, to view the build status.
As shown below the build is successful using the inbuilt hosted agent.
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.
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
- Sign into the Microsoft Azure portal
- Choose the + New icon in the left navigation bar, then choose Web App.
Enter a name for the App which will be used later in the release process to be created in VSTS.
Click Create.
Next, Click on All Resources to view the web app created.
The resource SampleWebApp-VN in Create New option will display the URL of the application which will be deployed using release process in VSTS.
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.
Select Azure App Service Deployment option under Featured templates and click on Apply. 
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 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.
Enable the slider for Continuous deployment trigger.
If enabled this ensures the release will start automatically and 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.
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.
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.
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.
#2) The Logs tab will provide details of the entire release process steps to all environments run to deploy the web application to Azure.
#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.
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.