使用Azure DevOps部署web app到Azure App Service

 

前提：

在Azure DevOps中Create Project。

在Github中folk代码，并下载到本地，运行和观察pipeline编译。//代码已包含了初始的pipeline配置。

在App Service中部署应用——创建Instance即可，随后打开URL。参见：https://docs.microsoft.com/zh-cn/learn/modules/create-release-pipeline/5-deploy-to-appservice

 

接下来：

首先创建service connection。

为pipeline添加一个build stage。

将你的web app name存在pipeline variable。

再为pipeline添加一个build stage，使其成为multi-stage。

刷新URL，查看web app运行效果。

 

Create a service connection

Here you create a service connection that enables Azure Pipelines to access your Azure subscription. Azure Pipelines uses this service connection to deploy the website to App Service.

 重要

Make sure that you're signed in to both the Azure portal and Azure DevOps under the same Microsoft account.

1. In Azure DevOps, go to your Space Game - web - Release project.

2. From the bottom corner of the page, select Project settings.

3. Under Pipelines, select Service connections.

4. Select New service connection, then choose Azure Resource Manager, then select Next.

5. Near the top of the page, Service principal (automatic). Then select Next.

Azure DevOps performs a test connection to verify that it can connect to your Azure subscription. If Azure DevOps can't connect, you have the chance to sign in a second time.

 

Add the Build stage to the pipeline

Here you convert your existing build pipeline to use the multistage feature of Azure Pipelines. You update your build configuration to define one stage that performs the build. Then you watch the pipeline run.

Recall that your build pipeline defines the agent pool, variables, and tasks that are required to build your app. As a refresher, here are the first few lines from your current build configuration:

trigger:
- '*'

pool:
  vmImage: 'ubuntu-18.04'
  demands:
  - npm

variables:
  buildConfiguration: 'Release'
  wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
  dotnetSdkVersion: '3.1.300'

steps:
- task: UseDotNet@2
  displayName: 'Use .NET Core SDK $(dotnetSdkVersion)'
  inputs:
    version: '$(dotnetSdkVersion)'

...

A multistage pipeline enables you to define distinct phases that your change passes through as it's promoted through the pipeline. Each stage defines the agent, variable, and steps required to carry out that phase of the pipeline. In this module, you define one stage to perform the build. You define a second stage to deploy the web application to App Service.

To convert your existing build configuration to a multistage pipeline, you add a stages section to your configuration. You then add one or more stage sections to define each phase of your pipeline. Stages break down into jobs, which are a series of steps that run sequentially as a unit.

Before we add the Deploy stage to the pipeline, let's first convert the existing build configuration to a multistage pipeline.

1. From your project in Visual Studio Code, open azure-pipelines.yml and replace its contents with this code:

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-18.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '3.1.300'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET Core SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
   
       - task: Npm@1
         displayName: 'Run npm install'
         inputs:
           verbose: false
   
       - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
         displayName: 'Compile Sass assets'
   
       - task: gulp@1
         displayName: 'Run gulp tasks'
   
       - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
         displayName: 'Write build info'
         workingDirectory: $(wwwrootDir)
   
       - task: DotNetCoreCLI@2
         displayName: 'Restore project dependencies'
         inputs:
           command: 'restore'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--no-restore --configuration $(buildConfiguration)'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Publish the project - $(buildConfiguration)'
         inputs:
           command: 'publish'
           projects: '**/*.csproj'
           publishWebProjects: false
           arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
           zipAfterPublish: true
   
       - publish: '$(Build.ArtifactStagingDirectory)'
         artifact: drop
   
   

   In YAML, white space is important. This change affects all of the white space in your file, so we recommend that you replace the entire file with what you see here. The highlighted sections illustrate the use of stages and jobs.

2. From the integrated terminal, add azure-pipelines.yml to the index. Then commit the change and push it up to GitHub.

   Save azure-pipelines.yml before you run these Git commands.

   git add azure-pipelines.yml
   git commit -m "Add a build stage to the pipeline"
   git push origin release-pipeline
   

3. In Azure Pipelines, go to the build and trace the build as it runs.

4. After the build finishes, select the back button to return to the summary page.

   

   You see that the build finished successfully. Your build pipeline accomplishes the same task as before. It builds the web app and publishes the artifact to the pipeline. But with this new change, you can now add more stages to the pipeline.

 

Store your web app name in a pipeline variable

Here you add a variable to your pipeline to store the name of your web app in App Service.

When you set up App Service earlier, you assigned it a name, such as tailspin-space-game-web-1234. The Deploy stage you'll define uses this name to identify which App Service instance to deploy to.

Although you could hard-code this name in your pipeline configuration, defining it as a variable makes your configuration more reusable.

A pipeline variable enables you to define a value in Azure Pipelines and read that value from your pipeline configuration. If the name of your App Service instance changes, you can update the variable and trigger your pipeline without modifying your configuration.

To add the variable:

1. In Azure DevOps, under Pipelines, select Library.

   

2. Select + Variable group.

3. Under Properties, enter Release for the variable group name.

4. Under Variables, select + Add.

5. For the name of your variable, enter WebAppName. For its value, enter your App Service instance's name, such as tailspin-space-game-web-1234.

6. Near the top of the page, select Save to save your variable to the pipeline.

Add the deployment stage to the pipeline

Here you extend your pipeline by adding a deployment stage that uses App Service to deploy the Space Game web application. To accomplish this objective, you define a second stage and use the download and AzureWebApp@1 tasks to download the build artifact from the pipeline and perform the deployment.

1. From Visual Studio Code, replace the contents of azure-pipelines.yml with this code:

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-18.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '3.1.300'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET Core SDK $(dotnetSdkVersion)'
         inputs:
           version: '$(dotnetSdkVersion)'
   
       - task: Npm@1
         displayName: 'Run npm install'
         inputs:
           verbose: false
   
       - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
         displayName: 'Compile Sass assets'
   
       - task: gulp@1
         displayName: 'Run gulp tasks'
   
       - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
         displayName: 'Write build info'
         workingDirectory: $(wwwrootDir)
   
       - task: DotNetCoreCLI@2
         displayName: 'Restore project dependencies'
         inputs:
           command: 'restore'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Build the project - $(buildConfiguration)'
         inputs:
           command: 'build'
           arguments: '--no-restore --configuration $(buildConfiguration)'
           projects: '**/*.csproj'
   
       - task: DotNetCoreCLI@2
         displayName: 'Publish the project - $(buildConfiguration)'
         inputs:
           command: 'publish'
           projects: '**/*.csproj'
           publishWebProjects: false
           arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
           zipAfterPublish: true
   
       - publish: '$(Build.ArtifactStagingDirectory)'
         artifact: drop
   
   - stage: 'Deploy'
     displayName: 'Deploy the web application'
     dependsOn: Build
     jobs:
     - deployment: Deploy
       pool:
         vmImage: 'ubuntu-18.04'
       environment: dev
       variables:
       - group: Release
       strategy:
         runOnce:
           deploy:
             steps:
             - download: current
               artifact: drop
             - task: AzureWebApp@1
               displayName: 'Azure App Service Deploy: website'
               inputs:
                 azureSubscription: 'Resource Manager - Tailspin - Space Game'
                 appName: '$(WebAppName)'
                 package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'
   

   Notice the use of the download and AzureWebApp@1 tasks. $(WebAppName) reads the web app name from your pipeline variable.

2. From the integrated terminal, add azure-pipelines.yml to the index. Then commit the change and push it up to GitHub.

   git add azure-pipelines.yml
   git commit -m "Add a deployment stage to the pipeline"
   git push origin release-pipeline
   

3. In Azure Pipelines, trace the build and deployment through each of the stages.

4. After the pipeline finishes, select the back button to return to the summary page.

   

   You see that both the build stages and the deployment stages finished successfully.

See the deployed website on App Service

When you created your App Service instance, you saw the default website that was created for you. Here you revisit your website to see the results of your deployment.

1. From a web browser, navigate to the URL that's associated with your App Service instance.

   If you still have the browser tab open, simply refresh the page. If the browser tab isn't open, you can find the URL on the App Service details page in the Azure portal.

   

2. See that the Space Game website has been successfully deployed to App Service and is running.

 

Explore your pipeline's analytics

Let's examine a few of your pipeline's analytics.

1. In Azure Pipelines, navigate to your pipeline.

2. Select the Analytics tab.

   

3. Note the pass rates and average duration of your pipeline runs.

   

4. Under Pipeline pass rate, select View full report.

   

   At this point, you have a basic pipeline report that contains data for just a few runs.

 

 

 

 

参见：

Monitor the health of your pipeline

https://docs.microsoft.com/zh-cn/learn/modules/create-release-pipeline/6-monitor-pipeline-health