起因
原本發布 Nuxt 專案的方式，是使用 vscode 上的 Azure 擴充套件，在開發環境上發布到Azure App Service，發布的時間都是20分鐘起跳的，所以測試機和正式機發布完一輪，一個鐘頭就過去了，發布時間常常也是安排在晚上的離峰時間(QQ，直到最近換成了Mac ，發現原本使用的發布方式，即使發布過程都沒有提示失敗，但實際打開站台卻會顯示 App Service 上沒有內容（Content） 可以顯示，所以打算藉此機會學習如何使用 Azure Devops 上的 Pipeline 功能．
前置環境
下面會用到兩個Azure的Web應用程式服務，分別用於測試和正式機，服務的設置可以參考如下，還要有一個在 Azure Devops 上的專案，用於建立CI/CD，專案的Git Repos內有一份Nuxt 2的專案即可．
Web Application for 測試機
- 名稱: stag-nuxt-cicd
- 發布: 代碼
- 執行階段堆疊: Node16LTS
- 作業系統: Linux
- 地區: East Asia
- SKU和大小: 開發/免費 F1
---
Web Application for 正式機
- 名稱: prod-nuxt-cicd
- 發布: 代碼
- 執行階段堆疊: Node16LTS
- 作業系統: Linux
- 地區: East Asia
- SKU和大小: 開發/免費 F1
設置 Pipelines
使用 Azure Devops 建立一條新的 pipeline
先進入到 Azure Devops 的專案內，如下圖建立新的 pipeline
前兩步選定要建立 pipeline 的專案來源後，在 Configure 這個步驟，可以選定 Node.js 作為範本建立pipline
設置 nuxt 專案的 pipeline.yml
接著可以將下方的設置複製到自己的 pipeline yaml 中
設置 Release
建立新的 Release
選擇部署到Azure App Service的範本
設置 Release pipeline
建立完上述的範本後，應該可以見到如上畫面
- 在 Artifacts 可以選擇要以哪一個專案及來源執行部署
- 在 Stages 可以定義接下來的部署行為
- 可以變更Relase Pipeline的名稱
先設置 Artifacts
設置 Stage1
點擊 Stage1 後會進到如下畫面
點擊上圖1的位置，設置 Stage1 的參數
點擊上圖2的位置，設置 Stage1 的部署
設置環境變數
按照Nuxt官方部署文件的說明
還需要分別新增 HOST, NODE_ENV 環境變數，如下
接著就可以儲存離開了
再設置第2個部署
點擊下拉處的 Clone stage
修改第二顆stage的發布位置
複製完後，此時會產生一顆一模一樣的stage，
所以還要再進去修改第2顆的發布位置為正式機的 App Service，
以我的為例，我需要將 stag-nuxt-cicd 修改為 prod-nuxt-cicd
執行Release
修改完第2顆後儲存離開後，可以點擊右上角的 Create Release 做發布
在Release的首頁 可以看到 release 的結果
自動化 Release 的觸發
回到 Release 的編輯頁面，開啟如下圖功能
功能會在每一次建立一個成功的 pipeline build 時，觸發這條 release
設置生產環境發布前的審核
如上圖設置後
在每一次的 Release 建立後 只要 staging 有發布成功
production 都要等待設置的簽核者做簽核確認
本文同步發布在: 使用 Azure Pipelines 發布 Nuxt 專案 - 張育誠 - Medium
若對內容有任何疑問或內容有錯誤，歡迎在下方留言讓我知道，
或是來信: calvinchang@build-school.com