使用 Azure DevOps Starter 在 Azure Pipelines 中创建用于 Node.js 的 CI/CD 管道

2020-03-24

在本快速入门中，你将使用 GatsbyJS 和简化的 Azure DevOps Starter 创建体验创建 NodeJS 渐进式 Web 应用（PWA）。完成后，可以在 Azure Pipelines 中为 PWA 提供持续集成（CI）和持续交付（CD）管道。 Azure DevOps Starter 设置开发、部署和监视所需的内容。

先决条件

具有活动订阅的 Azure 帐户。免费创建帐户。
Azure DevOps 组织。

DevOps Starter 在 Azure Pipelines 中创建 CI/CD 管道。可以创建新的 Azure DevOps 组织或使用现有组织。 DevOps Starter 还会在所选的 Azure 订阅中创建 Azure 资源。

登录到 Azure 门户，然后在左窗格中，选择“ 创建资源”。
在搜索框中，键入 DevOps Starter，然后选择。单击添加以创建一个新的。

选择示例应用程序和 Azure 服务

选择 Node.js 示例应用程序。
默认示例框架 为Express.js。将所选内容更改为 “简单 Node.js 应用 ”，然后选择“ 下一步”。
此步骤中提供的部署目标由步骤 2 中选择的应用程序框架决定。在此示例中， Windows Web 应用 是默认部署目标。将 用于容器的 Web 应用 设置为保留，然后选择下一步。

配置项目名称和 Azure 订阅

在 DevOps Starter 创建工作流的最后一步中，分配项目名称，选择 Azure 订阅，然后选择 “完成”。
项目生成并应用程序部署到 Azure 的过程中，会显示摘要页。经过短暂的时间后，会在Azure DevOps 组织中创建一个项目，其中包括 Git 仓库、看板、部署管道、测试计划和应用所需的工件。

管理您的项目

导航到 “所有资源 ”并查找 DevOps Starter。选择 DevOps 入门。
你定向到一个仪表板，该仪表板提供项目主页、代码存储库、CI/CD 管道和指向正在运行的应用的链接。选择 项目主页 ，在 Azure DevOps 中查看应用程序，在另一个浏览器选项卡中，选择 应用程序终结点 以查看实时示例应用。稍后我们将此示例更改为使用 GatsbyJS 生成的 PWA。
从 Azure DevOps 项目中，可以邀请团队成员协作并建立看板以开始跟踪工作。有关详细信息，请参阅此文。

Azure DevOps 概述

克隆代码库并安装 Gatsby PWA

DevOps Starter 在 Azure Repos 或 GitHub 中创建 git 存储库。此示例已创建 Azure 存储库。下一步是克隆存储库并进行更改。

从您的DevOps 项目中选择Repos，然后点击克隆。有多种机制可将 git 存储库克隆到桌面。选择符合你开发经验的选项。
将存储库克隆到桌面后，对入门模板进行一些更改。首先从终端安装 GatsbyJS CLI。
```
 npm install -g gatsby
```

从终端导航到存储库的根目录。它应包含如下所示的三个文件夹：

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2/23/2020  10:42 PM                Application
d-----        2/23/2020   3:05 PM                ArmTemplates
d-----        2/23/2020   3:05 PM                Tests

我们不需要应用程序文件夹中的所有文件，因为我们将用一个 Gatsby 入门模板来替换它。按顺序运行以下命令，将其剪裁下来。
```
cp .\Application\Dockerfile .
rmdir Application
```

使用 Gatsby CLI 生成示例 PWA。从终端运行 gatsby new 以开始 PWA 向导，并选择 gatsby-starter-blog 初学者模板。它应类似于此示例：

c:\myproject> gatsby new
√ What is your project called? ... my-gatsby-project
? What starter would you like to use? » - Use arrow-keys. Return to submit.
    gatsby-starter-default
    gatsby-starter-hello-world
>   gatsby-starter-blog
    (Use a different starter)

现在有一个名为 my-gatsby-project 的文件夹。将其重命名为 Application 并将 Dockerfile 复制到其中。
```
mv my-gatsby-project Application
mv Dockerfile Application
```
在喜欢的编辑器中，打开 Dockerfile 并将第一行从 FROM node:8 中更改为 FROM node:12。此更改可确保Node.js您的容器使用版本 12.x 而不是版本 8.x。 GatsbyJS 需要更高版本的 Node.js。
接下来，在应用程序文件夹中打开 package.json 文件并编辑脚本字段，以确保开发和生产服务器侦听所有可用的网络接口（例如 0.0.0.0）和端口 80。如果没有这些设置，容器应用服务将无法将流量路由到容器中运行的 Node.js 应用。字段 scripts 应类似于下面的内容。具体而言，你想要从默认值中更改develop和servestart目标。
```
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop  -H 0.0.0.0 -p 80",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run serve",
    "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
```

编辑 CI/CD 流水线

在上一部分中提交代码之前，请对生成和发布管道进行一些更改。编辑“生成管道”并更新节点任务以使用 Node.js 版本 12.x。将 “任务版本 ”域设置为 1.x，将 “版本” 字段设置为 12.x。
在本快速入门中，我们不会创建单元测试，并且在我们的构建管道中禁用这些步骤。编写测试时，可以重新启用这些步骤。右键单击以选择标记为 “安装测试依赖项 ”的任务，并 运行单元测试 并禁用它们。
编辑发布管道。
与生成管道一样，将 Node 任务更改为使用 12.x 并禁用这两个测试任务。你发布的版本应该看起来像这个屏幕截图。
在浏览器左侧，转到 views/index.pug 文件。
选择 “编辑”，然后更改 h2 标题。例如，输入立即开始使用 Azure DevOps Starter 或进行其他更改。
选择提交，然后保存所做的更改。
在浏览器中，转到 DevOps Starter 仪表板。
现在你应该看到正在进行的构建。你所做的更改通过 CI/CD 管道被自动构建并部署。

提交你的更改并查看 Azure CI/CD 管道

在前面的两个步骤中，你向 git 存储库添加了 Gatsby 生成的 PWA，并编辑了管道以生成和部署代码。我们可以提交代码，并通过生成和发布管道观察代码进度。

从终端中项目的 git 存储库的根目录运行以下命令，将代码推送到 Azure DevOps 项目：
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
一旦git push完成，就会启动构建。您可以通过 Azure DevOps 仪表板查看进度。
几分钟后，您的构建和发布流程管道将完成，您的 PWA 将被部署到容器中。单击上述仪表板中的 “应用程序终结点 ”链接，应会看到适用于博客的 Gatsby 初学者项目。

清理资源

可以删除 Azure 应用服务以及不再需要资源时创建的其他相关资源。使用 DevOps Starter 仪表板上的删除功能。

后续步骤

配置 CI/CD 过程时，会自动创建生成和发布管道。可以更改这些生成和发布管道以满足团队的需求。若要了解有关 CI/CD 管道的详细信息，请参阅：

自定义 CD 流程

通过