Setting up CI-CD of ASP.net Core Web App on Azure (#3 of 5)

Welcome to 5 part blog Series that covers Azure DevOps, this is 3rd 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 and will understand various options and features that VSTS offers for the purpose of demo we will be creating a ASP.net Core web app running on containers on Azure.

 

Step 1:  login to Azure Portal , Click on “Create a resource” and select “DevOps Project” as shown below.

1-logintoAzurePortal


Step 2 :  Now Select .NET as the Technology.

1-SelectDotNet.PNG


Step 3:  Now Select ASP.net Core as the application framework

2-SelectASPNetCore.PNG


Step 4: Now Select Azure Service as “Web App for Containers” , as we will be running our .NET core web app on containers.

3-SelectVirtualMachine


Step 5:  Now I am creating a new VSTS account and giving “HelloDotNet” as my project name , choosing my Azure Subscription and “HelloDotNetWebApp‘ as name of Web app and now chooses Central India as the location .4-ConfigureVSTSAndAzureResources.PNG


Step 6 :  Now https://codeonvsts.visualstudio.com/ is the newly created VSTS account and we can open this in new browser window/tab and click on the project.5-LoginToNewVSTS.PNG


Step 7 : first open the newly created web app in new window and see it is running fine.

8.PNG


Step 8 : After that go to Work Items and create a new Work Item where we want to change the heading of home page of our .NET Core Web app.6-clicktowork.png


Step 9 : I have added a new Item assigned it to me .

7.PNG


Step 10 : After Modifying the code of Index.html inside View folder of our web app , we will commit the code and immediately CI pipeline will be triggering Build for this commit as shown below.

9


Step 11:  Once all steps of CI gets completed successfully , CD pipeline trigger the release as shown below. You can see Release-2 is in progress.

10


Step 12: To see more details we can click on Release-2 and following page will open where we can see it is about to deploy our Web app on Azure App Service(of type Containers)11.png


Step 13:  In few seconds you will notice that our Deployments get succeeded for Dev Environment as shown below. Now in next step we can browse our updated web app.12.PNG


Step 14: Now I can see my updated web site which is having updated heading. In my case I can access my web app by this url hellodotnetwebapp.azurewebsites.net , 

13.PNG


Here you witnessed how easy it is to setup entire CI-CD for a Dot Net Core Web App running on Containers on Azure Cloud.

In next blog post (Part 4) we will see how to setup CI CD of a .NET Framework 4.7 Web App running in Azure VM.

https://cloudandmobileblog.com/2018/07/27/understanding-and-setting-up-ci-cd-of-net-web-app-through-vsts-on-azure-vm-4-of-5

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.