快速入門:部署 ASP.NET Web 應用程式

在此快速入門中,您將了解如何建立第一個 ASP.NET Web 應用程式,並將其部署至 Azure App Service。 App Service 支援各種版本的 .NET 應用程式,並提供可高度調整且自我修補的虛擬主機服務。 ASP.NET Web 應用程式是跨平台的應用程式,可以裝載在 Linux 或 Windows 上。 當您完成時,您會有一個 Azure 資源群組,其中包含 App Service 主控方案和已部署 Web 應用程式的 App Service。

Prerequisites

若您已安裝 Visual Studio 2022:

  1. 選取 [說明]>[檢查更新] 以安裝最新的 Visual Studio 更新。
  2. 選取 [工具]>[取得工具及功能]
安裝最新的 .NET 6.0 SDK。
安裝最新的 .NET 6.0 SDK。
安裝最新的 .NET 6.0 SDK。

建立 ASP.NET Web 應用程式

  1. 開啟 Visual Studio,然後選取 [建立新專案]。

  2. 在 [建立新專案] 中,尋找並選取 [ASP.NET Core Web App] \(ASP.NET Core Web 應用程式\),然後選取 [下一步]。

  3. 在 [設定新專案] 中,將應用程式命名為 MyFirstAzureWebApp,然後選取 [下一步]。

    螢幕擷取畫面:Visual Studio - 設定 ASP.NET 6.0 Web 應用程式。

  4. 選取 [.NET 6.0 (長期支援)]。

  5. 確定將 [驗證類型] 設定為 [無]。 選取 [建立]。

    螢幕擷取畫面:Visual Studio - 選取 .NET 6.0 時的其他資訊。

  6. 從 Visual Studio 功能表中,選取 [偵錯]>[啟動但不偵錯] 以在本機執行 Web 應用程式。

    螢幕擷取畫面:Visual Studio - 正在本機執行的 ASP.NET Core 6.0。

  1. 在終端機視窗中,建立名為 MyFirstAzureWebApp 的新資料夾,並在 Visual Studio Code 中開啟。

    mkdir MyFirstAzureWebApp
    code MyFirstAzureWebApp
    
  2. 在 Visual Studio Code 中,鍵入 Ctrl + ` 以開啟終端機視窗。

  3. 在 Visual Studio Code 終端機中,使用 dotnet new webapp 命令建立新的 .NET Web 應用程式。

    dotnet new webapp -f net6.0
    
  4. 從 Visual Studio Code 中的終端機,使用 dotnet run 命令在本機執行應用程式。

    dotnet run --urls=https://localhost:5001/
    
  5. 開啟網頁瀏覽器,然後巡覽至位於 https://localhost:5001 的應用程式。

    您會看到頁面中顯示的範本 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:Visual Studio Code - 在本機瀏覽器中執行 .NET 6.0。

  1. 將您電腦上的終端機視窗開啟至工作目錄。 使用 dotnet new webapp 命令建立新的 .NET Web 應用程式,然後將目錄變更為新建立的應用程式。

    dotnet new webapp -n MyFirstAzureWebApp --framework net6.0
    cd MyFirstAzureWebApp
    
  2. 從相同的終端機工作階段中,使用 dotnet run 命令在本機執行應用程式。

    dotnet run --urls=https://localhost:5001/
    
  3. 開啟網頁瀏覽器,然後巡覽至位於 https://localhost:5001 的應用程式。

    您會看到頁面中顯示的範本 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:Visual Studio Code - 本機瀏覽器中的 ASP.NET Core 6.0。

在此步驟中,我們將派生要部署的示範專案。

  • 移至 .NET 6.0 範例應用程式
  • 選取 GitHub 頁面右上方的 [派生] 按鈕。
  • 選取 [擁有者],並保留預設 [存放庫名稱]。
  • 選取 [建立派生]。

發佈 Web 應用程式

若要發佈您的 Web 應用程式,您必須先建立並設定新的 App Service,讓您可以將應用程式發佈到其中。

在設定 App Service 的過程中,您將建立:

  • 新的資源群組,以包含此服務的所有 Azure 資源。
  • 新的主控方案,以指定用來裝載應用程式的 Web 伺服器陣列位置、大小和功能。

請遵循下列步驟來建立您的 App Service 資源,並發佈您的專案:

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

  2. 在 [發佈] 中選取 [Azure],然後選取 [下一步]。

    螢幕擷取畫面:Visual Studio - 發佈 Web 應用程式與目標 Azure。

  3. 選擇 [特定目標],Azure App Service (Linux)Azure App Servuce (Windows)。 然後,選取 [下一步] 。

    重要

    以 ASP.NET Framework 4.8 為目標時,請使用 Azure App Service (Windows)

  4. 您的選項取決於您是否已登入 Azure,以及是否已將 Visual Studio 帳戶連結至 Azure 帳戶。 選取 [新增帳戶] 或 [登入] 來登入 Azure 訂用帳戶。 若您已經登入,請選取要使用的帳戶。

    螢幕擷取畫面:Visual Studio - 選取登入 Azure 對話方塊。

  5. 在 [App Service 執行個體] 右側,選取 [+]。

    螢幕擷取畫面:Visual Studio - [新增 App Service 應用程式] 對話方塊。

  6. 針對 [訂用帳戶],請接受列出的訂用帳戶,或從下拉式清單中選取一個新的訂用帳戶。

  7. 在 [資源群組] 中選取 [新增]。 在 [新增資源群組名稱] 中,輸入 myResourceGroup ,然後選取 [確定] 。

  8. 在 [主控方案] 中選取 [新增] 。

  9. 在 [主控方案: 新建] 對話方塊中,輸入下表中指定的值:

    設定 建議的值 描述
    主控方案 MyFirstAzureWebAppPlan App Service 方案的名稱。
    位置 歐洲西部 裝載 Web 應用程式的資料中心。
    大小 免費 定價層可決定裝載功能。

    螢幕擷取畫面:Azure 入口網站中的 [建立新的裝載路徑] 畫面。

  10. 在 [名稱] 中,輸入唯一的應用程式名稱 (只包含 a-zA-Z0-9- 等有效字元)。 您可以接受自動產生的唯一名稱。 Web 應用程式的 URL 是 http://<app-name>.azurewebsites.net,其中 <app-name> 是您的應用程式名稱。

  11. 選取 [建立] 以建立 Azure 資源。

    螢幕擷取畫面:Visual Studio - [建立應用程式資源] 對話方塊。

    一旦精靈完成,就會為您建立 Azure 資源,然後您就可以開始發佈您的 ASP.NET Core 專案。

  12. 在 [發佈] 對話方塊中,確定已在 App Service 執行個體中選取新的 App Service 應用程式,然後選取 [完成]。 Visual Studio 會針對選取的 App Service 應用程式來為您建立發行設定檔。

  13. 在 [發佈] 頁面中,選取 [發佈]。 若您看到警示訊息,請選取 [繼續]。

    Visual Studio 會建立和封裝應用程式,並將其發佈至 Azure,然後在預設瀏覽器中啟動應用程式。

    您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:Visual Studio - Azure 中的 ASP.NET Core 6.0 Web 應用程式。

  1. 在 Visual Studio Code 中,開啟命令選擇區Ctrl+Shift+P

  2. 搜尋並選取 [Azure App Service: Deploy to Web App] \(Azure App Service:部署至 Web 應用程式\)。

  3. 如下所示地回應提示:

    1. 選取 [MyFirstAzureWebApp] 作為要部署的資料夾。
    2. 出現提示時,請選取 [新增設定]。
    3. 如果出現提示,登入您的 Azure 帳戶。
    4. 選取 [訂用帳戶]。
    5. 選擇 [Create new Web App... Advanced] \(建立新的 Web 應用程式...進階\)。
    6. 針對 [Enter a globally unique name] \(輸入全域唯一名稱\),請使用所有 Azure 中的唯一名稱 (有效字元為 a-z0-9-)。 良好的模式是使用您的公司名稱和應用程式識別碼的組合。
    7. 選取 [建立新的資源群組],然後提供 myResourceGroup 之類的名稱。
    8. 當收到選取執行階段堆疊的提示時:
    • 針對 .NET 6.0,選取 [.NET 6]
    • 針對 .NET Framework 4.8,選取 [ASP.NET V4.8]
    1. 選取作業系統 (Windows 或 Linux)。
      • 針對 .NET Framework 4.8,Windows 會隱含地選取。
    2. 選取與您接近的位置。
    3. 選取 [建立新的 App Service 方案]、提供名稱,然後選取 [F1 Free] \(F1 免費\) 定價層
    4. 針對 Application Insights 資源選取 [暫時略過]。
  4. 在快顯 [一律將工作區 "MyFirstAzureWebApp" 部署至 <app-name>] 中,選取 [是],以便每次您在該工作區中時,Visual Studio Code 都會部署至相同的App Service應用程式。

  5. 發佈完成時,請在通知中選取 [Browse Website] \(瀏覽網站\),然後在收到提示時選取 [開啟]。

    您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:Visual Studio Code - Azure 中的 ASP.NET Core 6.0 Web 應用程式。

  1. 使用 az login 命令登入您的 Azure 帳戶,並遵循下列提示:

    az login
    
  2. 直接使用 az webapp up 命令,在您的本機 MyFirstAzureWebApp 目錄中部署程式碼:

    az webapp up --sku F1 --name <app-name> --os-type <os>
    
    • 若無法辨識 az 命令,請確定您已安裝 Azure CLI,如先決條件中所述。
    • 以 Azure 中的唯一名稱 (有效字元為 a-z0-9-) 取代 <app-name>。 良好的模式是使用您的公司名稱和應用程式識別碼的組合。
    • --sku F1 引數會在 [免費] 定價層上建立 Web 應用程式。 省略這個引數並使用進階層,如此會產生每小時成本。
    • linuxwindows 取代 <os>。 您必須在以 ASP.NET Framework 4.8 為目標時使用 windows
    • 您可以選擇性地加入引數 --location <location-name>,其中 <location-name> 是可用的 Azure 區域。 您可執行 az account list-locations 命令,擷取 Azure 帳戶的允許區域清單。

    此命令可能需要幾分鐘才能完成。 執行時,此命令會提供建立資源群組、App Service 方案、裝載應用程式、設定記錄,然後執行 ZIP 部署的相關訊息。 然後,其會顯示具有應用程式 URL 的訊息:

    You can launch the app at http://<app-name>.azurewebsites.net
    
  3. 開啟網頁瀏覽器,然後巡覽至 URL:

    您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:CLI - Azure 中的 ASP.NET Core 6.0 Web 應用程式。

注意

針對在 Windows 裝載平台上建立應用程式,建議使用 Azure PowerShell。 若要在 Linux 上建立應用程式,請使用不同的工具,例如 Azure CLI

  1. 使用 Connect-AzAccount 命令登入您的 Azure 帳戶,並遵循下列提示:

    Connect-AzAccount
    
  1. 使用 New-AzWebApp 命令建立新的應用程式:

    New-AzWebApp -Name <app-name> -Location westeurope
    
    • 以 Azure 中的唯一名稱 (有效字元為 a-z0-9-) 取代 <app-name>。 貴公司名稱和應用程式識別碼的組合是良好的模式。
    • 您可以選擇性地包含參數 -Location <location-name>,其中 <location-name> 是可用的 Azure 區域。 您可執行 Get-AzLocation 命令,擷取 Azure 帳戶的允許區域清單。

    此命令可能需要幾分鐘才能完成。 執行時,其會建立資源群組、App Service 方案與 App Service 資源。

  2. 從應用程式根資料夾中,使用 dotnet publish 命令準備本機 MyFirstAzureWebApp 應用程式以進行部署:

    dotnet publish --configuration Release
    
  3. 變更為發行目錄,並從內容建立 zip 檔案:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. 使用 Publish-AzWebApp 命令將 zip 檔案發佈至 Azure 應用程式:

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
    

    注意

    -ArchivePath 需要 zip 檔案的完整路徑。

  5. 開啟網頁瀏覽器,然後巡覽至 URL:

    您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:CLI - Azure 中的 ASP.NET Core 6.0 Web 應用程式。

  1. 在搜尋中輸入應用程式服務。 在 [服務] 下,選取 [App Service]。

    螢幕擷取畫面:Azure 入口網站中的入口網站搜尋。

  2. 在 [App Service] 頁面中,選取 [+ 建立]。

  3. 在 [基本知識] 索引標籤的 [專案詳細資料] 下,確保已選取正確的訂用帳戶,然後選取 [新建] 資源群組。 輸入 myResourceGroup 作為名稱。

    螢幕擷取畫面:[專案詳細資料] 區段顯示您可以在該區段中為 Web 應用程式選取 Azure 訂用帳戶和資源群組。

  4. 在 [執行個體詳細資料] 下方:

    • 在 [名稱] 下,輸入 Web 應用程式的全域唯一名稱。
    • 在 [發佈] 下,選取 [程式碼]。
    • 在 [執行階段堆疊] 下,選取 [.NET 6 (LTS)]。
    • 選取 [作業系統],以及您想要從中提供應用程式的 [區域]。

    螢幕擷取畫面:具有 .NET 6 執行階段的 App Service 執行個體詳細資料。

  5. 在 [App Service 方案] 下,選取 [新建] App Service 方案。 輸入 myAppServicePlan 作為名稱。 若要變更為免費層,請選取 [變更大小],選取 [開發/測試] 索引標籤,並選取 [F1],然後選取頁面底部的 [套用] 按鈕。

    螢幕擷取畫面:[管理員帳戶] 區段,您可在其中提供管理員使用者名稱和密碼。

  6. 選取頁面底部的 [下一步: 部署 >] 按鈕。

  7. 在 [部署] 索引標籤的 [GitHub Actions 設定] 下,確定 [持續部署] 為 [啟用]。

  8. 在 [GitHub Actions 詳細資料] 下,使用您的 GitHub 帳戶進行驗證,然後選取下列選項:

    • 針對 [組織],選取您已在其中派生示範專案的組織。
    • 針對 [存放庫], 選取 dotnetcore-docs-hello-world 專案。
    • 針對 [分支],選取 [主要]。

    螢幕擷取畫面:使用 .NET 6 執行階段的應用程式部署選項。

  9. 選取頁面底部的 [檢閱 + 建立] 按鈕。

    螢幕擷取畫面:頁面底部的 [檢閱] 和 [建立] 按鈕。

  10. 驗證執行之後,請選取頁面底部的 [建立] 按鈕。

  11. 當部署完成時,選取 [前往資源]。

    螢幕擷取畫面:移至資源的下一個步驟。

  12. 使用網頁瀏覽器瀏覽至已部署的應用程式 (URL 為 http://<app-name>.azurewebsites.net)。

更新應用程式並重新部署

請遵循下列步驟來更新和重新部署您的 Web 應用程式:

  1. 在 [方案總管] 的專案下,開啟 Index.cshtml

  2. 使用下列程式碼取代第一個 <div> 項目:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    儲存您的變更。

  3. 若要重新部署至 Azure,請在 [方案總管] 中,以滑鼠右鍵按一下 MyFirstAzureWebApp 專案,然後選取 [發佈]。

  4. 在 [發佈] 摘要頁面中,選取 [發佈] 。

    發佈完成時,Visual Studio 會啟動瀏覽器以前往 Web 應用程式的 URL。

    您會看到頁面中顯示的已更新 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:Visual Studio - Azure 中已更新的 ASP.NET Core 6.0 Web 應用程式。

  1. 編輯 Index.cshtml

  2. 使用下列程式碼取代第一個 <div> 項目:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    儲存您的變更。

  3. 在 Visual Studio Code 中,開啟命令選擇區Ctrl+Shift+P

  4. 搜尋並選取 [Azure App Service: Deploy to Web App] \(Azure App Service:部署至 Web 應用程式\)。

  5. 收到提示時,請選取 [部署]。

  6. 發佈完成時,請在通知中選取 [Browse Website] \(瀏覽網站\),然後在收到提示時選取 [開啟]。

    您會看到頁面中顯示的已更新 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:Visual Studio Code - Azure 中已更新的 ASP.NET Core 6.0 Web 應用程式。

在本機目錄中,開啟 Index.cshtml 檔案。 取代第一個 <div> 項目:

<div class="jumbotron">
    <h1>.NET 💜 Azure</h1>
    <p class="lead">Example .NET app to Azure App Service.</p>
</div>

儲存您的變更,然後再次使用 az webapp up 命令重新部署應用程式:

ASP.NET Core 6.0 是跨平台服務,會根據您先前的部署,以 linuxwindows 取代 <os>

az webapp up --os-type <os>

此命令會使用在 .azure/config 檔案中本機快取的值,包括應用程式名稱、資源群組和 App Service 方案。

部署完成後,切換回在「瀏覽至應用程式」 步驟中開啟的瀏覽器視窗,然後按 [重新整理]。

您會看到頁面中顯示的已更新 ASP.NET Core 6.0 Web 應用程式。

螢幕擷取畫面:CLI - Azure 中已更新的 ASP.NET Core 6.0 Web 應用程式。

  1. 在本機目錄中,開啟 Index.cshtml 檔案。 取代第一個 <div> 項目:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    
  2. 從應用程式根資料夾中,使用 dotnet publish 命令準備本機 MyFirstAzureWebApp 應用程式以進行部署:

    dotnet publish --configuration Release
    
  3. 變更為發行目錄,並從內容建立 zip 檔案:

    cd bin\Release\net6.0\publish
    Compress-Archive -Path * -DestinationPath deploy.zip
    
  4. 使用 Publish-AzWebApp 命令將 zip 檔案發佈至 Azure 應用程式:

    Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
    

    注意

    -ArchivePath 需要 zip 檔案的完整路徑。

  5. 部署完成後,切換回在「瀏覽至應用程式」 步驟中開啟的瀏覽器視窗,然後按 [重新整理]。

    您會看到頁面中顯示的已更新 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:CLI - Azure 中已更新的 ASP.NET Core 6.0 Web 應用程式。

  1. 瀏覽至範例程式碼的 GitHub 分支。

  2. 在存放庫頁面上,按下 . 來在瀏覽器中啟動 Visual Studio 程式碼。

    注意

    URL 會從 GitHub.com 改為 GitHub.dev。 此功能僅適用於擁有檔案的存放庫。 而不適用於空的存放庫。

  3. 編輯 Index.cshtml

    Index.cshtml 位於 Pages 資料夾中。

    螢幕擷取畫面:瀏覽器中來自 Visual Studio Code 的 Explorer 視窗,醒目提示 dotnetcore-docs-hello-world repo 中的 Index.cshtml。

  4. 使用下列程式碼取代第一個 <div> 項目:

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    儲存您的變更。

  5. 從 [原始檔控制] 功能表中,選取 [階段變更] 按鈕以暫存變更。

  6. 輸入認可訊息,例如 We love Azure。 然後,選取 [認可] 及 [推送]。

  7. 部署完成後,返回在瀏覽至應用程式步驟中開啟的瀏覽器視窗,然後重新整理頁面。

    您會看到頁面中顯示的已更新 ASP.NET Core 6.0 Web 應用程式。

    螢幕擷取畫面:CLI - Azure 中已更新的 ASP.NET Core 6.0 Web 應用程式。

管理 Azure 應用程式

若要管理 Web 應用程式,請移至 Azure 入口網站,然後搜尋並選取 [應用程式服務] 。

螢幕擷取畫面:Azure 入口網站 - [選取應用程式服務] 選項。

在 [應用程式服務] 頁面上,選取您的 Web 應用程式名稱。

螢幕擷取畫面:Azure 入口網站 - 已選取範例 Web 應用程式的 [應用程式服務] 頁面。

Web 應用程式的概觀頁面,其中包含瀏覽、停止、啟動、重新啟動和刪除等基本管理選項。 左側功能表提供的頁面可用來進一步設定您的應用程式。

螢幕擷取畫面:Azure 入口網站 - [App Service 概觀] 頁面。

清除資源

在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您認為未來不需要這些資源,可以用刪除資源群組的方式將它們刪除。

  1. 從 Azure 入口網站中的 Web 應用程式概觀頁面,選取資源群組底下的 myResourceGroup 連結。
  2. 在 [資源群組] 頁面上,確定所列出的資源是您想要刪除的項目。
  3. 選取 [刪除],在文字方塊中輸入 myResourceGroup,然後再選取 [刪除]

清除資源

在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您認為未來不需要這些資源,可以用刪除資源群組的方式將它們刪除。

  1. 從 Azure 入口網站中的 Web 應用程式概觀頁面,選取資源群組底下的 myResourceGroup 連結。
  2. 在 [資源群組] 頁面上,確定所列出的資源是您想要刪除的項目。
  3. 選取 [刪除],在文字方塊中輸入 myResourceGroup,然後再選取 [刪除]

清除資源

在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您在未來不需要這些資源,請在 Cloud Shell 中執行下列命令,刪除資源群組:

az group delete --name myResourceGroup

此命令可能會花一分鐘執行。

清除資源

在前述步驟中,您在資源群組中建立了 Azure 資源。 若您預期未來不需要使用這些資源,請執行下列 PowerShell 命令來刪除資源群組:

Remove-AzResourceGroup -Name myResourceGroup

此命令可能會花一分鐘執行。

清除資源

在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您認為未來不需要這些資源,可以用刪除資源群組的方式將它們刪除。

  1. 從 Azure 入口網站中的 Web 應用程式概觀頁面,選取資源群組底下的 myResourceGroup 連結。
  2. 在 [資源群組] 頁面上,確定所列出的資源是您想要刪除的項目。
  3. 選取 [刪除],在文字方塊中輸入 myResourceGroup,然後再選取 [刪除]

後續步驟

在快速入門中,您建立了 ASP.NET Web 應用程式,並將其部署至 Azure App Service。

請前往下一篇文章,了解如何建立 .NET Core 應用程式,並將其連線到 SQL Database: