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 にデプロイするには、「App Service on Linux での .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.

このクイック スタートでは、Azure App Service に初めての ASP.NET Core Web アプリをデプロイする方法について説明します。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

このチュートリアルを完了するには、ASP.NET および Web 開発のワークロードと共に、Visual Studio 2019 をインストールします。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 Pages を選択

    任意の種類の 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 へのサインイン

    リソース グループとは、Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナーです。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」と入力し、 [OK] を選択します。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. 1 つの App Service プランを共有するように Web アプリを構成することで、複数のアプリをホストするときのコストを抑えることができます。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)
    • インスタンス サイズ (S、M、L)Instance size (small, medium, or large)
    • スケール カウント (1 ~ 20 インスタンス)Scale count (1 to 20 instances)
    • SKU (Free、Shared、Basic、Standard、Premium)SKU (Free, Shared, Basic, Standard, or Premium)
  6. [ホスティング プラン] には [新規] を選択します。For the Hosting Plan, select New.

  7. [ホスティング プランの構成] ダイアログで、次の表の値を入力し、 [OK] を選択します。In the Configure Hosting Plan dialog, enter the values from the following table, and then select OK.

    SettingSetting 推奨値Suggested Value 説明Description
    App Service プランApp Service Plan myAppServicePlanmyAppServicePlan App Service プランの名前です。Name of the App Service plan.
    LocationLocation 西ヨーロッパWest Europe Web アプリがホストされているデータ センターです。The datacenter where the web app is hosted.
    SizeSize 無料Free 価格レベルによって、ホスティング機能が決まります。Pricing tier determines hosting features.

    Create App Service plan

  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.

ウィザードの完了後に、Azure に ASP.NET Core Web アプリを発行してから、既定のブラウザーでアプリを起動します。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. 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 portal にアクセスし、「App Services」を検索して選択します。To manage the web app, go to the Azure portal, and search for and select App Services.

[App Services] を選択します

[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 portal の 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 portal メニューまたは [ホーム] ページから、 [リソース グループ] を選択し、 [リソース グループ] ページで、 [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