在 Azure DevOps 中为 ASP.NET Core 3.1 和 Angular 10 设置生成和发布管道

Greg V Reyes

2.94/5 (6投票s)

2020 年 11 月 18 日

CPOL

10分钟阅读

28468

简要介绍持续集成和交付的好处，为什么在项目开始时就进行设置很重要，描述其元素和阶段，并列出设置生成和发布管道时常见的错误。

必备组件

本教程需要以下工具

Visual Studio 2019 – (https://visualstudio.microsoft.com/downloads/)
Angular 10 – (https://angular.io/guide/setup-local)
ASP.NET 3.1 – (https://dotnet.microsoft.com/download/dotnet-core/3.1)
SQL Server – (https://www.microsoft.com/en-au/sql-server/sql-server-downloads)
Azure Pipelines – (https://azure.microsoft.com/en-us/services/devops/pipelines/)
Azure 订阅 – (https://azure.microsoft.com/en-au/free/)
GitHub 源代码 – (https://github.com/romvoid/ProductAppSample )
Git、C#、Azure SQL 数据库、Entity Framework、ASP.NET Core、Angular、Azure App Service、Azure DevOps 相关知识

概述

在本文中，我们将简要介绍持续集成和交付的好处，为什么在项目开始时就进行设置很重要，描述其元素和阶段，并列出设置生成和发布管道时常见的错误。

本文还将演示如何使用 Azure DevOps 设置持续集成和交付，通过端到端的教程，从使用 Git 设置代码存储库，到使用 YAML 和 Azure ARM 模板创建生成和发布管道。最终，这将生成一个以 Angular 10 为前端，ASP.NET Core 3.1 和 Azure SQL 为后端的 Azure App Service。

持续集成和交付的好处

更快的发布
更小的代码更改
测试可靠性
可维护性
故障隔离
历史记录
团队责任感

为什么在项目开始前设置 CI/CD 管道很重要？

在项目开始前设置持续集成和交付，将规划好构建和部署所需的所有任务。在项目早期，我们将能够确定交付软件所需的组件和依赖项。

CI/CD 管道的要素

源代码阶段

源代码存储库是运行生成管道的首要组件。代码的更改会触发 CI/CD 工具来运行生成。

源代码控制涉及的代码提交和拉取以及将本地 Git 存储库与远程存储库同步等活动。此外，评论提交、分支、合并和标记也是管理存储库的有效方法，并最终获得结构化的可跟踪源代码文件。

生成阶段

这是我们将所有代码组件和依赖项组合在一起，以编译和生成用于交付和部署的包的地方。

生成阶段涉及的活动包括添加一系列任务，如编译、测试、获取依赖项和发布，以生成高质量的软件包。

测试阶段

在大多数情况下，测试阶段会包含在生成阶段，例如运行单元测试或集成测试。

测试应始终包括代码中关键的可测试功能，并产生可从 DevOps 等持续集成工具发布的“失败”或“成功”结果。通过这种方式，我们可以决定是否继续将版本发布到不同的环境。

部署阶段

一旦包准备好并经过验证，并且所有自动化测试用例都通过了。现在就可以将其部署到测试、UAT 或生产环境了。

示例持续集成和交付工具

源代码控制

Azure Repos
BitBucket
GitHub
GitLab

生成/测试

Azure DevOps
Jenkins
CircleCi
Shippable
Travis Ci

部署/发布

Azure DevOps
Docker

以下是使用 Azure DevOps 的端到端持续集成和持续交付管道的示例。一个简单的 Angular 10、ASP.NET Core 3.1 CRUD Web 应用程序，使用 SQL Server 作为后端数据库来管理产品详细信息。

说明

从 https://github.com/romvoid/ProductAppSample 下载源代码，然后将其提取到您计算机上的一个文件夹中。我们将在此教程中完全使用 Azure DevOps，例如 Azure 存储库、生成和发布管道。

请按照以下步骤在 Azure DevOps 中定义 CI/CD：https://dev.azure.com/{youraccount}/{yourproject}/_git/ProductAppSample

源代码控制

通过单击左窗格中的 + 号，然后选择 新建存储库，创建一个 Azure 存储库。

输入存储库名称，然后单击创建。将创建一个具有 master 作为默认分支的存储库。

现在我们将把 ProductAppSample 源代码上传到 Azure DevOps。在 Visual Studio 2019 中打开 ProductAppSample。

右键单击解决方案，然后选择创建 Git 存储库…

创建 Git 存储库后，解决方案、项目和文件将带有左侧的锁定图标，表示它们已添加到本地 Git。

现在，我们将把源代码发布到 Azure 存储库。转到视图菜单，然后选择 团队资源管理器。

单击主页下拉菜单，然后选择同步。由于我们尚未将源代码发布到任何 Git 服务。它将允许您选择要使用的 Git 服务，选择 推送到 Azure DevOps 服务，然后在发布 Git 存储库中

系统将提示您使用您的 Microsoft Azure DevOps 帐户登录。登录后，单击 发布存储库按钮。

返回 Azure DevOps 存储库，您现在将看到源代码已上传到 ProductAppSample 存储库。

生成

在 ProductAppSample 存储库中，单击 设置生成。这将显示生成管道的预定义模板列表。选择 入门管道。

这将打开 YAML 编辑器。请注意，它创建了一个名为 azure-pipelines.yml 的文件，该文件可以添加到存储库根目录的源代码文件中。生成定义现在将作为代码添加。您也可以使用 经典编辑器，它会显示 可视化设计器。使用 YAML 的优点在于它可以像管理其他源代码文件一样进行管理。您仍然可以通过单击右侧的 显示助手按钮来查看任务模板。

现在我们将添加运行 ASP.NET Core 3.1 Angular 生成所需的任务。单击 显示助手按钮。然后删除步骤下方的任务

在 pool 下，用以下代码替换，注意对齐。

vmImage: 'windows-latest'
   demands: npm

   variables:
     BuildConfiguration: 'Release'
     RestoreBuildProjects: '**/*.csproj'
     TestProjects: '**/*[Tt]ests/*.csproj'
     ArtifactName: 'ProductAppSample'

在“任务”窗格搜索框中，键入“Core”，然后按 Enter。确保您的光标位于 steps: 下方。选择 使用 .NET Core，然后单击添加。

在“任务助手”中，选择 .NET Core，确保命令设置为 build。

再次选择 .NET Core，然后将命令更改为 test

再次选择 .NET Core，然后将命令更改为 publish。

现在搜索“发布生成构件”任务，然后添加。

检查 YAML 代码，确保它与以下代码相似

# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- master

pool:
  vmImage: 'windows-latest'
  demands: npm

variables:
  RestoreBuildProjects: '**/*.csproj'
  TestProjects: '**/*[Tt]ests/*.csproj'
  ArtifactName: 'ProductAppSample'

steps:
  - task: UseDotNet@2
    displayName: Use .Net Core 3.1.x SDK
    inputs:
      packageType: 'sdk'
      version: '3.1.x'

  - task: DotNetCoreCLI@2
    displayName: Restore
    inputs:
      command: 'restore'
      projects: '$(RestoreBuildProjects)'
      feedsToUse: 'select'
 
  - task: Npm@1
    displayName: 'npm install'
    inputs:
      workingDir: ProductAppSample/ClientApp
      verbose: false

  - task: DotNetCoreCLI@2
    displayName: Build
    inputs:
      projects: '$(RestoreBuildProjects)'
      arguments: '--configuration $(BuildConfiguration)'

  - task: DotNetCoreCLI@2
    displayName: Test
    inputs:
      command: test
      projects: '$(TestProjects)'
      arguments: '--configuration $(BuildConfiguration)'

  - task: VSBuild@1
    displayName: 'Build Database Project'
    inputs:
      solution: ProductAppSampleDB/ProductAppSampleDB.sqlproj
      platform: 'Any CPU'
      configuration: '$(BuildConfiguration)'

  - task: CopyFiles@2
    displayName: 'Copy ProductAppSampleDB dacpac to release'
    inputs:
      SourceFolder: ProductAppSampleDB\bin\Output\
      Contents: '*'
      TargetFolder: '$(build.artifactstagingdirectory)\ProductAppSampleDB'
  
  - task: CopyFiles@2
    displayName: 'Copy ARM Templates to release'
    inputs:
      SourceFolder: ARMTemplates
      Contents: '*'
      TargetFolder: '$(build.artifactstagingdirectory)\ARMTemplates'

  - task: DotNetCoreCLI@2
    displayName: "Publish"
    inputs:
      command: 'publish'
      publishWebProjects: true
      arguments: '-r linux-x64 --configuration $(BuildConfiguration) 
                  --output $(Build.ArtifactStagingDirectory)'
      zipAfterPublish: true
    
  - task: PublishBuildArtifacts@1
    displayName: 'Publish Artifact'
    inputs:
      PathtoPublish: '$(build.artifactstagingdirectory)'
      ArtifactName: '$(ArtifactName)'

现在单击 保存并运行以测试生成

如果生成成功，它将生成一个构件，其中将存储软件/Web 包。

通过单击 Jet 图标，然后选择管道，转到“管道”。然后单击 ProductAppSample 管道。

它将加载运行列表页面，显示提交的描述以及分支和提交 ID。

单击描述以查看生成摘要、代码覆盖率和测试结果。

单击 1 个已发布链接以查看已发布的构件。

单击后退箭头按钮返回到生成摘要，然后单击作业以显示作业运行结果。这将显示 YAML 文件中定义的作业步骤和任务。

Release

现在我们将创建一个发布管道，将包发布到 Azure App Service。

单击管道>发布，然后单击 新建管道按钮。

在“新建发布管道”页面，您会注意到它有两个部分：构件和阶段。它还会提示您选择一个模板。目前，选择 空作业。

在“阶段”窗体中，将阶段名称更改为 Test。然后单击保存。然后输入注释，单击确定。

单击构件上的 + 添加，然后选择“生成”作为源类型，然后在“源”（生成管道）中选择 ProductAppSample。

单击闪电按钮，然后启用“持续部署触发器”，以便在有新生成可用时创建发布。单击保存。输入注释，然后单击确定。

在“阶段”部分，单击 1 个作业，0 个任务链接以打开“阶段”页面。

单击“代理作业”以查看有关代理的详细信息。将“代理规范”更改为 windows-2019 以使用最新版本的代理规范。

在添加任务之前，我们将创建变量并分配任务所需的这些值。

单击“变量”选项卡，然后创建以下变量。您需要根据您的 Azure 订阅和帐户详细信息更改变量的值。最重要的是，您需要特别更改 HostingPlanName、SqlServerName 和 WebsiteName 的值。

返回“任务”选项卡。现在将显示任务列表，对于本教程，我们将创建三个任务，如下所示

单击“代理作业”旁边的 + 加号，然后搜索 ARM 模板，选择 ARM 模板部署，然后单击添加。

按照以下方式设置 ARM 模板部署的值，您需要创建一个服务连接才能连接到您的订阅。您可以在 Microsoft 文档中找到有关创建服务连接的更多详细信息，以配置您的服务连接

https://docs.microsoft.com/en-us/azure/devops/pipelines/library/connect-to-azure?view=azure-devops.

您也可以通过单击管理链接先创建一个服务连接。

您将被重定向到 服务连接页面。单击右上角的“新建服务连接”。

选择 Azure 资源管理器，然后单击 下一步。

选择 服务主体（自动），然后单击 下一步。

系统将提示您使用 Azure 门户订阅帐户登录。

登录后，选择要使用的订阅，然后输入服务连接名称。然后单击保存。

您现在可以选择 Azure 资源管理器连接。将任务字段的值设置为与下图相似。请注意，我们使用了前面为 ResourceGroup 和 Location 定义的变量。这样，您可以动态更改 ARM 模板的值。您还需要选择 template.json 和 parameters.json 文件的正确位置。这些文件已包含在从 Git 下载的源代码中，位于 ARMTemplates 文件夹中。

我们还将覆盖模板参数，并使用变量中的值。复制下面的参数并将其粘贴到 Override 模板参数文本框中。

-subscriptionId "$(SubscriptionId)" -websiteName "$(WebsiteName)" -location "$(Location)"

-hostingPlanName "$(HostingPlanName)" -serverFarmResourceGroup "$(ServerFarmResourceGroup)"

-sku "$(Sku)" -skuCode "$(SkuCode)" -sqlServerName "$(SqlServerName)" -sqlDBName "$(SqlDBName)"

-administratorLogin "$(AdministratorLogin)" 
-administratorLoginPassword "$(AdministratorLoginPassword)"

ARM 模板部署将自动在 Azure 中创建资源组、数据库和 Web 应用服务。请注意，操作设置为“创建或更新资源组”。

添加另一个任务并搜索 Azure SQL Dacpac 任务。

按照下图设置字段的值。请注意，SQL 数据库 身份验证类型设置为 连接字符串，并且连接字符串值已设置为我们先前定义的变量。这样，我们可以使值与 ARM 模板值保持一致。

请确保更改 DACPAC 文件的值并使用正确的路径。

添加另一个任务，在搜索字段中，输入 Azure App Service 部署，然后选择并单击添加。

将 Azure App Service 部署任务的值设置为与下图相同。App Service 名称的值设置为我们先前定义的变量。根据您当前的运行目录更改“包或文件夹 zip 文件”的值。App 设置的值也已设置为使用我们先前定义的变量。-ConnectionStrings__TestConnection 将自动在 Azure 中设置，并更新 appSettings.json 文件中的连接字符串值。

单击保存。您现在已准备好发布应用程序。您可以手动创建发布，或对代码进行更改，然后推送更改，它将自动运行您的生成和发布。

为了演示持续集成和交付管道，请对源代码进行更改。

打开 Visual Studio，然后编辑 index.html 文件，像下图所示一样在标题中添加您的名字

在 Visual Studio Team Explorer 中，提交您的更改。然后同步并推送。

检查生成管道。它应该自动触发。

生成成功完成后，检查发布管道，它应该自动创建一个新的发布，然后运行作业和任务。

成功部署后，检查网站，https://{yourwebappname}.azurewebsites.net

填写表单，然后单击提交。

它应该在页面右侧显示记录。

设置生成和发布管道时的常见错误

糟糕的生成和发布规划
不正确的生成和发布任务
不正确的源代码路径映射
源代码文件与代理作业任务的版本不匹配
未加密敏感/机密变量值

历史

2020 年 11 月 18 日：初始版本