快速入門:部署 ASP.NET Web 應用程式
在此快速入門中,您將了解如何建立第一個 ASP.NET Web 應用程式,並將其部署至 Azure App Service。 App Service 支援各種版本的 .NET 應用程式,並提供可高度調整且自我修補的虛擬主機服務。 ASP.NET Web 應用程式是跨平台的應用程式,可以裝載在 Linux 或 Windows 上。 當您完成時,您會有一個 Azure 資源群組,其中包含 App Service 主控方案和已部署 Web 應用程式的 App Service。
或者,您可以在 App Service 中將 ASP.NET Web 應用程式部署為Windows 或 Linux 容器的一部分。
Prerequisites
- 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
- Visual Studio 2022,其中包含 ASP.NET 與 Web 部署工作負載。
若您已安裝 Visual Studio 2022:
- 選取 [說明]>[檢查更新] 以安裝最新的 Visual Studio 更新。
- 選取 [工具]>[取得工具及功能] 。
- 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
- Visual Studio Code \(英文\)。
- Azure Tools 延伸模組。
- 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
- Azure PowerShell。
- .NET SDK (包含執行階段與 CLI)。
建立 ASP.NET Web 應用程式
在終端機視窗中,建立名為 MyFirstAzureWebApp 的新資料夾,並在 Visual Studio Code 中開啟。
mkdir MyFirstAzureWebApp code MyFirstAzureWebApp
在 Visual Studio Code 中,鍵入
Ctrl
+`
以開啟終端機視窗。在 Visual Studio Code 終端機中,使用
dotnet new webapp
命令建立新的 .NET Web 應用程式。dotnet new webapp -f net6.0
從 Visual Studio Code 中的終端機,使用
dotnet run
命令在本機執行應用程式。dotnet run --urls=https://localhost:5001/
開啟網頁瀏覽器,然後巡覽至位於
https://localhost:5001
的應用程式。您會看到頁面中顯示的範本 ASP.NET Core 6.0 Web 應用程式。
將您電腦上的終端機視窗開啟至工作目錄。 使用
dotnet new webapp
命令建立新的 .NET Web 應用程式,然後將目錄變更為新建立的應用程式。dotnet new webapp -n MyFirstAzureWebApp --framework net6.0 cd MyFirstAzureWebApp
從相同的終端機工作階段中,使用
dotnet run
命令在本機執行應用程式。dotnet run --urls=https://localhost:5001/
開啟網頁瀏覽器,然後巡覽至位於
https://localhost:5001
的應用程式。您會看到頁面中顯示的範本 ASP.NET Core 6.0 Web 應用程式。
在此步驟中,我們將派生要部署的示範專案。
- 移至 .NET 6.0 範例應用程式。
- 選取 GitHub 頁面右上方的 [派生] 按鈕。
- 選取 [擁有者],並保留預設 [存放庫名稱]。
- 選取 [建立派生]。
發佈 Web 應用程式
若要發佈您的 Web 應用程式,您必須先建立並設定新的 App Service,讓您可以將應用程式發佈到其中。
在設定 App Service 的過程中,您將建立:
請遵循下列步驟來建立您的 App Service 資源,並發佈您的專案:
在 [方案總管] 中,以滑鼠右鍵按一下 [MyFirstAzureWebApp] 專案,然後選取 [發佈]。
在 [發佈] 中選取 [Azure],然後選取 [下一步]。
選擇 [特定目標],Azure App Service (Linux) 或 Azure App Servuce (Windows)。 然後,選取 [下一步] 。
重要
以 ASP.NET Framework 4.8 為目標時,請使用 Azure App Service (Windows)。
您的選項取決於您是否已登入 Azure,以及是否已將 Visual Studio 帳戶連結至 Azure 帳戶。 選取 [新增帳戶] 或 [登入] 來登入 Azure 訂用帳戶。 若您已經登入,請選取要使用的帳戶。
在 [App Service 執行個體] 右側,選取 [+]。
針對 [訂用帳戶],請接受列出的訂用帳戶,或從下拉式清單中選取一個新的訂用帳戶。
在 [資源群組] 中選取 [新增]。 在 [新增資源群組名稱] 中,輸入 myResourceGroup ,然後選取 [確定] 。
在 [主控方案] 中選取 [新增] 。
在 [主控方案: 新建] 對話方塊中,輸入下表中指定的值:
設定 建議的值 描述 主控方案 MyFirstAzureWebAppPlan App Service 方案的名稱。 位置 歐洲西部 裝載 Web 應用程式的資料中心。 大小 免費 定價層可決定裝載功能。 在 [名稱] 中,輸入唯一的應用程式名稱 (只包含
a-z
、A-Z
、0-9
和-
等有效字元)。 您可以接受自動產生的唯一名稱。 Web 應用程式的 URL 是http://<app-name>.azurewebsites.net
,其中<app-name>
是您的應用程式名稱。選取 [建立] 以建立 Azure 資源。
一旦精靈完成,就會為您建立 Azure 資源,然後您就可以開始發佈您的 ASP.NET Core 專案。
在 [發佈] 對話方塊中,確定已在 App Service 執行個體中選取新的 App Service 應用程式,然後選取 [完成]。 Visual Studio 會針對選取的 App Service 應用程式來為您建立發行設定檔。
在 [發佈] 頁面中,選取 [發佈]。 若您看到警示訊息,請選取 [繼續]。
Visual Studio 會建立和封裝應用程式,並將其發佈至 Azure,然後在預設瀏覽器中啟動應用程式。
您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。
在 Visual Studio Code 中,開啟命令選擇區,Ctrl+Shift+P。
搜尋並選取 [Azure App Service: Deploy to Web App] \(Azure App Service:部署至 Web 應用程式\)。
如下所示地回應提示:
- 選取 [MyFirstAzureWebApp] 作為要部署的資料夾。
- 出現提示時,請選取 [新增設定]。
- 如果出現提示,登入您的 Azure 帳戶。
- 選取 [訂用帳戶]。
- 選擇 [Create new Web App... Advanced] \(建立新的 Web 應用程式...進階\)。
- 針對 [Enter a globally unique name] \(輸入全域唯一名稱\),請使用所有 Azure 中的唯一名稱 (有效字元為
a-z
、0-9
與-
)。 良好的模式是使用您的公司名稱和應用程式識別碼的組合。 - 選取 [建立新的資源群組],然後提供
myResourceGroup
之類的名稱。 - 當收到選取執行階段堆疊的提示時:
- 針對 .NET 6.0,選取 [.NET 6]
- 針對 .NET Framework 4.8,選取 [ASP.NET V4.8]
- 選取作業系統 (Windows 或 Linux)。
- 針對 .NET Framework 4.8,Windows 會隱含地選取。
- 選取與您接近的位置。
- 選取 [建立新的 App Service 方案]、提供名稱,然後選取 [F1 Free] \(F1 免費\) 定價層。
- 針對 Application Insights 資源選取 [暫時略過]。
在快顯 [一律將工作區 "MyFirstAzureWebApp" 部署至 <app-name>] 中,選取 [是],以便每次您在該工作區中時,Visual Studio Code 都會部署至相同的App Service應用程式。
發佈完成時,請在通知中選取 [Browse Website] \(瀏覽網站\),然後在收到提示時選取 [開啟]。
您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。
使用
az login
命令登入您的 Azure 帳戶,並遵循下列提示:az login
直接使用
az webapp up
命令,在您的本機 MyFirstAzureWebApp 目錄中部署程式碼:az webapp up --sku F1 --name <app-name> --os-type <os>
- 若無法辨識
az
命令,請確定您已安裝 Azure CLI,如先決條件中所述。 - 以 Azure 中的唯一名稱 (有效字元為
a-z
、0-9
和-
) 取代<app-name>
。 良好的模式是使用您的公司名稱和應用程式識別碼的組合。 --sku F1
引數會在 [免費] 定價層上建立 Web 應用程式。 省略這個引數並使用進階層,如此會產生每小時成本。- 以
linux
或windows
取代<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
- 若無法辨識
開啟網頁瀏覽器,然後巡覽至 URL:
您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。
注意
針對在 Windows 裝載平台上建立應用程式,建議使用 Azure PowerShell。 若要在 Linux 上建立應用程式,請使用不同的工具,例如 Azure CLI。
使用
Connect-AzAccount
命令登入您的 Azure 帳戶,並遵循下列提示:Connect-AzAccount
使用 New-AzWebApp 命令建立新的應用程式:
New-AzWebApp -Name <app-name> -Location westeurope
- 以 Azure 中的唯一名稱 (有效字元為
a-z
、0-9
和-
) 取代<app-name>
。 貴公司名稱和應用程式識別碼的組合是良好的模式。 - 您可以選擇性地包含參數
-Location <location-name>
,其中<location-name>
是可用的 Azure 區域。 您可執行Get-AzLocation
命令,擷取 Azure 帳戶的允許區域清單。
此命令可能需要幾分鐘才能完成。 執行時,其會建立資源群組、App Service 方案與 App Service 資源。
- 以 Azure 中的唯一名稱 (有效字元為
從應用程式根資料夾中,使用
dotnet publish
命令準備本機 MyFirstAzureWebApp 應用程式以進行部署:dotnet publish --configuration Release
變更為發行目錄,並從內容建立 zip 檔案:
cd bin\Release\net6.0\publish Compress-Archive -Path * -DestinationPath deploy.zip
使用 Publish-AzWebApp 命令將 zip 檔案發佈至 Azure 應用程式:
Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
注意
-ArchivePath
需要 zip 檔案的完整路徑。開啟網頁瀏覽器,然後巡覽至 URL:
您會看到頁面中顯示的 ASP.NET Core 6.0 Web 應用程式。
在搜尋中輸入應用程式服務。 在 [服務] 下,選取 [App Service]。
在 [App Service] 頁面中,選取 [+ 建立]。
在 [基本知識] 索引標籤的 [專案詳細資料] 下,確保已選取正確的訂閱,然後選取 [新建] 資源群組。 輸入 myResourceGroup 作為名稱。
在 [執行個體詳細資料] 下方:
- 在 [名稱] 下,輸入 Web 應用程式的全域唯一名稱。
- 在 [發佈] 下,選取 [程式碼]。
- 在 [執行階段堆疊] 下,選取 [.NET 6 (LTS)]。
- 選取 [作業系統],以及您想要從中提供應用程式的 [區域]。
在 [App Service 方案] 下,選取 [新建] App Service 方案。 輸入 myAppServicePlan 作為名稱。 若要變更為免費層,請選取 [變更大小],選取 [開發/測試] 索引標籤,並選取 [F1],然後選取頁面底部的 [套用] 按鈕。
選取頁面底部的 [下一步: 部署 >] 按鈕。
在 [部署] 索引標籤的 [GitHub Actions 設定] 下,確定 [持續部署] 為 [啟用]。
在 [GitHub Actions 詳細資料] 下,使用您的 GitHub 帳戶進行驗證,然後選取下列選項:
- 針對 [組織],選取您已在其中派生示範專案的組織。
- 針對 [存放庫], 選取 dotnetcore-docs-hello-world 專案。
- 針對 [分支],選取 [主要]。
選取頁面底部的 [檢閱 + 建立] 按鈕。
驗證執行之後,請選取頁面底部的 [建立] 按鈕。
當部署完成時,選取 [前往資源]。
使用網頁瀏覽器瀏覽至已部署的應用程式 (URL 為
http://<app-name>.azurewebsites.net
)。
更新應用程式並重新部署
請遵循下列步驟來更新和重新部署您的 Web 應用程式:
在 [方案總管] 的專案下,開啟 Index.cshtml。
使用下列程式碼取代第一個
<div>
項目:<div class="jumbotron"> <h1>.NET 💜 Azure</h1> <p class="lead">Example .NET app to Azure App Service.</p> </div>
儲存您的變更。
若要重新部署至 Azure,請在 [方案總管] 中,以滑鼠右鍵按一下 MyFirstAzureWebApp 專案,然後選取 [發佈]。
在 [發佈] 摘要頁面中,選取 [發佈] 。
發佈完成時,Visual Studio 會啟動瀏覽器以前往 Web 應用程式的 URL。
您會看到頁面中顯示的已更新 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>
儲存您的變更。
在 Visual Studio Code 中,開啟命令選擇區,Ctrl+Shift+P。
搜尋並選取 [Azure App Service: Deploy to Web App] \(Azure App Service:部署至 Web 應用程式\)。
收到提示時,請選取 [部署]。
發佈完成時,請在通知中選取 [Browse Website] \(瀏覽網站\),然後在收到提示時選取 [開啟]。
您會看到頁面中顯示的已更新 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 是跨平台服務,會根據您先前的部署,以 linux
或 windows
取代 <os>
。
az webapp up --os-type <os>
此命令會使用在 .azure/config 檔案中本機快取的值,包括應用程式名稱、資源群組和 App Service 方案。
部署完成後,切換回在「瀏覽至應用程式」 步驟中開啟的瀏覽器視窗,然後按 [重新整理]。
您會看到頁面中顯示的已更新 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>
從應用程式根資料夾中,使用
dotnet publish
命令準備本機 MyFirstAzureWebApp 應用程式以進行部署:dotnet publish --configuration Release
變更為發行目錄,並從內容建立 zip 檔案:
cd bin\Release\net6.0\publish Compress-Archive -Path * -DestinationPath deploy.zip
使用 Publish-AzWebApp 命令將 zip 檔案發佈至 Azure 應用程式:
Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -Force
注意
-ArchivePath
需要 zip 檔案的完整路徑。部署完成後,切換回在「瀏覽至應用程式」 步驟中開啟的瀏覽器視窗,然後按 [重新整理]。
您會看到頁面中顯示的已更新 ASP.NET Core 6.0 Web 應用程式。
瀏覽至範例程式碼的 GitHub 分支。
在存放庫頁面上,按下
.
來在瀏覽器中啟動 Visual Studio 程式碼。注意
URL 會從 GitHub.com 改為 GitHub.dev。 此功能僅適用於擁有檔案的存放庫。 而不適用於空的存放庫。
編輯 Index.cshtml。
Index.cshtml 位於
Pages
資料夾中。使用下列程式碼取代第一個
<div>
項目:<div class="jumbotron"> <h1>.NET 💜 Azure</h1> <p class="lead">Example .NET app to Azure App Service.</p> </div>
儲存您的變更。
從 [原始檔控制] 功能表中,選取 [階段變更] 按鈕以暫存變更。
輸入認可訊息,例如
We love Azure
。 然後,選取 [認可] 及 [推送]。部署完成後,返回在瀏覽至應用程式步驟中開啟的瀏覽器視窗,然後重新整理頁面。
您會看到頁面中顯示的已更新 ASP.NET Core 6.0 Web 應用程式。
管理 Azure 應用程式
若要管理 Web 應用程式,請移至 Azure 入口網站,然後搜尋並選取 [應用程式服務] 。
在 [應用程式服務] 頁面上,選取您的 Web 應用程式名稱。
Web 應用程式的概觀頁面,其中包含瀏覽、停止、啟動、重新啟動和刪除等基本管理選項。 左側功能表提供的頁面可用來進一步設定您的應用程式。
清除資源
在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您認為未來不需要這些資源,可以用刪除資源群組的方式將它們刪除。
- 從 Azure 入口網站中的 Web 應用程式概觀頁面,選取資源群組底下的 myResourceGroup 連結。
- 在 [資源群組] 頁面上,確定所列出的資源是您想要刪除的項目。
- 選取 [刪除],在文字方塊中輸入 myResourceGroup,然後再選取 [刪除]。
清除資源
在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您認為未來不需要這些資源,可以用刪除資源群組的方式將它們刪除。
- 從 Azure 入口網站中的 Web 應用程式概觀頁面,選取資源群組底下的 myResourceGroup 連結。
- 在 [資源群組] 頁面上,確定所列出的資源是您想要刪除的項目。
- 選取 [刪除],在文字方塊中輸入 myResourceGroup,然後再選取 [刪除]。
清除資源
在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您在未來不需要這些資源,請在 Cloud Shell 中執行下列命令,刪除資源群組:
az group delete --name myResourceGroup
此命令可能會花一分鐘執行。
清除資源
在前述步驟中,您在資源群組中建立了 Azure 資源。 若您預期未來不需要使用這些資源,請執行下列 PowerShell 命令來刪除資源群組:
Remove-AzResourceGroup -Name myResourceGroup
此命令可能會花一分鐘執行。
清除資源
在前述步驟中,您在資源群組中建立了 Azure 資源。 如果您認為未來不需要這些資源,可以用刪除資源群組的方式將它們刪除。
- 從 Azure 入口網站中的 Web 應用程式概觀頁面,選取資源群組底下的 myResourceGroup 連結。
- 在 [資源群組] 頁面上,確定所列出的資源是您想要刪除的項目。
- 選取 [刪除],在文字方塊中輸入 myResourceGroup,然後再選取 [刪除]。
後續步驟
在快速入門中,您建立了 ASP.NET Web 應用程式,並將其部署至 Azure App Service。
請前往下一篇文章,了解如何建立 .NET Core 應用程式,並將其連線到 SQL Database: