Share via


Azure DevOps to Azure AppServices

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

    DevOps_NewProject

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

    DevOps_ProjectName

  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

    DevOps_clone

2. Visual Studio

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

    DevOps_VSclone

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

    DevOps_VS_Newproject

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

    DevOps_VSNewWebsite

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

    DevOps_VSMVC

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

  6. Change the application name as shown below

    DevOps_AppNameChange

  7. Now, lets check-in this code

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

    DevOps_Changes

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

    DevOps_VSCommitAndPush

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

    DevOps_CodeUploaded

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

    DevOps_SetupBuild

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

    DevOps_BuildTemplate2

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

    DevOps_BuildSaveAndQueue

  5. In the next window, click Save & Queue

    DevOps_BuildSaveAndQueue2

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

    DevOps_BuildLink

  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

    DevOps_BuildReport

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

    DevOps_ReleaseEmptyJob

  3. Next goto Tasks tab and search for Azure AppService

  4. Select Azure App Service Deploy as shown below

    DevOps_PublishTask

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

  6. Select Azure Subscription and click on the Authorize button

    DevOps_AzureSubAuth

  7. Now, select Web App on Windows

  8. Next, select a AppService Website as shown below

    DevOps_AppServiceName

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

    DevOps_PublisheSave

4. Setup a Release

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

    DevOps_ReleaseButton2

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

    DevOps_CreateRelease

  3. Now deploy this Release to Azure

  4. Click on the Release-1as shown below

    DevOps_ReleaseLogButton

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

    DevOps_Deploy

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

    DevOps_deployCreate

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

    DevOps_DeployLogsButton

  8. Here is the screenshot when the deployment is completed

    DevOps_Deployed

5. Website

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

    DevOps_publishedwebsite