【 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 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 (含) 以上的規格。
    • 以上資訊輸入完成後點選 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. 下載範例程式


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

GitHub

List of blogs