练习 - 将 Web 应用程序部署到 Azure 应用服务

已完成

在本模块中，创建一个多阶段管道，用于生成应用程序并将其部署到 Azure 应用服务。 学习如何：

• 创建应用服务实例来托管 Web 应用程序。
• 创建多阶段管道。
• 部署到 Azure 应用服务。

创建应用服务实例

1. 登录 Azure 门户。

2. 从左窗格中选择“应用服务”。

3. 选择“创建”>“Web 应用”以创建新的 Web 应用。

4. 在“基本信息”选项卡上，输入下列值。

   设置	值
   项目详细信息
   订阅	用户的订阅
   资源组	选择“新建”，输入“tailspin-space-game-rg”，然后选择“确定”。
   实例详细信息
   名称	提供唯一的名称，例如 tailspin-space-game-web-1234。 该名称在 Azure 中必须唯一。 它将成为域名的一部分。 在实践中，请选择一个描述服务的名称。 请记下名称以便稍后使用。
   发布	代码
   运行时堆栈	.NET 6 (LTS)
   操作系统	Linux
   区域	选择任何区域，最好是离你最近的区域。
   定价计划
   Linux 计划	接受默认值。
   定价计划	从下拉菜单中选择“基本 B1”定价层。

5. 选择“查看 + 创建”，查看窗体，然后选择“创建”。 此部署需要一些时间才能完成。

6. 部署完成后，选择“转到资源”。 “应用服务”Essentials 显示与你的部署相关的详细信息。

   

7. 选择 URL 以验证应用服务的状态。

   

重要

本模块中的清理 Azure DevOps 环境页面会说明使用完应用服务实例后如何清理它。 清理资源可帮助确保完成此模块后不再支付 Azure 资源费用。 即使未完成此模块，也务必要按照清理步骤操作。

创建服务连接

重要

请确保已使用同一 Microsoft 帐户登录到 Azure 和 Azure DevOps。

1. 在 Azure DevOps 中，转到 Space Game - web - Release 项目。

2. 在页面左下角，选择“项目设置”。

3. 在“管道”下，选择“服务连接”。

4. 依次选择“新建服务连接”、“Azure 资源管理器”和“下一步”。

5. 依次选择“服务主体(自动)”和“下一步”。

6. 按如下所示填写必填字段：如果出现提示，请登录到 Microsoft 帐户。

   字段	值
   范围级别	订阅
   订阅	Azure 订阅
   资源组	tailspin-space-game-rg
   服务连接名称	Resource Manager - Tailspin - Space Game

7. 确保选中“为所有管道授予访问权限”。

8. 选择“保存”。

将生成阶段添加到管道

使用多阶段管道可以定义更改在管道中进行推广时所经历的不同阶段。 每个阶段定义执行该阶段管道所需的代理、变量和步骤。 在本节中，定义一个执行生成的阶段。 定义第二个阶段，以将 Web 应用程序部署到应用服务。

若要将现有生成配置转换为多阶段管道，请向配置添加一个 stages 部分，然后为管道的每个阶段添加一个或多个 stage 部分。 阶段分解为多个作业，这些作业是作为一个单元按顺序运行的一系列步骤。

1. 在 Visual Studio Code 中的项目中，打开 azure-pipelines.yml 并将其内容替换为以下代码：

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-20.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '6.x'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET 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
   

2. 在集成终端中，运行以下命令以暂存、提交更改，然后将更改推送到远程分支。

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

3. 在 Azure Pipelines 中，导航到管道以查看日志。

4. 生成完成后，选择“后退”按钮返回到摘要页，并检查管道和已发布项目的状态。

   

创建开发环境

环境是部署环境的抽象表示形式。 环境可用于定义发布的特定条件，例如授权将哪个管道部署到环境。 环境还可用于为特定用户/组设置手动审批，以便在恢复部署之前进行审批。

1. 在 Azure Pipelines 中，选择“Environments”。

   

2. 选择“创建环境”。

3. 在“名称”下，输入“开发”。

4. 让其余字段保留其默认值。

5. 选择“创建”。

将 Web 应用名称存储在管道变量中

我们将创建的“部署”阶段使用该名称来标识要部署到的应用服务实例，例如：tailspin-space-game-web-1234。

虽然可以在管道配置中对该名称进行硬编码，但是将其定义为变量可以使配置更便于重用。

1. 在 Azure DevOps 中，选择“管道”，然后选择“库”。

   

2. 选择“+ 变量组”以创建新的变量组。

3. 输入“发布”作为“变量组名称”。

4. 选择“变量”下的“添加”以添加新变量。

5. 输入 WebAppName 作为变量名称，输入应用服务实例的名称作为其值：例如 tailspin-space-game-web-1234。

6. 选择“保存”。

将部署阶段添加到管道

我们通过添加部署阶段来扩展管道，以使用 download 和 AzureWebApp@1 任务下载生成工件并进行部署，从而将“Space Game”部署到应用服务。

1. 在 Visual Studio Code 中，将 azure-pipelines.yml 的内容替换为以下 yaml：

   trigger:
   - '*'
   
   variables:
     buildConfiguration: 'Release'
   
   stages:
   - stage: 'Build'
     displayName: 'Build the web application'
     jobs: 
     - job: 'Build'
       displayName: 'Build job'
       pool:
         vmImage: 'ubuntu-20.04'
         demands:
         - npm
   
       variables:
         wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
         dotnetSdkVersion: '6.x'
   
       steps:
       - task: UseDotNet@2
         displayName: 'Use .NET 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-20.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'
   

   请注意突出显示的部分以及 download 和 AzureWebApp@1 任务的使用方式。 管道从前面创建的变量组中提取 $(WebAppName)。

   另请注意我们如何使用 environment 部署到开发环境。

2. 在集成终端中，将 azure-pipelines.yml 添加到索引中。 然后提交更改，并将其推送到 GitHub。

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

3. 在 Azure Pipelines 中，导航到管道以查看日志。

4. 生成完成后，选择“后退”按钮返回到摘要页，并检查阶段的状态。 在本例中，这两个阶段都成功完成。

   

在应用服务上查看已部署的网站

1. 如果应用服务选项卡仍处于打开状态，刷新该页面。 否则，请在 Azure 门户中导航到 Azure 应用服务，然后选择实例的 URL：例如 https://tailspin-space-game-web-1234.azurewebsites.net

   

2. Space Game 网站成功部署到 Azure 应用服务。

   

恭喜！ 你使用 Azure Pipelines 成功地将 Space Game 网站部署到了 Azure 应用服务。