Azure DevOps to Azure AppServices

[Prashant Pratap]

First published on MSDN on Oct 25, 2018

Azure DevOps is a complete solution for software development, from planning to building to deployment. It has easy to use interface, with a nice flow from source code to publishing. Here is a nice link that talks about different services within Azure DevOps

Here are quick steps for on demand publishing websites from DevOps to AppService.

In this tutorial, we are going to show how to create a project in DevOps, upload source code to DevOps, build this source code and finally publish it to Azure AppService

1. DevOps Portal

1. Log into DevOps Portal at https://dev.azure.com
2. Create a new project, by clicking on the New Project button as shown below





3. In the next screen, give a project name and click on the Create button

   

   
   


4. Once the project is create, you can clone the repo in Visual Studio as shown below


5. If you like to push your existing code to this repo, select 2nd option
   

   

   
   

2. Visual Studio

1. When you click on Clone in Visual Studio , VS will prompt you to select a local path as shown below

   



2. In the Visual Studio, select Team Explorer tab and click on Create a new project as shown below

   



3. In the new project dialog, select Web | ASP.NET Web Application and give a project name as shown below

   




4. In next window, select MVC and click OK button as shown below

   



5. Once the project is created, in the Solution Explorer open View | Shared | _Layout.cshtml page
   





6. Change the application name as shown below

   




7. Now, lets check-in this code


8. In the Team Explore , click on the Changes button as shown below

   




9. Enter a comment and commit the changes as shown below

   









10. Browse to the Azure DevOps portal, go to Code tab, you should see the new project files as shown below

    

3. Setup a Build pipeline in Azure DevOps

1. Now we have uploaded our source code to Azure DevOps Repo , lets build our source code


2. In the Code , click on the Set up build button

   




3. Select ASP.NET template from the list as shown below

   




4. Change the name and click on Save & Queue as shown below

   




5. In the next window, click Save & Queue
   

   




6. Once the build is queued, you can click on the build name to get more details as shown below

   





7. Once the build is successfull, it is time to Publish

4. Publish to Azure AppService

1. To create a Release Pipeline , click on the Release button as shown below

   





2. In the template window, select Empty Job as shown below

   




3. Next goto Tasks tab and search for Azure AppService


4. Select Azure App Service Deploy as shown below
   

   

   
   


5. Click on the Azure App Service Deploy , select Version 4.*(preview)


6. Select Azure Subscription and click on the Authorize button

   




7. Now, select Web App on Windows
   


8. Next, select a AppService Website as shown below

   





9. Once the publish settings are done, click on Save as shown below

   

4. Setup a Release

1. Once the publish pipeline is done, you can click on the Create a Release button as shown below
   

   



2. In the next dialogbox, select Stage 1 and click on Create button

   



3. Now deploy this Release to Azure


4. Click on the Release-1 as shown below

   





5. Next, click on the Deploy button as shown below

   



6. In the next dialogbox, click on Deploy button as shown below

   



7. This should start the deployment. You can click on the In progress link to get details as shown below

   



8. Here is the screenshot when the deployment is completed

   

5. Website

1. 
   Now browse to your Azure AppService website, you should see the Wabac as shown below