部署Angular在應用程式服務（APP Service）

有了上一篇的Gitea部署經驗這一次換成Angular感覺就應該很容易吧？並沒有！其實過程還是遇到很多問題啦XD，不過還好最後都解決了，那麼就記錄一下我是如何做的吧！Let's Go！

建立應用程式服務

到Microsoft Azure的控制台「所有服務」→「容器」→「應用程式服務」→「建立 APP Service」

建立應用程式服務 - 基本設定

• 資源群組：這個一定要設定（管理用）
• 名稱：自定的服務名稱
• 發佈：選擇「代碼」
• 執行階段堆疊：選擇「Node 16 LTS」版本
  💡 Node的版本選擇取決於你的package.json上需要多高的Node版本
• 作業系統：選擇「Linux底層」
• 地區：選擇「東亞」（會依照你的地區提供對應的系統資源和群組）
• Linux方案：如果一開始沒有方案的話，建立時Azure會幫我們建立一個方案項目
• SKU和大小：這邊我們需要調整一下使用「非免費」的「基本方案的B1版本」
  💡 踩雷點1：使用免費版本會編譯失敗沒有辦法自動部署不知道為什麼，我自己是猜測記憶體不足？Google一下也說因為是免費版本的關係，所以這裡Demo的解法是先調整成最低階版本的方案，部署成功後再調整回免費版本（我只是想學習不要收我錢啊XD）
  💡 踩雷點2：每個地區的免費方案最多只能設定一個哦，解法就是把地區分開來就可以使用多個免費方案來做專案的測試囉

建立應用程式服務 - 部署

如果是選擇「免費方案」則無法在這設定持續部署，雖然我們在基本設定選了「不是免費的方案」但這邊也直接跳過就好XD

剩下的步驟一樣直接跳過直接到「檢閱+建立」等待驗證和部署即可

建立自動部署

應用程式服務本身有提供簡單的CI/CD服務讓你的專案從「拉取」→「編譯」→「部署」一連串的自動化功能

💡 如果沒有使用Azure DevOps或是其它的CI/CD工具的話這個功能是一個不錯的選擇！

首先在左邊選單找到「部署中心」

在「設定」的頁簽裡面有個「來源」的下拉選單，我們使用前篇文章架設好的Gitea來作為部署來源，選擇「外部 Git」就會出現來源的設定畫面

這裡可以設定「儲存庫的位置」和「儲存庫的分支」，存放庫類型選擇「私人」就會出現輸入使用者名稱和密碼的輸入框，完成後儲存即可

💡外部Git的缺點就是不能用更安全（如：第三方的Single Sign On、SSH、或是金鑰等等）的方式進行存取

設定完儲存庫後可以直接轉到「記錄」的頁簽，如果來源的設定沒有問題的話基本上轉過來就會看到正在執行自動化部署

我們也可以點擊「認可ID」觀看更詳細的過程，進去可以看到部署中心正在自動建置和部署我們庫的Angular專案

可以看到它自動幫我們執行npm install和npm run build

接著只需要等待自動部署以及狀態顯示成功就完成了

如果想要進一步驗證有沒有完成最簡單的應該就是使用FTPS去看應用程式內的資料夾， 切換到「FTPS認證」頁簽這裡有一些連線FTPS的資訊可以參考

連到FTPS之後會發現wwwroot裡面根目錄並沒有編譯好的Angular網頁專案，主要是ng build後的檔案會在「dist/<專案名稱>」裡面，但是因為是簡單的CI所以不會有幫你把檔案複製到wwwroot的根目錄下的動作，不過沒關係我們只要記得這個路徑然後確認編譯的檔案都有出現即可

💡如果要自己手動編譯跟部署，只需要把編譯的檔案丟到wwwroot根目錄下即可

資源檢視

執行前在選單找到「組態」→「應用程式設定」，在頁簽裡面需要添加幾個設定值

我們在此添加三個設定值

• PORT：Node JS預設的Port，預設值是8080因此我們設定8080
• WEBSITES_CONTAINER_START_TIME_LIMIT：設定容器啟動時的響應最多需要多少時間（單位秒），我們設定100
  💡預設是230，最高可以設定到1800，設定100只是為了不要等這麼久XD【點我前往查看】
• WEBSITES_PORT：這個則是設定應用程式服務對外的Port指定80
  💡Azure應用程式服務對外的Http Port固定是80和443【點我前往查看】

💡踩雷3：這邊的PORT和WEBSITES_PORT都必須要加入設定，否則docker conainer會發生【didn't respond to HTTP pings on port: 8080, failing site start】的錯誤

最後切換到「一般設定」設定一下啟動命令，這裡我們使用Node的pm2命令啟動，設定完成後存檔等待設定生效後就可以成功進入網頁

pm2 serve /home/site/wwwroot/dist/<專案名稱路徑> --no-daemon --spa

💡ng build不會把編譯的檔案放到wwwroot根目錄裡面所以網頁無法執行成功，所以我們在命令裡面添加參數重新導向路徑到【dist/<專案名稱路徑>】

後續修改專案內容後推送到發佈版本分支（或是你指定的分支）後就可以來到部署中心按下「同步」剩下的就是應用程式服務幫你完成囉！