如何利用 Visual Studio 2022 開發 Web App，並透過 GitHub Action (CI/CD) 進行建置、部署至 Azure App Service

一. 前言

長久以來，一直很想試一下CI/CD，最近看到了參考文件[1..] 的影片後，決定開始動手；將整個練習的過程記錄下來，供日後參考之用。

茲區分以下主要步驟作說明：
(一) 建立 ASP.NET MVC 專案
 (二) 加入至 Git 版控，並推送至 GitHub
(三) 建立 GitHub CI/CD pipeline
(四) 將 .yml 檔 "認可並推送"，此時會啟動 GitHub Actions 的執行
 (五) 檢視網頁
 (六) 改一下網頁內容，認可及推送，確定可以引發 GitHub Actions

2022.12.25 補充：
(七) 記得清理相關的資源群組 Resource Group

2022.12.28 補充:
(八) 處理設定 Hosting Plan 時，無法選擇免費 F1 主機的問題

二. 步驟

(一) 建立 ASP.NET MVC 專案

1.. 建立新專案

2.. 設定新專案

3.. 輸入其它資訊

(二) 加入至 Git 版控，並推送至 GitHub

1.. 建立 Git 存放庫

2.. 一併建立 GitHub 存放庫

3.. 確認一下 GitHub 的狀況，確定有建立對應的 Repository

(三) 建立 GitHub CI/CD pipeline

1.. 專案名稱 → 滑鼠右鍵 → [發佈]

2.. 選擇發佈至 [Azure]

3.. 選擇發佈至 Azure App Service (Linux)

4.. 連接至 Azure
此處容易發生無法登入 Azure 的問題，有找到一篇文章, 要改一下 devenv.exe.config 的內容，要補上 <defaultProxy> ~ </defaultProxy> 之間的內容。參考 Visual Studio 2022 Can't Sign in Azure。

<system.net>
  <defaultProxy useDefaultCredentials="true" enabled="true">
    <proxy usesystemdefault="true" />
  </defaultProxy>
  <settings>
    <ipv6 enabled="true"/>
  </settings>
</system.net>

下圖為連至 Azure 成功的狀態。

5.. 建立 Azure App Service 執行個體

(1) [+建立新項目]

(2) 建立執行個體的 region 及 cpu, ram 規格
A.. Resource Group
B.. Hosting Plan : 地理位置, region, 主機等級

(3) 確定資料無誤後, 按 [建立]

(4) 建立完成

6.. 選擇部署類型

(1) 選取使用 GitHub Actions 工作流程 (產生 yaml 檔案) 的 CI / CD。

(2) 按下 [完成] 後，會產出預設的 yml 檔。

(3) 按下 [關閉] 後，主畫面有提示，要開啟 "Git 變更視圖"

(4) 可以發現新加入了 1 個檔案：<.sln 所在資料夾>.github\workflows\MyFirstMvcCiCdToAzure.yml ，此檔案即為 GitHub pipeline，必須要上傳 (push) 至 GitHub 才能運作。

(四) 將 .yml 檔 "認可並推送"，此時會啟動 GitHub Actions 的執行

1.. 認可並推送

(1) 輸入註解，並按下 [全部提交並推送]

(2) 在 Visual Studio 2022 左下角會出現提示

2.. 查看 GitHub 的狀況

(1) 一開始是在 Queued 的狀態

(2) 完成以後, 會顯示整個 action 所耗費的時間

(五) 檢視網頁

(1) 切到 Azure，按下 [Browse]

(2) 看來可以正常顯示頁面

(六) 改一下網頁內容，認可及推送，確定可以引發 GitHub Actions

1.. 修改 Views/Home/Index.cshtml

<div class="text-center">
    <h1 class="display-4">歡迎</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

2.. 認可及推送

3.. 觀察 GitHub Actions

(1) 進行中

(2) 已完成

4.. 檢視網頁
確定 "Welcome" 已改為中文的 "歡迎"

(七) 記得清理相關的資源群組 Resource Group

事隔不到 2 天，查看了一下 Azure 上的成本分析 (Subscription → Pay-As-You-Go Subscription → Cost Analysis)，赫然發現增加了 NT$ 250 多元，趕快將資源群組移掉，以免繼續噴錢。

1.. 發現多了 NT$ 250 多元，且係源自本次建立的資源群組 (MyFirstWebResourceGroup)

2.. 趕快移除資源群組

(八) 處理設定 Hosting Plan 時，無法選擇免費 F1 主機的問題

由於無法在設定 Hosting Plan 時，選取免費試用的主機，故可先在 Azure 上先建立相關的資源，再進行 [發佈] 的動作，在前述 (三)->5..->(2) 的畫面，就可以選到自行建立的 Resource Group 及 App Service。

1.. 已建立的資源

2.. Hosting Plan 的內容

參考文件

這是一篇蠻不錯的文章，它包含了使用 Visual Studio 2022、Visual Studio Code 等不同方式，將 Web App 部署到 Azure App Servcie 的操作流程；只缺整合 GitHub Actions 進行 CI/CD 的部份。

[5..]{Will保哥}[文章] 認識 Azure App Service 對外網路連線的 SNAT 限制

這是Will保哥剛出爐的一篇文章，對於 Azure App Service 的架構有作了說明。

傑士伯的IT學習之路

2022年12月22日星期四