Azure DevOps to Azure AppServices

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