LearningSky.io

【 Cloud 】透過 VSCode 部署程式到 Azure App Service 之 Production 與 Slot 功能所設定的 Stage 環境

Archer -

內容

  • 前置準備作業
  • 建立 Azure App Service 與設定
  • 部署程式到 Azure App Service 的 Production 環境
  • 驗證 Production 環境
  • 部署程式到 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

  • 建立完成

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

Step 1. 下載範例程式

Step 2. 部署程式到 Production 環境

  • 透過 VSCode 開啟 Step 1 所下載的程式 > 再點選左側 ... 中的 Azure

  • 點選 >

  • 點選所建立的 Azure App Service ( 本範例為 slot-sample ) 的右鍵選單 > 再點選 Deploy to Web App...

  • 選擇專案所在位置

  • 點選 Yes

  • 點選 Deploy

  • 部署過程中

  • 部署完成

驗證 Production 環境

Step 1. 開啟 Production 的頁面

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

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

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

Step 1. 部署程式

  • 點選所建立的 Azure App Service ( 本範例為 slot-sample ) 左側的 >

  • 點選所建立的 Deployment Slots 左側的 >

  • 點選所建立的 Slot ( 本範例為 stage ) 的右鍵選單 > 再點選 Deploy to Slot...

  • 選擇專案所在位置

  • 點選 Deploy

  • 部署過程中

  • 部署完成

驗證 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