Azure DevOps 設定 Angular 的 CI/CD Pipeline

發表於 | 分類於

事前準備

  • 在 Azure DevOps 建立一個 Project

  • 建立 Angular 專案

    1
      ng new demo1 --routing --style=css

  • 在 Azure 建立一個 Web App

    image

建立 CI Pipeline

  • 選擇程式碼來源 Azure Repos Git

    image

  • 選擇 Empty template

    image

  • 在 Tasks 頁籤的 Agent Job 新增 tasks

    • 新增 npm 的 Task (跑 npm install)

      image image

    • 新增 npm 的 Task (build 靜態檔案)

      image

    • 新增 Publish build artifacts 的 Task (Path to publish 要填上一步的 output path)

      image image

  • 在 Trigger 頁籤啟用 CI

    image

  • 建完後按儲存

    image

建立 Release Pipeline

  • 選擇 Azure App Service deployment 的 template

    image

  • 新增 Artifacts (Source 選剛剛建立好的 CI Pipeline)

    image

  • 啟用 CD trigger

    image

  • 到 Stage 1 修改 task

    • 選擇在 Azure 事先準備的 Web App

      image

    • 修改 Deploy Azure App Service 的 Task (Deployment method 要選 Web Deploy)

      image

  • 改好後按儲存

上傳 web.config 至 Web App

如果前面的步驟都順利完成後，將 Angular 的程式碼至 Azure DevOps 的 Repo，跑完 CI/CD 後，開啟網頁會發現在切換路由時，網頁會出現 The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. 的錯誤，此時需將 web.config 透過 FTP 上傳至與應用程式相同資料夾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>  
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

相關連結