使用 Azure DevOps 生成和发布管道部署 Angular 应用

引言

我知道有很多关于同一主题的文章。但是，大多数解决方案在我最新的管道配置中对我不起作用，所以我想写这篇文章。在这里，我们将通过一些基本任务非常轻松地设置我们的 Angular 应用程序的生成和发布管道配置。我们将使用 Azure DevOps FTP 管道服务连接进行配置。让我们停止介绍，开始配置。

背景

我正在尝试将我的 Angular 应用程序部署到 Azure，为此我需要设置我的生成和发布管道。我之前看过一些教程，但我遇到了一些问题。之后，我决定使用 Azure FTP 上传发布任务。所以，基本上，我们的发布管道中只有一个任务。

设置管道

正如我之前提到的，在这里，我们将配置我们的生成和发布配置。

生成管道

在这里，我们将配置 Azure DevOps 生成管道。但是，在此之前，我们需要在 package.json 文件中定义我们的脚本。

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prod-build-dev": "ng build --prod --build-optimizer",
    "prod-build-staging": "ng build --prod --configuration=staging --build-optimizer"
  }

如果您的路由不同，并且您需要直接在浏览器 URL 中访问它们，您应该考虑在 src 文件夹中添加一个 web.config 文件。

<configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
</configuration>

完成之后，将其作为资产添加到 angular.json 文件中。

"assets": [ "src/favicon.ico",
"src/assets",
"src/web.config"]

现在，转到您的 Azure DevOps 站点，然后单击 **Pipelines**，然后单击 **Builds**。单击加号图标。

管道

单击 **Pipeline** 部分。在这里，您可以指定您的管道名称和代理池，请记住选择 Hosted VS2017 作为代理池，否则您可能会看到类似“Npm failed with return code: 1 2019–01–07T10:14:37.3309955Z ##[section]Finishing: npm build” 的错误。

第一阶段

我建议您保持原样，不过您可以更改显示名称。

npm install

在 **Phase** 部分单击 **+** 图标，然后搜索“npm”并单击 **Add**。现在我们可以配置此任务了。

您也可以单击功能区 View YAML，查看任务的 YML 版本。

npm build

在此步骤中，我们将添加一个新的 npm 任务并为我们的生成脚本进行配置。

请注意，该命令是自定义的，我们已经给出了我们在 package.json 文件中已经设置的脚本，即 prod-build-dev。

发布生成件

在这里，在此步骤中，我们将发布生成的生成件。这非常重要，否则发布配置将无法在目录中找到您的 package.json 文件。添加一个名为“Publish Build Artifacts”的新任务，并按下面的图片进行配置。

启用持续集成

在我们设置了任务之后，现在是时候设置持续集成。单击 **Triggers** 部分，然后勾选 **Enable continuous integration**。

调试生成

如果您需要调试生成管道，可以在 **Variable** 部分启用它。只需将 system.debug 的值设置为 true 即可。

运行生成

完成所有操作后，您可以单击 **Save & Queue** 按钮来启动生成。我们的代理现在将运行，任务将被执行，由于我们在 Variables 中将 debug 属性设置为 true，我们现在可以在控制台中看到详细的日志。将执行以下任务。

发布管道

太棒了，我们已经成功创建了我们的生成管道，现在是时候创建发布管道了。正如我之前提到的，我们的发布管道中只有一个任务，那就是“FTP Upload”。单击 **Pipelines**，然后单击 **Releases**，单击 **+New** 图标来创建一个新的发布管道。

选择生成件

在这里，在此步骤中，我们应该选择生成过程中生成的生成件。

选择阶段

单击 Stages 并添加一个。

添加 FTP 服务连接

在添加新的 FTP 上传任务之前，我们需要在 Azure DevOps 站点中创建一个新的 FTP 服务连接。单击左下角的 Project Settings，转到 **Pipelines** 部分，然后单击 **Service connections**。现在单击 **+ New service connection**，在弹出窗口中，您需要提供 Azure Web App 的发布配置文件中的详细信息（在 Azure 门户的 Web App 资源，概览部分中单击 **Get Publish Profile**）。

添加 FTP 上传任务

现在是时候添加 FTP 上传任务了。单击 Agent Job Task 中的 **+** 图标，然后添加 FTP Upload 任务。

在这里，远程目录是我们的应用程序文件将要存放的文件夹。如果您使用应用程序发布配置文件中的 FTP 详细信息登录到资源管理器，您应该能够看到这些文件。

创建发布

现在，是时候创建发布了，单击 **+ Release** 按钮，然后单击 **+ Create a release**。在即将出现的窗口中，您应该能够看到管道和选择的生成件。只需单击 **Create** 按钮。代理将在几秒钟内启动，一旦准备就绪，它将执行任务。请注意，FTP Upload 任务将首先删除目录中的内容，然后上传新的内容。

更改应用服务的虚拟路径

由于我们在发布配置中指定了一个自定义文件夹，我们也应该更改 Azure 应用服务的虚拟路径。为此，请转到您的 Azure App Service，然后在 **Application Settings** 下选择 Virtual Path。将 Virtual Path 设置为“*/*”，将 Virtual Path 设置为“*site\wwwroot\wwwroot\yourappname*（dist 文件夹内的文件夹名称）”，并将类型设置为“Application”。

完成后，您应该可以看到您的 Angular 应用程序正在运行。

结论

哇！现在我们已经学习了

• 如何设置 Azure DevOps 生成管道配置
• 如何设置 Azure DevOps 发布管道配置
• 如何在 Azure DevOps 中创建新的 FTP 服务连接
• 如何配置 Azure Web App
• 如何将新代码上传到 MXChip 设备
• 如何执行设备到云消息输出

现在轮到你了。你有什么想法？

非常感谢您的阅读！您认为这篇文章还需要补充什么吗？您觉得这篇文章有用吗？请不要忘记分享您的反馈。

历史

• 2019 年 2 月 8 日：初始版本