Understanding and setting up CI-CD of .NET web app through VSTS on Azure VM (#4 of 5)

Welcome to 5 Part blog Series that covers Azure DevOps, this is 2nd part.

Part 1 - Introduction of Azure DevOps and Basic terminologies.

Part 2 - Understanding and setting up CI/CD for Python App on Azure

Part 3 - Setting up CI / CD of .NET Core running on Linux  on Azure

Part 4 - Setting  up CI / CD of .NET application using Azure App Service.

Part 5 - Setting up CI / CD of Node.js application using Azure App Service.

Continuous integration and continuous deployment has become one of the most common use cases of Microservices early adopters. CI/CD merges development with testing, allowing developers to build code collaboratively, submit it the master branch, and checked for issues. This allows developers to not only build their code, but also test their code in any environment type and as often as possible to catch bugs early in the applications development lifecycle.
Here we will be setting up CI / CD through VSTS on Azure for .NET framework based Web App running on Azure VM and will understand various options and features that VSTS offers.
Step1 . login into Azure Portal and click on create a resource and Select DevOps Project.

Step 2 . Now Select .NET application Type and click Next.

Step 3.  Now we will select ASP.NET as application framework and click next

Step 4. I want to deploy my app on VM on Azure so select Virtual Machine and click next.

Step 5. Here I am selecting existing VSTS code Repository , you can also create a enew VSTS account , enter WebAppOnAzureVM as the project name , select Azure Subscription username and password for this VM and click Done as shown below. VM deployment will take few minutes , by that time you can open VSTS account.


Step 6 After some time you can see following Azure Resources in your Azure Subscription.


Now click on the VM which I have highlighted in above screenshot,  you must see following types of settings.

Now You can see a public IP of VM and a DNS name as shown below in highlighted boxes.


If you open this IP in browser or if you open the highlighted DNS as shown in second box webapponazurevm72fhxqqvsgwzw.centralindia.cloudapp.azure.com you can see following web app.


Step 7 Open VSTS account , my VSTS account that I have entered in step5 is  https://codesonvsts.visualstudio.com , here you can see the name of project which is WebAppOnAzureVm


Step 8 . Now Create new Work Item , by clicking on Work from left and then New Work Item as shown below.


Step 9. let me create a task for me to update the Heading of this newly created Website. After clicking on “Work” I am landed to this page and I have to create “New Work item” and assigning that item to me , as shown below.


Step 10. Now click on Code->Files Menu at the left to do the above created task of updating the heading of Web Page as shown below and then click commit.


after committing code you should also select the work item which you created in previous step as shown below.


Step 11. Since our CI process is already in place , now click on Builds menu from the left and you can see that a new build is triggered for this change as shown below.


You can also click on the build no. highlighted in above pic to see the progress of this build as shown below, If everything goes fine build should be succeeded as shown below.


Step  14 : Now go to Release menu from left and you can see a new Release is triggered as shown below and now click on Release-2 hyperlink.


Step 15 : Here you can see after few seconds release gets completed and web app deployed.


Step 16 :Now lets open the ASP.net Web App again and see that the app is updated.


Step 17: Do not forget to mark your task as done and close it.

In Next Blog Post we will be setting up CI CD pipelines for a Node.js Web app running on Docker containers on Azure.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.