使用 Azure DevOps 实现持续集成和持续部署

Azure DevOps (Visual Studio Team Services/Team Foundation Server) 包含一组工具和服务，有助于开发人员为开发项目实现 DevOps、持续集成和持续部署流程。

本文介绍了如何为 Azure DevOps 环境设置持续集成和持续部署，以便能够自动执行 SharePoint 框架生成、单元测试和部署。

在 Azure 多级管道（预览版）与 Azure DevOps 内部版本和发布版本之间进行选择

目前有两种方法可用于实现持续集成和 Azure DevOps 部署。 Azure 内部版本和发布版本为历史版本，提供了图形版体验，并将定义存储在向用户隐匿的 JSON 文档中。

针对 SharePoint 框架对这两种方法进行了描述：

• Azure 内部版本和版本（本文）
• Azure 多级管道

持续集成

持续集成 (CI) 使用单元测试自动验证生成，并在每次新代码更改提交后打包解决方案，以帮助开发人员将代码集成到共享存储库中。

若要为 SharePoint 框架解决方案设置 Azure DevOps 持续集成，需要按以下步骤操作：

1. 创建生成定义
2. 安装 NodeJS
3. 还原依赖项
4. 执行单元测试
5. 导入测试结果
6. 导入代码覆盖率信息
7. 捆绑解决方案
8. 打包解决方案
9. 准备项目
10. 发布项目

创建生成定义

顾名思义，生成定义包括生成的所有定义及其配置。 若要设置持续集成，请先新建生成定义，并将它关联到存储库。

注意

可以将生成定义说成是流程模板。 它是一组已配置的任务，每次生成触发时，都会对源代码依次执行这些任务。 可以按阶段对任务进行分组。默认情况下，生成定义至少包含一个阶段。 可以向阶段添加新任务，只需单击阶段名称旁边的大加号即可。

安装 NodeJS 版本 10

创建生成定义后，首先需要安装 NodeJS。 请务必安装版本 10，因为 SharePoint 框架依赖此版本。

注意

请务必在“Version Spec”字段中指定“10.x”。 如果你的项目基于 SharePoint Framework 1.7.1 或更早版本，请使用版本 8.x。

还原依赖项

由于第三方依赖项并不存储在源代码管理中，因此需要先还原这些依赖项，再开始生成项目。 为此，请添加“npm”任务，并将“命令”设置为“install”。

执行单元测试

默认情况下，SharePoint 框架不提供测试框架（自 1.8.0 开始），我们将在此示例中使用 Jest。 这些模块将在稍后的步骤中安装，并强烈建议至少测试代码的业务逻辑，以便尽快获得有关任何潜在问题或回归的反馈。 若要让 Azure DevOps 执行单元测试，请添加“npm”任务。 将 command 设置为 custom 和 custom command 字段，输入 test。 然后将 Working Directory 选项设置为 $(Build.SourcesDirectory)。

配置 Jest

默认情况下，SharePoint 框架项目不包括测试框架。 我们将在此示例中使用 Jest。

npm i jest jest-junit @voitanos/jest-preset-spfx-react16 -D

注意

SharePoint Framework 1.7.1 及更早版本上生成的项目依赖于 React 版本15。 如果使用 React 15，则需要改为安装@voitanos/jest-preset-spfx-react15。 对于其他框架 (Knockout...)，可能需要改为安装其他预设。

还需要配置 Jest。为此，请创建文件 config/jest.config.json，并添加以下内容。

{
  "preset": "@voitanos/jest-preset-spfx-react16",
  "rootDir": "../src",
  "coverageReporters": [
    "text",
    "json",
    "lcov",
    "text-summary",
    "cobertura"
  ],
  "reporters": [
    "default",
    ["jest-junit", {
      "suiteName": "jest tests",
      "outputDirectory": "temp/test/junit",
      "outputName": "junit.xml"
    }]
  ]
}

还需要配置项目以在键入命令时使用 Jest。 为此，请编辑 package.json 文件并使用以下值添加/替换这两个 scripts：

    "test": "./node_modules/.bin/jest --config ./config/jest.config.json",
    "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"

编写单元测试

若要编写第一个单元测试，请创建新文件 src/webparts/webPartName/tests/webPartName.spec.ts 并添加以下内容：

import 'jest'

describe("webPartName", () => {
  test("should add numbers Sync fluent", () => {
    const result = 1 + 3;
    expect(result).toBe(4); // fluent API
  });
});

注意

可以在此处了解有关使用 Jest 编写单元测试的更多信息。 可以在此处了解有关使用 Jest 和 Enzyme 测试回应应用程序的更多信息（可忽略设置部分）。

导入测试结果

为了获得构建结果附加的测试结果信息，需要将这些测试结果从测试运行程序导入到 Azure DevOps 中。 为此，请添加新的 Publish Test Results 任务。 将 Test results files 字段设置为 **/junit.xml，将 Search folder 设置为 $(Build.SourcesDirectory)。

导入代码覆盖率信息

必须添加用于导入代码覆盖率和生成状态的任务，才能报告此类信息。 若要配置代码覆盖率信息，请添加“publish code coverage results”任务。 请务必将工具设置为“Cobertura”，将“Summary files”设置为“$(Build.SourcesDirectory)/**/*-coverage.xml”。

捆绑解决方案

首先，需要捆绑解决方案，才能获得 Web 浏览器可以理解的静态资产。 添加另一个“gulp”任务，设置 gulpfile 路径，将“Gulp Tasks”字段设置为“bundle”，并在“Arguments”中添加“--ship”。

打包解决方案

至此，已拥有静态资产，下一步是将资产合并到 SharePoint 能够部署的包中。 添加另一个“gulp”任务，设置 gulpfile 路径，将“Gulp Tasks”字段设置为“package-solution”，并在“Arguments”中添加“--ship”。

准备项目

默认情况下，Azure DevOps 生成不保留任何文件。 为了确保发布所需的必备文件得以保留，需要明确指出应保留哪些文件。 添加“Copy Files”任务，将“Contents”设置为“**\*.sppkg”（在上一任务中创建的 SharePoint 包），并将目标文件夹设置为“$(build.artifactstagingdirectory)/drop”。

发布项目

至此，已收集在特殊项目文件夹中部署所需的全部文件，仍需要指示 Azure DevOps 在执行生成后保留这些文件。 为此，请添加“Publish artifacts”任务，将“Path to publish”设置为“$(build.artifactstagingdirectory)/drop”，并将“Artifact name”设置为“drop”。

持续部署

持续部署 (CD) 从生成流程获取已验证的代码包，并将它们部署到过渡环境或生产环境中。 开发人员可以跟踪具体部署成功与否，并将问题范围缩小到特定包版本。

若要为 SharePoint 框架解决方案设置 Azure DevOps 持续部署，需要按以下步骤操作：

1. 创建发布定义
2. 关联生成项目
3. 创建环境
4. 安装 NodeJS
5. 安装适用于 Microsoft 365 的 CLI
6. 连接到应用程序目录
7. 将解决方案包添加到应用程序目录
8. 部署应用程序
9. 设置环境变量

创建发布定义

首先，请使用空模板新建发布定义。 发布定义是用于标识以下部署元素的流程：

• 环境
• 部署任务
• 生成项目

关联生成项目

单击“Add an artifact”，并选择之前创建的生成定义。 记下所设置的“Source Alias”名称，因为后续任务中需要用到它。

创建环境

创建持续部署环境时，可进行命名，并配置预部署审批、项目筛选器（即仅在生成来自特定分支时部署）等，具体方法是单击环境框周围的按钮或直接单击标题中的按钮。

安装 NodeJS

单击“1 job, 0 tasks”可访问任务配置视图，它的工作方式与生成定义类似。 在此视图中，可选择仅对此特定环境运行的一组任务。 这包括安装 NodeJS 版本 10 或更高版本。

添加“Node tool installer”任务，并在“Version Spec”字段中定义“10.X”。 如果你的项目基于 SharePoint Framework 版本 1.7.1 或更早版本，请使用版本 8.X。

安装适用于 Microsoft 365 的 CLI

Microsoft 365 公共语言接口 (CLI) 是由 Microsoft 365 PnP 社区生成的开放源代码项目。 若要将 CLI 用作发布定义的一部分，首先需要安装它。 然后，便能利用可用命令来处理部署。 添加“npm”任务，选择“Custom”命令，并在“Command and Arguments”字段中键入“install -g @pnp/cli-microsoft365”。

注意

了解有关适用于 Microsoft 365 的 CLI 的更多信息

连接到 SharePoint Online

Before using the App Catalog in your deployment environment, you first need to authenticate against the App Catalog of your tenant. 为此，请添加 Command Line 任务，并将以下命令粘贴到 script 字段 m365 login -t password -u $(username) -p $(password) 中。

注意

如果是首次使用适用于 Microsoft 365 的 CLI 连接到租户，需要首先使用帐户进行交互式登录。 向 PnP Office 365 命令行管理程序应用程序授予访问权限需要执行此登录，而适用于 Microsoft 365 的 CLI 使用此应用程序以帐户身份访问租户。 否则任务将无法以非交互方式登录。 适用于 Microsoft 365 的 CLI 用户指南中提供了详细信息。

注意

CLI for Microsoft 365是一种开放源代码解决方案，其中包含为其提供支持的活动社区。 没有用于 Microsoft 开放源代码工具支持的 SLA。

将解决方案包添加到应用程序目录

将解决方案包上传到应用程序目录中，具体方法是添加另一个“Command Line”任务，并将以下命令行粘贴到“Script”字段中：m365 spo app add -p $(System.DefaultWorkingDirectory)/SpFxDevOps/drop/SharePoint/solution/sp-fx-devops.sppkg --overwrite

注意

包路径视解决方案名称（见项目配置）和之前定义的“Source Alias”而定。请确保它们保持一致。

注意

可通过添加 --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope sitecollection 将解决方案上传到网站集应用目录

部署应用程序

设置的最后一步是，将应用程序部署到应用程序目录，让应用程序作为最新版本对租户中的所有网站集可用。 添加另一个 Command Line 任务，并将以下命令行粘贴到 Script 字段中：m365 spo app deploy --name sp-fx-devops.sppkg

注意

请务必更新包名称。

注意

可通过添加 --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope sitecollection 从网站集应用目录部署解决方案

设置环境变量

在上一步中配置的任务依赖 Azure DevOps 流程变量（可使用 $(variableName) 语法轻松识别）。 需要先定义这些变量，然后才能运行生成定义。 为此，请单击 Variables 选项卡。添加以下变量

名称	值
catalogsite	可选。 上传到网站集应用目录时，应用目录网站的服务器相对路径（例如 sites/appcatalog）
密码	对租户拥有管理权限的用户的密码，请务必检查密码挂锁，使密码对其他用户不可见
username	对租户拥有管理权限的用户的用户名
租户	可选。 上传到网站集应用目录时，https://tenant.sharepoint.com 中的租户名称，例如 tenant

注意

请务必保存发布定义。

测试

若要测试新建的持续部署流程，请返回到 Azure DevOps 中的“Builds”部分，选择生成定义，再单击“Queue”。 选择分支，再单击 Queue。 此时，系统会新建生成，并将开始生成。

几分钟后，生成应完成，并显示如下结果页。

如果转到 Azure DevOps 中的“Release”部分，应看到新发布已自动启动。 几分钟后，发布应完成，且 SharePoint 框架解决方案已部署到租户。

Azure DevOps 中的 SharePoint 框架解决方案 DevOps 管道现已设置完成，可随时根据方案进一步自定义它。

另请参阅

• SharePoint 框架概述
• GitHub 上的示例项目
• 在生成管道中集成 Gulp 任务