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

在本快速入門中,您將瞭解如何建立第一個 ASP.NET Web 應用程式並將其部署至Azure App 服務。 App Service支援各種 .NET 應用程式版本,並提供高度可調整、自我修補的 Web 裝載服務。 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 應用程式],然後選取 [下一步]。

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

    Visual Studio - Configure ASP.NET 6.0 web app.

  4. 選取 .NET Core 6.0 (長期支援)

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

    Visual Studio - Additional info when selecting .NET Core 6.0.

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

    Visual Studio - ASP.NET Core 6.0 running locally.

  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 - run .NET 6.0 in browser locally.

  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 in local browser.

發佈 Web 應用程式

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

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

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

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

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

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

    Visual Studio - Publish the web app and target Azure.

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

    重要

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

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

    Visual Studio - Select sign in to Azure dialog.

  5. App Service實例右邊,選取 +

    Visual Studio - New App Service app dialog.

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

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

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

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

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

    Create new Hosting Plan

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

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

    Visual Studio - Create app resources dialog.

    精靈完成後,系統會為您建立 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 - ASP.NET Core 6.0 web app in Azure.

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

  2. 搜尋並選取 [Azure App 服務:部署至 Web 應用程式]。

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

    1. 選取 [MyFirstAzureWebApp ] 作為要部署的資料夾。
    2. 出現提示時,選取 [新增組態 ]。
    3. 如果出現提示,登入您的 Azure 帳戶。
    4. 選取 [訂用帳戶]。
    5. 選取 [建立新的 Web 應用程式...進階
    6. 針對[輸入全域唯一名稱],請使用所有 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 免費定價層
    4. 針對 Application Insights 資源選取 [暫時略過]。
  4. 在快顯 [一律將工作區 「MyFirstAzureWebApp」 < 部署到 app-name > 」中,選取 [],以便在每次您位於該工作區時,Visual Studio Code部署至相同的App Service應用程式。

  5. 發佈完成時,請在通知中選取 [流覽網站 ],然後在出現提示時選取 [ 開啟 ]。

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

    Visual Studio Code - ASP.NET Core 6.0 web app in Azure.

  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 應用程式。 省略這個引數並使用進階層,如此會產生每小時成本。
    • 將 取代 <os>linuxwindows 。 您必須在以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 - ASP.NET Core 6.0 web app in Azure.

注意

建議在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. 從應用程式根資料夾,使用 命令準備本機 MyFirstAzureWebApp 應用程式以進行部署 dotnet publish

    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 - ASP.NET Core 6.0 web app in Azure.

更新應用程式並重新部署

請遵循下列步驟來更新和重新部署您的 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 - Updated ASP.NET Core 6.0 web app in Azure.

  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 服務:部署至 Web 應用程式]。

  5. 出現提示時,選取 [部署 ]。

  6. 發佈完成時,請在通知中選取 [流覽網站 ],然後在出現提示時選取 [ 開啟 ]。

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

    Visual Studio Code - Updated ASP.NET Core 6.0 web app in Azure.

在本機目錄中,開啟 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 是跨平臺,根據您的先前部署,將 取代 <os>linuxwindows

az webapp up --os-type <os>

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

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

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

CLI - Updated ASP.NET Core 6.0 web app in Azure.

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

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

    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 - Updated ASP.NET Core 6.0 web app in Azure.

管理 Azure 應用程式

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

Azure portal - Select App Services option.

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

Azure portal - App Services page with an example web app selected.

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

Azure portal - App Service overview page.

清除資源

在前述步驟中,您在資源群組中建立了 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

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

後續步驟

在本快速入門中,您已建立並部署 ASP.NET Web 應用程式,以Azure App 服務。

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