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

內容

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

前置準備作業

• 已建立 Azure 帳號並能正常登入
  • https://portal.azure.com/
• 已有 GitHub 帳號並已建立一個新的 Repository
  • https://github.com
• 已於電腦端安裝 IDE，本範例使用 Visual Studio Code ( VSCode )
  • https://code.visualstudio.com/
• 已於 VSCode 安裝 Azure App Service 套件
  • https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice
• 已於 VSCode 成功登入到 Azure

建立 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

• 建立完成

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

Step 1. 下載範例程式

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

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

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

GitHub

• ArcherHuang @ GitHub

List of blogs

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