在 Azure 中建立 ASP.NET Core Web 應用程式Create an ASP.NET Core web app in Azure

注意

本文會將應用程式部署至 Windows 上的 App Service。This article deploys an app to App Service on Windows. 若要部署至 Linux 上的 App Service,請參閱在 Linux 上的 App Service 中建立 NET Core Web 應用程式To deploy to App Service on Linux, see Create a .NET Core web app in App Service on Linux.

Azure App Service 可提供可高度擴充、自我修復的 Web 主控服務。Azure App Service provides a highly scalable, self-patching web hosting service.

本快速入門會顯示如何將第一個 ASP.NET Core Web 應用程式部署至 Azure App Service。This quickstart shows how to deploy your first ASP.NET Core web app to Azure App Service. 當您完成時,您會有已部署 Web 應用程式的資源群,其中包含 App Service 方案和 App Service 應用程式。When you're finished, you'll have a resource group that consists of an App Service plan and an App Service app with a deployed web application.

如果您沒有 Azure 訂用帳戶,請在開始前建立免費帳戶If you don't have an Azure subscription, create a free account before you begin.

必要條件Prerequisites

若要完成此教學課程,請安裝 Visual Studio 2019ASP.NET 以及 Web 開發工作負載。To complete this tutorial, install Visual Studio 2019 with the ASP.NET and web development workload.

若您已安裝 Visual Studio 2019:If you've installed Visual Studio 2019 already:

  • 選取 [說明] > [檢查更新] 以安裝最新的 Visual Studio 更新。Install the latest updates in Visual Studio by selecting Help > Check for Updates.
  • 選取 [工具] > [取得工具及功能] 。Add the workload by selecting Tools > Get Tools and Features.

建立 ASP.NET Core Web 應用程式Create an ASP.NET Core web app

請遵循下列步驟來建立 ASP.NET Core Web 應用程式:Create an ASP.NET Core web app by following these steps:

  1. 開啟 Visual Studio,然後選取 [建立新專案] 。Open Visual Studio and then select Create a new project.

  2. 在 [建立新專案] 中,針對 C# 尋找並選擇 [ASP.NET Core Web 應用程式] ,然後選取 [下一步] 。In Create a new project, find and choose ASP.NET Core Web Application for C#, then select Next.

  3. 在 [設定新專案] 中,將應用程式命名為 myFirstAzureWebApp ,然後選取 [建立] 。In Configure your new project, name the application myFirstAzureWebApp, and then select Create.

    設定 Web 應用程式專案

  4. 在本快速入門中,選擇 [Web 應用程式] 範本。For this quickstart, choose the Web Application template. 請確定驗證已設定為 [不需要驗證] ,且未選取其他選項。Make sure authentication is set to No Authentication and no other option is selected. 選取 [建立] 。Select Create.

    針對此教學課程選取 ASP.NET Core Razor 頁面

    您可以將任何類型的 ASP.NET Core Web 應用程式部署至 Azure。You can deploy any type of ASP.NET Core web app to Azure.

  5. 從 Visual Studio 功能表中,選取 [偵錯] > [啟動但不偵錯] 以在本機執行 Web 應用程式。From the Visual Studio menu, select Debug > Start Without Debugging to run the web app locally.

    在本機執行應用程式

發佈 Web 應用程式Publish your web app

  1. 在 [方案總管] 中,以滑鼠右鍵按一下 myFirstAzureWebApp 專案,然後選取 [發佈] 。In Solution Explorer, right-click the myFirstAzureWebApp project and select Publish.

  2. 選擇 [App Service] ,然後選取 [發佈] 。Choose App Service and then select Publish.

    從專案概觀頁面發佈

  3. 在 [App Service 建立新的] 中,您的選項取決於您是否已登入 Azure,以及是否有將 Visual Studio 帳戶連結至 Azure 帳戶。In App Service Create new, your options depend on whether you're signed in to Azure already and whether you have a Visual Studio account linked to an Azure account. 選取 [新增帳戶] 或 [登入] 來登入 Azure 訂用帳戶。Select either Add an account or Sign in to sign in to your Azure subscription. 若您已經登入,請選取要使用的帳戶。If you're already signed in, select the account you want.

    注意

    如果您已經登入,請勿選取 [建立] 。If you're already signed in, don't select Create yet.

    登入 Azure

    資源群組是一個邏輯容器,可在其中部署與管理 Azure 資源 (例如 Web 應用程式、資料庫和儲存體帳戶)。A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. 例如,您可以選擇在稍候透過一個簡單的步驟刪除整個資源群組。For example, you can choose to delete the entire resource group in one simple step later.

  4. 在 [資源群組] 中選取 [新增] 。For Resource group, select New.

  5. 在 [新增資源群組名稱] 中,輸入 myResourceGroup ,然後選取 [確定] 。In New resource group name, enter myResourceGroup and select OK.

    App Service 方案會指定用來裝載應用程式的 Web 伺服器陣列位置、大小和功能。An App Service plan specifies the location, size, and features of the web server farm that hosts your app. 在裝載多個應用程式時,您可以將 Web 應用程式設定為共用單一 App Service 方案來節省開支。You can save money when hosting multiple apps by configuring the web apps to share a single App Service plan.

    App Service 方案可定義:App Service plans define:

    • 區域 (例如:北歐、美國東部或東南亞)Region (for example: North Europe, East US, or Southeast Asia)
    • 執行個體大小 (小型、中型或大型)Instance size (small, medium, or large)
    • 級別計數 (1 到 20 個執行個體)Scale count (1 to 20 instances)
    • SKU (免費、共用、基本、標準或進階)SKU (Free, Shared, Basic, Standard, or Premium)
  6. 針對 [主控方案] 選取 [新增] 。For the Hosting Plan, select New.

  7. 在 [設定主控方案] 對話方塊中,輸入下表中的值,然後選取 [確定] 。In the Configure Hosting Plan dialog, enter the values from the following table, and then select OK.

    設定Setting 建議的值Suggested Value 說明Description
    App Service 方案App Service Plan myAppServicePlanmyAppServicePlan App Service 方案的名稱。Name of the App Service plan.
    位置Location 西歐West Europe 裝載 Web 應用程式的資料中心。The datacenter where the web app is hosted.
    大小Size 免費Free 定價層可決定裝載功能。Pricing tier determines hosting features.

    建立 App Service 方案

  8. 在 [名稱] 中,輸入唯一的應用程式名稱 (只包含 a-zA-Z0-9- 等有效字元)。In Name, enter a unique app name that includes only the valid characters are a-z, A-Z, 0-9, and -. 您可以接受自動產生的唯一名稱。You can accept the automatically generated unique name. Web 應用程式的 URL 是 http://<app_name>.azurewebsites.net,其中 <app_name> 是您的應用程式名稱。The URL of the web app is http://<app_name>.azurewebsites.net, where <app_name> is your app name.

    設定應用程式名稱

  9. 選取 [建立] 開始建立 Azure 資源。Select Create to start creating the Azure resources.

精靈完成後,它會將 ASP.NET Core Web 應用程式發佈至 Azure,然後在預設瀏覽器中啟動該應用程式。Once the wizard completes, it publishes the ASP.NET Core web app to Azure, and then launches the app in the default browser.

Azure 中已發佈的 ASP.NET Web 應用程式

在 [App Service 建立新的] 頁面中指定的應用程式名稱,會作為格式 http://<app_name>.azurewebsites.net 中的 URL 前置詞。The app name specified in the App Service Create new page is used as the URL prefix in the format http://<app_name>.azurewebsites.net.

恭喜!Congratulations! ASP.NET Core Web 應用程式已在 Azure App Service 中即時執行。Your ASP.NET Core web app is running live in Azure App Service.

更新應用程式並重新部署Update the app and redeploy

  1. 在 [方案總管] 的專案底下,開啟 [頁面] > [Index.cshtml] 。In Solution Explorer, under your project, open Pages > Index.cshtml.

  2. 以下列程式碼取代這兩個 <div> 標記:Replace the two <div> tags with the following code:

    <div class="jumbotron">
        <h1>ASP.NET in Azure!</h1>
        <p class="lead">This is a simple app that we’ve built that demonstrates how to deploy a .NET app to Azure App Service.</p>
    </div>
    
  3. 若要重新部署至 Azure,請在 [方案總管] 中,以滑鼠右鍵按一下 myFirstAzureWebApp 專案,然後選取 [發佈] 。To redeploy to Azure, right-click the myFirstAzureWebApp project in Solution Explorer and select Publish.

  4. 在 [發佈] 摘要頁面中,選取 [發佈] 。In the Publish summary page, select Publish.

    Visual Studio 發佈摘要頁面

發佈完成時,Visual Studio 會啟動瀏覽器以前往 Web 應用程式的 URL。When publishing completes, Visual Studio launches a browser to the URL of the web app.

Azure 中已更新的 ASP.NET Web 應用程式

管理 Azure 應用程式Manage the Azure app

若要管理 Web 應用程式,請移至 Azure 入口網站,然後搜尋並選取 [應用程式服務] 。To manage the web app, go to the Azure portal, and search for and select App Services.

選取 [應用程式服務]

在 [應用程式服務] 頁面上,選取您的 Web 應用程式名稱。On the App Services page, select the name of your web app.

入口網站瀏覽至 Azure 應用程式

您會看到 Web 應用程式的 [概觀] 頁面。You see your web app's Overview page. 您可以在這裡進行基本管理,像是瀏覽、停止、啟動、重新啟動及刪除。Here, you can do basic management like browse, stop, start, restart, and delete.

Azure 入口網站中的 App Service

左側功能表提供不同的頁面來設定您的應用程式。The left menu provides different pages for configuring your app.

清除資源Clean up resources

在前述步驟中,您在資源群組中建立了 Azure 資源。In the preceding steps, you created Azure resources in a resource group. 如果您認為未來不需要這些資源,可以用刪除資源群組的方式將它們刪除。If you don't expect to need these resources in the future, you can delete them by deleting the resource group.

從 Azure 入口網站功能表或首頁中,選取 [資源群組] ,並且在 [資源群組] 頁面中,選取 [myResourceGroup] 。From the Azure portal menu or Home page, select Resource groups, and on the Resource groups page, select myResourceGroup.

在 [myResourceGroup] 頁面上,確定所列出的資源是您想要刪除的項目。On the myResourceGroup page, make sure that the listed resources are the ones you want to delete.

選取 [刪除] ,在文字方塊中輸入 myResourceGroup,然後再選取 [刪除] 。Select Delete, type myResourceGroup in the text box, and then select Delete.

後續步驟Next steps