將應用程式部署至 App Service

提示

此內容是適用于 ASP.NET Core 開發人員的電子書摘錄,DevOps 可在.NET Docs上取得,或以可離線閱讀的免費可下載 PDF 形式取得。

DevOps for ASP.NET Core Developers eBook cover thumbnail.

Azure App 服務是 Azure 的 Web 裝載平臺。 您可以手動或自動化程式將 Web 應用程式部署至Azure App 服務。 本指南的本節將討論可使用命令列手動觸發或腳本觸發的部署方法,或使用Visual Studio手動觸發。

在本節中,您將完成下列工作:

  • 下載並建置範例應用程式。
  • 使用 Azure Cloud Shell建立 Azure App 服務 Web 應用程式。
  • 使用 Git 將範例應用程式部署至 Azure。
  • 使用 Visual Studio 將變更部署至應用程式。
  • 將預備位置新增至 Web 應用程式。
  • 將更新部署至預備位置。
  • 交換預備與生產位置。

下載並測試應用程式

本指南中使用的應用程式是預先建置 ASP.NET Core應用程式簡易摘要讀取器。 它是使用 API 擷取 RSS/Atom 摘要並在清單中顯示新聞專案的 ASP.NET Core Razor Pages 應用程式 Microsoft.SyndicationFeed.ReaderWriter

請隨意檢閱程式碼,但請務必瞭解此應用程式沒有任何特殊之處。 這只是簡單的 ASP.NET Core應用程式,僅供說明之用。

從命令殼層下載程式代碼、建置專案,然後執行,如下所示。

注意

Linux/macOS 使用者應該針對路徑進行適當的變更,例如使用正斜線 () / ,而不是反斜線 (\) 。*

  1. 將程式碼複製到本機電腦上的資料夾。

    git clone https://github.com/dotnet-architecture/simple-feed-reader/
    
  2. 將工作資料夾變更為已建立的 simple-feed-reader 資料夾。

    cd .\simple-feed-reader\SimpleFeedReader
    
  3. 還原套件,並建置方案。

    dotnet build
    
  4. 執行應用程式。

    dotnet run
    

    The dotnet run command is successful

  5. 開啟瀏覽器並瀏覽至 http://localhost:5000 。 應用程式可讓您輸入或貼上新聞訂閱摘要 URL,並檢視新聞專案清單。

    The app displaying the contents of an RSS feed

  6. 當您滿意應用程式正常運作後,請在命令殼層中按CtrlC+ 將其關閉。

建立 Azure App 服務 Web 應用程式

若要部署應用程式,您必須建立App Service Web 應用程式。 建立 Web 應用程式之後,您將使用 Git 從本機電腦部署至它。

  1. 登入Azure Cloud Shell。 注意:當您第一次登入時,Cloud Shell提示建立組態檔的儲存體帳戶。 接受預設值或提供唯一的名稱。

  2. 請針對下列步驟使用 Cloud Shell。

    a. 宣告變數以儲存 Web 應用程式的名稱。 名稱必須是唯一的,才能用於預設 URL。 $RANDOM使用 Bash 函式建構名稱可保證唯一性,並以 格式產生結果 webappname99999

    webappname=mywebapp$RANDOM
    

    b. 建立資源群組。 資源群組提供將 Azure 資源匯總為群組的方法。

    az group create --location centralus --name AzureTutorial
    

    az命令會叫用Azure CLI。 CLI 可以在本機執行,但在Cloud Shell可節省時間和設定。

    c. 在 S1 層中建立App Service方案。 App Service方案是共用相同定價層的 Web 應用程式群組。 S1 層不是免費層,但預備位置功能需要它。

    az appservice plan create --name $webappname --resource-group AzureTutorial --sku S1
    

    d. 使用相同資源群組中的App Service方案建立 Web 應用程式資源。

    az webapp create --name $webappname --resource-group AzureTutorial --plan $webappname
    

    e. 在組態中將部署分支設定為 mainappsettings

    az webapp config appsettings set --name $webappname --resource-group AzureTutorial --settings DEPLOYMENT_BRANCH=main
    

    f. 設定部署認證。 這些部署認證適用于您訂用帳戶中的所有 Web 應用程式。 請勿在使用者名稱中使用特殊字元。

    az webapp deployment user set --user-name REPLACE_WITH_USER_NAME --password REPLACE_WITH_PASSWORD
    

    g. 設定 Web 應用程式以接受來自本機 Git 的部署,並顯示 Git 部署 URL請記下此 URL 以供稍後參考

    echo Git deployment URL: $(az webapp deployment source config-local-git --name $webappname --resource-group AzureTutorial --query url --output tsv)
    

    h. 顯示 Web 應用程式 URL。 流覽至此 URL 以查看空白的 Web 應用程式。 請記下此 URL 以供稍後參考

    echo Web app URL: http://$webappname.azurewebsites.net
    
  3. 在本機電腦上使用命令殼層,流覽至 Web 應用程式的專案資料夾 (例如 .\simple-feed-reader\SimpleFeedReader) 。 執行下列命令來設定 Git 以推送至部署 URL:

    a. 將遠端 URL 新增至本機存放庫。

    git remote add azure-prod GIT_DEPLOYMENT_URL
    

    b. 將本機預設分支 (主要) 推送至 azure 生產 遠端的部署分支, (主要) 。

    git push azure-prod main
    

    系統會提示您輸入稍早建立的部署認證。 觀察命令殼層中的輸出。 Azure 會從遠端建置 ASP.NET Core應用程式。

  4. 在瀏覽器中,流覽至 Web 應用程式 URL ,並記下應用程式已建置和部署。 您可以使用 將其他變更認可至本機 Git 存放庫 git commit 。 這些變更會使用上述 git push 命令推送至 Azure。

使用 Visual Studio 進行部署

注意

本節僅適用于Windows。 Linux 和 macOS 使用者應該進行下列步驟 2 中所述的變更。 儲存檔案,並使用 將變更認可至本機存放庫 git commit 。 最後,使用 推送變更 git push ,如第一節所示。*

應用程式已從命令殼層部署。 讓我們使用Visual Studio整合式工具,將更新部署至應用程式。 在幕後,Visual Studio完成與命令列工具相同的動作,但在Visual Studio熟悉的 UI 內。

  1. 在 Visual Studio 中開啟SimpleFeedReader.sln

  2. 在 方案總管中,開啟Pages\Index.cshtml。 將 <h2>Simple Feed Reader</h2> 變更為 <h2>Simple Feed Reader - V2</h2>

  3. CtrlShiftB++ 建置應用程式。

  4. 在 [方案總管] 中,以滑鼠右鍵按一下專案,然後按一下 [發佈]。

    Screenshot showing Right-click, Publish

  5. Visual Studio可以建立新的App Service資源,但此更新將會透過現有的部署發佈。 在[挑選發佈目標] 對話方塊中,從左側清單中選取[App Service],然後選取 [選取現有]。 按一下 [發佈]。

  6. [App Service] 對話方塊中,確認用來建立 Azure 訂用帳戶的 Microsoft 或組織帳戶會顯示在右上方。 如果不是,請按一下下拉式清單並加以新增。

  7. 確認已選取正確的 Azure 訂用帳戶 。 針對 [ 檢視],選取 [資源群組]。 展開 AzureTutorial 資源群組,然後選取現有的 Web 應用程式。 按一下 [確定]。

    Screenshot showing Publish App Service dialog

Visual Studio建置應用程式並將其部署至 Azure。 流覽至 Web 應用程式 URL。 驗證專案 <h2> 修改是否為即時。

The app with the changed title

部署位置

部署位置支援變更的預備環境,而不會影響生產環境中執行的應用程式。 一旦品質保證小組驗證應用程式的暫存版本之後,就可以交換生產位置和預備位置。 預備中的應用程式會以這種方式升階至生產環境。 下列步驟會建立預備位置、部署一些變更,並在驗證之後將預備位置與生產環境交換。

  1. 如果尚未登入,請登入Azure Cloud Shell

  2. 建立預備位置。

    a. 使用 預備名稱建立部署位置。

    az webapp deployment slot create --name $webappname --resource-group AzureTutorial --slot staging
    

    b. 在組態中將部署分支設定為 mainappsettings

    az webapp config appsettings set --name $webappname --resource-group AzureTutorial --slot staging --settings DEPLOYMENT_BRANCH=main
    

    c. 設定預備位置以使用本機 Git 的部署,並取得 預備 部署 URL。 請記下此 URL 以供稍後參考

    echo Git deployment URL for staging: $(az webapp deployment source config-local-git --name $webappname --resource-group AzureTutorial --slot staging --query url --output tsv)
    

    d. 顯示預備位置的 URL。 流覽至 URL 以查看空的預備位置。 請記下此 URL 以供稍後參考

    echo Staging web app URL: http://$webappname-staging.azurewebsites.net
    
  3. 在文字編輯器或Visual Studio中,再次修改Pages/Index.cshtml,讓 <h2> 元素讀取 <h2>Simple Feed Reader - V3</h2> 並儲存檔案。

  4. 使用 Visual Studio [Team Explorer] 索引標籤中的 [變更] 頁面,或使用本機電腦的命令殼層輸入下列命令介面,將檔案認可至本機 Git 存放庫:

    git commit -a -m "upgraded to V3"
    
  5. 使用本機電腦的命令殼層,將預備部署 URL 新增為 Git 遠端,並推送認可的變更:

    a. 將預備的遠端 URL 新增至本機 Git 存放庫。

    git remote add azure-staging <Git_staging_deployment_URL>
    

    b. 將本機預設分支 (主要) 推送至 azure 預備 遠端的部署分支, (主要) 。

    git push azure-staging main
    

    等候 Azure 建置並部署應用程式。

  6. 若要確認 V3 已部署到預備位置,請開啟兩個瀏覽器視窗。 在一個視窗中,流覽至原始的 Web 應用程式 URL。 在其他視窗中,流覽至預備 Web 應用程式 URL。 生產 URL 提供應用程式的 V2。 預備 URL 提供應用程式的 V3。

    Screenshot comparing the browser windows

  7. 在Cloud Shell中,將已驗證/準備的預備位置交換至生產環境。

    az webapp deployment slot swap --name $webappname --resource-group AzureTutorial --slot staging
    
  8. 重新整理兩個瀏覽器視窗,以確認交換發生。

    Comparing the browser windows after the swap

總結

在本節中,已完成下列工作:

  • 已下載並建置範例應用程式。
  • 使用 Azure Cloud Shell建立Azure App 服務 Web 應用程式。
  • 使用 Git 將範例應用程式部署至 Azure。
  • 已使用 Visual Studio 將變更部署至應用程式。
  • 已將預備位置新增至 Web 應用程式。
  • 已將更新部署至預備位置。
  • 交換預備和生產位置。

在下一節中,您將瞭解如何使用 Azure Pipelines 建置DevOps管線。

延伸閱讀