Azure Devops如何部署static angular app到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)為存儲帳戶配置發布管道。 創建將使用作為構建管道的一部分發布的工件的發布管道有關更多詳細信息，請參閱此文檔文檔

在 Azure DevOps 項目中，通過選擇 Pipeline ⇒ Releases ⇒ New ⇒ New Release Pipeline 創建一個新的 Release Pipeline

3)選擇從空作業開始，而不是選擇預配置的模板。 由於 Azure DevOps 支持多個階段，請提供默認創建的階段的名稱，或者您可以保留階段 1 作為其名稱。

4）添加構建工件。

單擊 Add an Artifact ，選擇構建源類型（因為工件存儲在構建管道中），然后從源下拉列表中選擇適當的構建管道。 您可以保留要部署的版本和源別名的默認值，因為我們總是希望部署最新版本。 源別名是將用於下載工件的文件夾。

5)添加部署任務。

從一個空作業開始（第 3 步），還沒有定義任何任務。 添加任務以將工件的文件部署到 Azure 存儲帳戶。 單擊代理作業上的“+” ，搜索Azure 文件副本，然后單擊添加。

添加Azure 文件復制任務時，需要提供所需信息，以便 Azure DevOps 知道哪些文件必須部署到哪個目標。 這包括Azure 訂閱和存儲帳戶信息。

6)選擇您的Azure Subscription ，選擇Azure Blob 作為 Destination Type ，選擇適當的 Storage Account ，並提供$web作為容器名稱（這是 Azure Devops 在 Azure Storage Account 中啟用靜態網站時使用的默認容器名稱）

7)使用環境特定配置

為了避免重建應用程序以使其使用特定於環境的配置，請使用作為資產目錄一部分的 JSON 文件，並使用 Http 請求在我們的 Angular 應用程序中檢索。 您可以在本文檔中找到有關如何配置的詳細概述

創建一個文件轉換任務來修改config.json文件的內容作為發布管道階段的一部分（如果是多個階段，每個階段都可以有自己的步驟，並且可以在部署前將內容替換為不同的值）。 添加任務，並將其配置為以 web-app 工件內的assets/config.json文件為目標。

8)在將文件部署到 Azure 存儲之前執行任務。

9）創建發布管道變量。 文件轉換任務將使用所有變量，並根據其名稱更新值

10)啟用持續部署觸發器以持續部署工件。

單擊管道部分中您的工件上顯示的雷擊符號，啟用持續部署觸發器

11)部署完成后，導航到Azure 存儲端點 URL 之一應該會顯示 Angular 應用程序。

有關更多詳細信息，請參閱此文檔

Answer 2

這是我用於將 Angular 應用程序部署到 Blob 存儲的 YAML。 在存儲帳戶的“功能”下，您需要啟用“靜態網站”，這將創建 $web 容器，除此之外，更新以下 YAML 中的變量，它應該按原樣工作。

這是整個YAML，然后我將逐節解釋以提供更多上下文：

variables:
- name: storageContainer
  value: myStorageaccount
- name: subscription
  value: Subscription (8217a062-4d59-45f6-bc03-b6f559a1e58a)
trigger:
  branches:
    include:
    - master
stages:
- stage: __default
  jobs:
  - job: Job
    pool:
      vmImage: windows-latest
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '14.17.4'
        force32bit: true
    - task: CmdLine@2
      displayName: npm install
      inputs:
        script: |
          npm install
    - task: CmdLine@2
      displayName: ng build
      inputs:
        script: |
          set PATH=%PATH%;%CD%\node_modules\.bin;C:\npm\prefix
          ng build --subresource-integrity --output-hashing none
    - task: AzureFileCopy@2
      displayName: Deploy Files
      inputs:
        SourcePath: '$(System.DefaultWorkingDirectory)\dist\$(Build.Repository.Name)'
        azureSubscription: $(subscription)
        Destination: 'AzureBlob'
        storage: $(storageContainer)
        ContainerName: '$web'
        BlobPrefix: ''
    - task: AzureCLI@2
      displayName: Delete Old Files
      inputs:
        azureSubscription: $(subscription)
        scriptType: 'pscore'
        scriptLocation: 'inlineScript'
        inlineScript: 'az storage blob delete-batch -s `$web --account-name $(storageContainer) --if-unmodified-since $(Get-Date ((Get-Date).addMinutes(-5)) -UFORMAT +%Y-%m-%dT%H:%MZ)'

好的，這是逐節的：

下面設置要在命令 rest 中使用的變量 storageContainer 和 subscription 的值。 當您使用 $(storageContainer) 類型語法時，變量將被替換。

variables:
- name: storageContainer
  value: myStorageaccount
- name: subscription
  value: Subscription (8217a062-4d59-45f6-bc03-b6f559a1e58a)

當代碼返回到 master 分支時，以下設置連續構建/交付，並告訴所有內容部署到具有最新版本 Windows 的虛擬機。稍后一些 azure cli 命令需要 Windows：

trigger:
  branches:
    include:
    - master
stages:
- stage: __default
  jobs:
  - job: Job
    pool:
      vmImage: windows-latest

以下任務將節點版本 14.17.4 安裝到系統上以便使用它。 我讓它使用了 32 位版本的節點，但這真的不重要。

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.17.4'
    force32bit: true

以下執行 npm 安裝並安裝 packages.json 中的所有內容。 我將 angular/cli 添加到我的開發依賴項中，因此它與此一起安裝。 如果您不想這樣做，您將需要一個安裝 angular cli 的命令。 請記住，Azure DevOps 似乎不喜歡在 CmdLine 塊中安裝多個節點，因此您需要另一個塊。

- task: CmdLine@2
  displayName: npm install
  inputs:
    script: |
      npm install

以下執行 Angular 構建 (ng build)。 我做的第一件事是適當地設置路徑，以便它可以在開發依賴項中找到 Angular cli。 我還讓它添加 c:\npm\prefix 到路徑，這顯然是全局 npm 安裝的位置。 這很難找到/弄清楚； 所以當我找到它時，我把它留在了路上。 在我的 Angular 版本中，我有兩個標志。 --subresource-integrity 標志使腳本標簽具有完整性屬性，該屬性具有 JavaScript 文件的 hash。 這被認為是安全最佳實踐。 我還設置了--output-hashing none。 這使得文件只是 main.js 而不是 JS 文件中帶有 hash 的較長名稱。 這只是我的一個偏好。

- task: CmdLine@2
  displayName: ng build
  inputs:
    script: |
      set PATH=%PATH%;%CD%\node_modules\.bin;C:\npm\prefix
      ng build --subresource-integrity --output-hashing none

以下 Azure Cli 命令將所有文件復制到存儲帳戶的 $web 容器中。 默認情況下，Angular 構建命令會從 angular.json 的“outputPath”中列出的任何內容中放置這些文件。 默認情況下，這是 dist 目錄下的一個文件夾。 該文件夾恰好與我的 Git 存儲庫同名，我認為這是正常的。 這就是為什么我有源代碼可以從 '$(System.DefaultWorkingDirectory)\dist$(Build.Repository.Name)' 中獲取文件。 我認為這應該像我擁有的那樣開箱即用，但如果不是，請將“dist$(Build.Repository.Name)”替換為 angular.json 的 outputPath 中設置的內容。

- task: AzureFileCopy@2
  displayName: Deploy Files
  inputs:
    SourcePath: '$(System.DefaultWorkingDirectory)\dist\$(Build.Repository.Name)'
    azureSubscription: $(subscription)
    Destination: 'AzureBlob'
    storage: $(storageContainer)
    ContainerName: '$web'
    BlobPrefix: ''

將文件復制到 Azure 存儲帳戶時，默認情況下會覆蓋同名文件。 但是，它不會對不再使用且未被覆蓋的文件執行任何操作。 因此，最后一部分將刪除過去 5 分鍾內未修改的所有文件。 這個構建過程平均需要大約 4 分鍾，所以我認為任何超過 5 分鍾的東西都是來自之前的構建。

- task: AzureCLI@2
  displayName: Delete Old Files
  inputs:
    azureSubscription: $(subscription)
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: 'az storage blob delete-batch -s `$web --account-name $(storageContainer) --if-unmodified-since $(Get-Date ((Get-Date).addMinutes(-5)) -UFORMAT +%Y-%m-%dT%H:%MZ)'

希望這有助於節省一些時間。 這比我預期的正確組裝花費的時間要多得多。