如何通过Azure DevOps流水线将静态Angular应用部署到Azure Blob Storage

前置操作（先完成再修改流水线文件） #

• 进入你的Azure DevOps项目，依次打开「管道」-「你当前编辑的流水线」-「编辑」-右上角「变量」按钮
• 新建变量：名称填AZURE_STORAGE_CONNECTION_STRING，值粘贴你的存储账户连接字符串，勾选「保密(将值保密)」选项后保存
• 提前确认你Angular项目的构建产物输出路径，默认规则为dist/<你的项目名称>，可在angular.json中outputPath字段查看实际配置

完整流水线YML配置 #

你现有的构建步骤可以保留，只需要在末尾添加上传步骤即可，批量上传整个Angular静态产物目录的配置比单文件上传更适用：

trigger:
- main

pool:
  vmImage: ubuntu-latest

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

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: '安装依赖并构建Angular项目'

# 新增：上传构建产物到Blob容器步骤
- script: |
    # 替换<>包裹的内容为你的实际配置
    az storage blob upload-batch \
      --connection-string $(AZURE_STORAGE_CONNECTION_STRING) \
      --destination <你的Blob容器名称> \
      --source <你的Angular构建产物目录，例如dist/my-angular-app> \
      --overwrite
  displayName: '上传构建产物到Azure Blob容器'

配置说明 #

• 无需配置Azure订阅服务连接，直接通过存储账户连接字符串即可完成鉴权，符合你没有Azure订阅的使用场景
• 如果你确实需要单文件上传，可将上述上传步骤的脚本替换为你查到的命令，仅需要把--account-key参数替换为--connection-string $(AZURE_STORAGE_CONNECTION_STRING)即可，不需要填写明文账号密钥
• 脚本中的--overwrite参数会自动覆盖容器内已有的同名文件，适合持续部署场景

内容的提问来源于stack exchange，提问作者Mukil Deepthi