【 Cloud 】透過 GitHub Action 部署程式到 Azure App Service 之 Production 與 Slot 功能所設定的 Stage 環境 ( Node.js )

內容

• 前置準備作業
• 建立 Azure App Service 與設定
• 設定 GitHub Secret
• 部署程式到 Azure App Service 的 Production 環境
• 驗證 Production 環境
• 修改 GitHub Secret
• 部署程式到 Azure App Service 的 Stage 環境
• 驗證 Stage 環境
• Production 與 Stage 環境進行互換

前置準備作業

• 已建立 Azure 帳號並能正常登入
  • https://portal.azure.com/
• 已有 GitHub 帳號並已建立一個新的 Repository
  • https://github.com
• 已於電腦端安裝 IDE，本範例使用 Visual Studio
  • https://code.visualstudio.com/

建立 Azure App Service 與設定

Step 1. 選擇 Azure App Service 服務

• 於上方搜尋框輸入 app service > 再點選 App Services 的搜尋結果

• 點選 + Create > 再點選 + Web App

• 輸入相關資訊
  

  • Subscription 欄位請選擇所要使用的訂閱。
  • Resource group 欄位請輸入可識別的名稱，本範例使用 slot-sample。
  • Name 欄位請輸入唯一且可識別的名稱，本範例使用 slot-sample。
  • Publish 欄位請選擇 Code。
  • Runtime stack 欄位請選擇 Node 18 LTS。
  • Operating System 欄位請選擇 Linux。
  • Location 欄位請選擇所要使用服務的所在位置。
  • Linux Plan 欄位請選擇 Standard (含) 以上的規格。
    • https://learn.microsoft.com/en-us/azure/azure-resource-manager/management/azure-subscription-service-limits#app-service-limits
  • 以上資訊輸入完成後點選 Review + create。
    

• 點選 Create

• 點選 Go to resource

Step 2. 新增 Production 環境的 Config

• 點選左側的 Configuration > 再點選 + New application setting

• 輸入相關資訊
  

  • Name 欄位請輸入 info
    • 程式中會使用到此 Key。
  • Value 欄位請輸入 Version: V1
  • 以上資訊輸入完成後，點選 OK
    

• 點選上方的 Save

• 點選 Continue

• 建立完成

Step 3. 建立 Stage 環境

• 點選左側的 Deployment slots > 再點選上方的 + Add Slot

• 輸入相關資訊
  

  • Name 欄位請輸入唯一且可識別的名稱，本範例使用 stage。
  • 以上資訊輸入完成後，點選 Add
    

• 建立完成

Step 4. 新增 Stage 環境的 Config

• 點選所建立的 slot，本範例為 slot-sample-stage。

• 點選左側的 Configuration > 再點選 + New application setting

• 輸入相關資訊
  

  • Name 欄位請輸入 info
    • 程式中會使用到此 Key。
  • Value 欄位請輸入 Version: V2
  • 以上資訊輸入完成後，點選 OK
    

• 點選上方的 Save

• 點選 Continue

• 建立完成

設定 GitHub Secret

Step 1. 取得 Production 的 Publish profile

• 回到所建立的 Azure App Service 的 Overview > 點選上方的 Download publish profile

Step 2. 設定 GitHub Action 部署程式到 Azure App Service 中所使用的 Publish profile

• 點選 GitHub 上方的 Settings > 再點選 Secrets and variables 中的 Actions

• 點選 New repository secret

• 輸入相關資訊
  

  • Name 欄位請輸入 AZURE_WEBAPP_PUBLISH_PROFILE
  • Secret 欄位請輸入 設定 GitHub Secret 段落中 Step 1 所下載的 Publish profile 檔案的內容
  • 以上資訊輸入完成後，點選 Add secret
    

• 建立完成

部署程式到 Azure App Service 的 Production 環境

Step 1. 下載範例程式

• https://github.com/ArcherHuang/Azure_App_Service_Slot

Step 2. 建立 GitHub Action 要使用的 YAML 檔

• 在範例程式中的根目錄新增 .github/workflows/workflow.yml 檔案並輸入以下的內容
  • 請修改第 6 行後面的 APP-SERVICE-NAME 為 建立 Azure App Service 與設定 段落中 Step 1 所使用的名稱。
  • 請修改第 7 行後面的 APP-SERVICE-SLOG-NAME 為 建立 Azure App Service 與設定 段落中 Step 3 所使用的名稱。
  • 程式目錄結構

  .
  └── Azure_App_Service_Slot
      ├── .github
      |   └── workflows
      |       └── workflow.yml
      ├── index.js
      ├── memo.md
      ├── package-lock.json
      └── package.json
  

Step 3. 將程式 Push 到 GitHub 並查看 GitHub Action 的狀態

• 執行 GitHub Action 中

• 執行完成

驗證 Production 環境

Step 1. 開啟 Production 的頁面

• 回到所建立的 Azure App Service 的 Overview > 點選上方的 Browser

Step 2. 出現 Production 所設定的 V1 字樣

修改 GitHub Secret

Step 1. 取得 Stage 的 Publish profile

• 回到所建立 Stage 的 Overview > 點選上方的 Download publish profile

Step 2. 修改 GitHub Action 部署程式到 Azure App Service 中所使用的 Publish profile

• 點選 GitHub 上方的 Settings > 再點選 Secrets and variables 中的 Actions

• 點選 AZURE_WEBAPP_PUBLISH_PROFILE 旁的畫筆

• 輸入相關資訊
  

  • Name 欄位請輸入 AZURE_WEBAPP_PUBLISH_PROFILE
  • Value 欄位請輸入 修改 GitHub Secret 段落中 Step 1 所下載的 Publish profile 檔案的內容
  • 以上資訊輸入完成後，點選 Update secret
    

• 修改完成

部署程式到 Azure App Service 的 Stage 環境

Step 1. 修改 workflow.yml

• 開啟 .github/workflows/workflow.yml 檔案並將第 30 行前面的 # 刪除
  • 請修改第 6 行後面的 APP-SERVICE-NAME 為 建立 Azure App Service 與設定 段落中 Step 1 所使用的名稱。
  • 請修改第 7 行後面的 APP-SERVICE-SLOG-NAME 為 建立 Azure App Service 與設定 段落中 Step 3 所使用的名稱。

Step 2. 將程式 Push 到 GitHub 並查看 GitHub Action 的狀態

• 執行 GitHub Action 中

• 執行完成

驗證 Stage 環境

Step 1. 開啟 Stage 的頁面

• 回到所建立 Stage 的 Overview > 點選上方的 Browser

Step 2. 出現 Stage 所設定的 V2 字樣

Production 與 Stage 環境進行互換

Step 1. 環境互換

• 點選左側的 Deployment slots > 再點選 Swap

• 輸入相關資訊

  • Source 欄位請選擇 slot-sample-stage
  • Target 欄位請選擇 slot-sample
  • 以上欄位填寫完成後，請點選 Swap ( 要花一些時間進行交換 )
    

• 交換完成

Step 2. 驗證 Production 環境是否為之前的 Stage 環境

• 開啟 Production 的頁面
  • 回到所建立的 Azure App Service 的 Overview > 點選上方的 Browser

• 出現交換前 Stage 環境所設定的 V2 字樣

Step 3. 驗證 Stage 環境是否為之前的 Production 環境

• 開啟 Stage 的頁面
  • 回到所建立 Slot 的 Overview > 點選上方的 Browser

• 出現交換前 Production 環境所設定的 V1 字樣

Sample Code

• https://github.com/ArcherHuang/Azure_App_Service_Slot

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://learningsky.io/author/archer/
• https://medium.com/@mmosconii