生成和部署 Node.js 应用

本文介绍如何使用 Azure Pipelines 创建一个管道,该管道通过持续集成(CI)和持续部署(CD)将 Node.js 应用程序部署到 Azure 应用服务。 每当应用代码存储库提交时,CI/CD 都会通过自动生成和部署应用来降低停机时间和错误风险。

先决条件

产品 要求
Azure DevOps - 一个 Azure DevOps 项目
- 能够在 Microsoft 托管的代理上运行管道。 可以购买并行作业,也可以请求免费层。
- 对 YAML 和 Azure Pipelines 的基本知识。 有关详细信息,请参阅创建第一个管道
- 权限:
     - 若要创建管道:必须位于 “参与者 ”组中,并且该组需要将 “创建生成管道 ”权限设置为“允许”。 项目管理员组的成员可以管理管道。
    - 若要创建服务连接:必须具有服务连接的管理员创建者角色。
GitHub - GitHub 帐户。
- 用于授权 Azure Pipelines 的 GitHub 服务连接
天蓝色 一个 Azure 订阅
产品 要求
Azure DevOps - 一个 Azure DevOps 项目
- 自托管代理。 若要创建一个代理,请参阅自托管代理
- 对 YAML 和 Azure Pipelines 的基本知识。 有关详细信息,请参阅创建第一个管道
- 权限:
    - 若要创建管道:必须位于 “参与者 ”组中,并且该组需要将 “创建生成管道 ”权限设置为“允许”。 项目管理员组的成员可以管理管道。
    - 若要创建服务连接:必须具有服务连接的管理员创建者角色。
GitHub - GitHub 帐户。
- 用于授权 Azure Pipelines 的 GitHub 服务连接
天蓝色 一个 Azure 订阅

注意

使用 GitHub 的过程可能需要身份验证、授权或登录到 GitHub 组织或特定存储库。 按照说明完成所需的过程。 有关详细信息,请参阅访问 GitHub 存储库

创建示例应用程序的分支

  1. 在 GitHub 中,转到 Node.js Hello World 存储库,然后选择顶部菜单中的 分支

    GitHub 的屏幕截图,用于选择要分叉的 Node.js 项目。

  2. 选择您的 GitHub 组织作为派生的 所有者(如果尚未选择),然后选择创建派生

    在 GitHub 中创建分支的屏幕截图。

浏览器将转到 URL https://github.com/<owner>/nodejs-docs-hello-world处的新分支。

创建和部署应用服务 Web 应用

在 Azure 门户中使用 Cloud Shell 创建 Azure 应用服务 Web 应用。 若要使用 Cloud Shell,请登录到 Azure 门户 ,然后选择顶部工具栏上的 Cloud Shell 按钮。

Azure 门户工具栏上的“Azure Cloud Shell”按钮的屏幕截图。

Cloud Shell 显示在浏览器底部。 请确保在下拉菜单中选择 Bash 作为环境。

Azure Cloud Shell 的屏幕截图。

小窍门

若要粘贴到 Cloud Shell 中,请使用 Ctrl+Shift+V 或右键单击,然后从上下文菜单中选择“ 粘贴 ”。

创建和部署 Web 应用

  1. 在 Cloud Shell 中,使用以下命令将分叉存储库克隆到 Azure,并替换为 <your-forked-repository-url> 分叉存储库的 URL。

    git clone <your-forked-repository-url>
    
  2. 将目录更改为克隆的存储库文件夹。

    cd nodejs-docs-hello-world
    
  3. 运行 az webapp up 命令来预配应用服务 Web 应用并执行第一个部署。 该 --sku F1 参数在免费定价层上创建 Web 应用,不会产生任何费用。

    在没有az webapp up参数的情况下运行name,会自动分配一个 Azure 中唯一且随机生成的 web 应用名称。 还可以使用--name <web-app-name>参数来分配 Azure 中唯一的任何名称,例如具有应用标识符的个人或公司名称。--name <your-name>-nodeapp

    az webapp up --sku F1 --name <app-name>
    

az webapp up 命令将应用识别为 Node.js 应用,并执行以下作:

  1. 创建默认 资源组
  2. 创建默认 应用服务计划
  3. 使用分配的名称和 URL <your-web-app-name>.azurewebsites.net
  4. ZIP 部署 当前工作目录中的所有文件,并启用构建自动化。
  5. .azure/config 文件中本地缓存参数,以便在使用或其他az webapp up命令从项目文件夹az webapp进行部署时,无需再次指定参数。

可以使用命令参数将默认作替换为自己的值。 有关详细信息,请参阅 az webapp up

该命令在运行时生成状态消息。 成功启动网站后,可以选择指向 You can launch the app at https://<your-web-app-name>.azurewebsites.netHello World Web 应用的链接。

az webapp up 命令为示例 Web 应用生成以下 JSON 输出:

{
  "URL": "<your-web-app-url>",
  "appserviceplan": "<your-app-service-plan-name>",
  "location": "<your-azure-region>",
  "name": "<your-web-app-name>",
  "os": "Linux",
  "resourcegroup": "<your-resource-group-name>",
  "runtime_version": "node|20-LTS",
  "runtime_version_detected": "10.0",
  "sku": "FREE",
  "src_path": "<repository-source-path>"
}

根据模板创建管道

  1. 在 Azure DevOps 项目中,从左侧导航菜单中选择 “管道 ”,然后选择“ 新建管道 ”或“ 创建管道 ”(如果此管道是项目中的第一个管道)。

  2. 代码屏幕的“位置” 上,选择 “GitHub”。

  3. “选择存储库 ”屏幕上,选择分支 nodejs-docs-hello-world 存储库。

  4. Azure Pipelines 将代码识别为 Node.js 应用,并在“配置管道”页上建议多个管道模板。 选择 “Node.js Express Web 应用至 Azure 上的 Linux”

  5. 在下一个屏幕上,选择 Azure 订阅,然后选择 “继续”。 此操作将创建到 Azure 资源的服务连接。

  6. 在下一个屏幕上,选择 Azure Web 应用,然后选择 “验证并配置”。 Azure Pipelines 创建一个 azure-pipelines.yml 文件,并将其显示在 YAML 管道编辑器中。

  7. “查看管道 YAML ”屏幕上,查看管道的代码。

    管道执行以下操作:

    • 将触发器设置为在每次提交到主代码分支时激活。
    • 为服务连接、Web 应用、计算机映像和环境建立和使用变量。
    • 在生成代理上安装 Node.js,并使用 npm 运行和测试应用生成。
    • 将生成的应用程序打包到 ZIP 存档,并将 ZIP 上传到指定的上传位置。
    • 将 ZIP 包部署到应用服务应用并启动应用。

保存并运行管道

  1. 查看代码后,选择保存并运行,然后再次选择保存并运行,以保存并运行管道。 azure-pipelines.yml 文件被保存到您的派生仓库中,代码将部署到 Azure 应用服务。

    注意

    首次运行管道时,它会请求权限以访问其创建的环境。 选择 “允许 ”以授予管道访问环境的权限。

  2. 在“运行 摘要 ”页上,选择作业以监视管道运行并跟踪其生成。

  3. 运行成功后,选择 Azure Web 应用部署 任务,然后选择 应用服务应用程序 URL 以查看已部署的网站。

    该屏幕截图显示了 Azure 管道中的网站 URL 位置。

  4. 请验证您是否在部署的网站 URL 上看到在 App Service 上运行的站点。

    该屏幕截图显示了在 Web 浏览器中运行的 Node.js 应用程序。

运行 CI 生成和部署

关键字 trigger: main 配置了您的管道,以便在更改提交到您派生的代码存储库的 main 分支时运行。 运行 CI 生成:

  1. 转到分叉的 GitHub 存储库,并在 README.md 文件中稍作更改。
  2. 选择 “提交更改”,然后再次 提交更改
  3. 在 Azure Pipelines 中,使用单个 CI 的说明验证 nodejs-docs-hello-world 管道是否再次运行。

清理资源

如果不再需要资源,可以删除为本文创建的资源。

  • 若要删除 Azure 应用服务资源,请在 Cloud Shell 中按顺序运行以下命令。 必须先删除 Web 应用,然后才能删除其应用服务计划,并且必须先删除应用服务计划,然后才能删除其资源组。

    az webapp delete --name <web-app-name> --resource-group <resource-group-name>
    az appservice plan delete --name <app-service-plan-name> --resource-group <resource-group-name>
    az group delete --name <resource-group-name>
    
  • 若要删除 Azure Pipelines 中的管道,请选择管道,选择管道页上右上角的“ 更多作 ”图标,然后选择“ 删除”。 若要删除 Azure DevOps 项目,请参阅 “删除项目”。

  • 若要删除分支 nodejs-docs-hello-world GitHub 存储库,请转到存储库,然后在顶部菜单栏中选择“设置”。 滚动到页面底部,然后选择“ 删除此存储库”。