Click here to Skip to main content
15,886,689 members
Articles / DevOps

Step by Step Process to Deploy Web Application to Azure with VSTS-CI/CD Pipeline

Rate me:
Please Sign up or sign in to vote.
4.50/5 (2 votes)
18 Apr 2018CPOL3 min read 12.8K   5   4
Step by step process to deploy web application to Azure with VSTS-CI/CD pipeline

Introduction

This article is about publishing ASP.NET MVC application to Azure or on premise server using CI/CD pipelines in the Visual Studio team services.

Image 1

Background

The user should have some knowledge about the application deployment process onto server or to cloud.

Prerequisite

User should have an account in Visual Studio team services. If you have any of the MSDN or Visual Studio subscriptions, you can use VSTS.

User should have an account in Azure for deploying and creating application on the cloud side.

If you already have code set up in VSTS, you can skip to step 4.

Step 1: Create VSTS Project

In VSTS, create a project under your account.

Image 2

You can select the Source control version as GIT or TFS. I selected Git because TFS creates problems with branching which is used in Azure for deployment in later stages. You can define which branch has to be deployed to the Azure and which is required field.

Image 3

Step 2

Clone the branch that is created by VSTS to your local repository. You can use the option "Clone in Visual Studio" that makes it simpler to MAP and create your local branch.

Image 4

Image 5

You will get a message that the clone was successful. Create a new MVC Web project into that clone from the Team services itself. This would save you time to move and copy the project from other folders.

Image 6

Step 3: Push the Branch to VSTS

Create a local branch for your local copy and push everything to VSTS.

Image 7

Once you push it, you will see it in the VSTS.

Image 8

Step 4: Create Build in VSTS

Click on the set up build.

Image 9

You will get prepopulated dropdowns. You can change the settings here with the branch for different build.

Image 10

Select a Template

You can select any template based on your application. I have chosen ASP.NET.

Image 11

You can use any build option based on the requirement. I have selected Build Solution. You can find more information here.

Image 12

Hit the save and Queue button. A pop up appears with to save build definition. You have to select the agent queue in this. Agent is compiler from VSTS that builds your application for VSTS. You can select many options and OS. I have selected Hosted VS2017. You can also set up various other properties like the Build Configuration and Platform, etc. or your own parameter by clicking on the add button.

Hit the save and queue again.

Image 13

You can see the build in progress under the build definitions.

Step 5: Create Release Definition

Click on the release tab under the Build and Release. Create new definition.

Select a template. I am choosing Azure App service Deployment since I would be hosting it on the Azure Cloud.

Give the environment the name as Test or according to your situation.

Image 14

Create an artifact from the build definition that we created.

Image 15

Set Continuous Build Trigger

Trigger is used to tell VSTS when to start the deployment.

Image 16

You can also schedule the trigger by time.

Pre Deployment Conditions

You can add conditions for deployment. You can have multiple environments and so you can set condition on previous environments successful deployment and test. For example, deploy to production only when the app is successfully deployed to test.

Image 17

Step 6: Create CD Pipeline in Azure

Create Azure app service in Azure.

Image 18

Click on the service and select Continuous Delivery from the options.

Image 19

Configure the CD service.

Image 20

Select the appropriate options that you created in the VSTS. Most of the options would be pre populated.

Image 21

Configure CD to ASP.NET or according to your scenario.

Image 22

If you want to set up load test, you can use this option to set up load test.

Click OK and Azure will set up your continuous delivery. The application would be deployed.

Test your application on the web.

You can also see the updates in VSTS about the release and status.

I hope this article would be helpful. Let me know if there is a chance for improvement of this article and I will try to make the changes.

Thanks for reading!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionScreenshots and images? Pin
Klaus Luedenscheidt18-Apr-18 18:33
Klaus Luedenscheidt18-Apr-18 18:33 
AnswerRe: Screenshots and images? Pin
John Kuriakose19-Apr-18 5:38
John Kuriakose19-Apr-18 5:38 
GeneralRe: Screenshots and images? Pin
Klaus Luedenscheidt22-Apr-18 19:03
Klaus Luedenscheidt22-Apr-18 19:03 
GeneralRe: Screenshots and images? Pin
Klaus Luedenscheidt22-Apr-18 19:04
Klaus Luedenscheidt22-Apr-18 19:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.