Azure Devops 如何将静态 Angular 应用程序部署到 Azure Blob 存储

Question

我对将 azure static webapp 部署到 azure 完全陌生。我有一个非常简单的 Angular 应用和 azure devops 帐户。

我想设置 azure devops 管道来构建 Angular 应用文件并将其上传到 Blob 容器。 注意：我没有 azure 订阅，只有存储帐户连接字符串详细信息。

到目前为止，我的 yml 文件是。不知道如何继续。

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

任何人都可以帮助我如何做到这一点。

我看到一些可以上传的脚本，但不确定如何添加到管道

az storage blob upload --account-name mystorageaccount --account-key 0000-0000 --container-name mycontainer --file /path/to/file --name myblob

Answer 1

尝试以下步骤。

1) 启用存储帐户中的静态网站托管。 存储帐户的侧边菜单（设置 ⇒ 静态网站）

2) 为存储帐户配置发布管道。 创建将使用作为构建管道的一部分发布的工件的发布管道有关更多详细信息，请参阅此文档document

在 Azure DevOps 项目中，通过选择 Pipeline ⇒ Releases ⇒ New ⇒ New Release Pipeline 创建一个新的 Release Pipeline

3)选择从空作业开始，而不是选择预配置的模板。由于 Azure DevOps 支持多个阶段，请提供默认创建的阶段的名称，或者您可以保留阶段 1 作为其名称。

4) 添加构建工件。

点击添加工件，选择构建源类型（因为工件存储在构建管道中），然后选择适当的构建管道来自 源下拉菜单。您可以保留要部署的版本和源别名的默认值，因为我们总是希望部署最新版本。 源别名是用于下载工件的文件夹。

5) 添加部署任务。

从空作业（第 3 步）开始，尚未定义任何任务。添加任务以将工件的文件部署到 Azure 存储帐户。单击代理作业上的“+”，搜索 Azure 文件副本，然后单击 添加。

添加 Azure 文件复制任务时，需要提供所需信息，以便 Azure DevOps 知道哪些文件必须部署到哪个目标。这包括 Azure 订阅和存储帐户信息。

6) 选择您的 Azure 订阅，选择 Azure Blob 作为目标 类型，选择适当的存储帐户，并提供 $web 用于容器名称（这是 Azure Devops 在 Azure 存储帐户中启用静态网站时使用的默认容器名称）

7)使用环境特定配置

为避免重新构建应用程序以使其使用特定于环境的配置，请使用作为资产目录的一部分提供的 JSON 文件，并使用 Http 请求在我们的 Angular 应用程序中检索。您可以在此document 中找到有关如何配置的详细概述

创建一个文件转换任务来修改config.json文件的内容作为发布管道阶段的一部分（如果有多个阶段，每个阶段都可以有自己的步骤，并且可以替换部署前具有不同值的内容）。添加任务，并将其配置为以 web-app 工件内的 assets/config.json 文件为目标。

8)在将文件部署到 Azure 存储之前执行任务。

9) 创建发布管道变量。 文件转换任务将使用所有变量，并根据其名称更新值

10)启用持续部署触发器以持续部署工件。

单击管道部分中您的工件上显示的雷击符号，启用持续部署触发器

11) 部署完成后，导航到 Azure 存储端点 URL 之一 应该会显示 Angular 应用程序。

更多详情请参考document