クイック スタート:Azure に ASP.NET Core Web アプリを作成するQuickstart: Create an ASP.NET Core web app in Azure

このクイック スタートでは、初めての ASP.NET Core Web アプリを作成し、Azure App Service にデプロイする方法について説明します。In this quickstart, you'll learn how to create and deploy your first ASP.NET Core web app to Azure App Service.

完了すると、App Service ホスティング プランと、デプロイされた Web アプリケーションを含む App Service とで構成される、Azure リソース グループを作成できます。When you're finished, you'll have an Azure resource group consisting of an App Service hosting plan and an App Service with a deployed web application.

前提条件Prerequisites

  • アクティブなサブスクリプションが含まれる Azure アカウント。An Azure account with an active subscription. 無料でアカウントを作成できますCreate an account for free.

  • このクイック スタートでは、Windows 上の App Service にアプリをデプロイします。This quickstart deploys an app to App Service on Windows. Linux 上の App Service にデプロイするには、「App Service on Linux で ASP.NET Core アプリを作成する」をご覧ください。To deploy to App Service on Linux, see Create a .NET Core web app in App Service on Linux.

  • [ASP.NET および Web の開発] ワークロードと共に Visual Studio 2019 をインストールする。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

次の手順に従って、Visual Studio で ASP.NET Core Web アプリを作成します。Create an ASP.NET Core web app in Visual Studio by following these steps:

  1. Visual Studio を開き、 [新しいプロジェクトの作成] を選択します。Open Visual Studio and select Create a new project.

  2. [新しいプロジェクトの作成] で、 [ASP.NET Core Web アプリケーション] を選択し、その選択内容の言語に [C#] がリストされていることを確認してから、 [次へ] を選択します。In Create a new project, select ASP.NET Core Web Application and confirm that C# is listed in the languages for that choice, then select Next.

  3. [新しいプロジェクトの構成] で、ご自分の Web アプリケーション プロジェクトに myFirstAzureWebApp という名前を指定し、 [作成] を選択します。In Configure your new project, name your web application project myFirstAzureWebApp, and select Create.

    Web アプリ プロジェクトを構成する

  4. 任意の種類の ASP.NET Core Web アプリを Azure にデプロイできますが、このクイック スタートでは、 [Web アプリケーション] テンプレートを選択します。You can deploy any type of ASP.NET Core web app to Azure, but for this quickstart, choose the Web Application template. [認証][認証なし] に設定されていて、他のオプションが選択されていないことを確認してください。Make sure Authentication is set to No Authentication, and that no other option is selected. そのうえで [Create](作成) を選択します。Then, select Create.

    新しい ASP.NET Core Web アプリを作成する

  5. Visual Studio のメニューから [デバッグ] > [デバッグなしで開始] を選択して、Web アプリをローカルで実行します。From the Visual Studio menu, select Debug > Start Without Debugging to run your web app locally.

    ローカルで実行されている Web アプリ

Web アプリを発行するPublish your web app

Web アプリを発行するには、まず、アプリの発行先となる新しい App Service を作成して構成する必要があります。To publish your web app, you must first create and configure a new App Service that you can publish your app to.

App Service の設定の一環として、次のものを作成します。As part of setting up the App Service, you'll create:

  • サービスのすべての Azure リソースを格納する新しいリソース グループA new resource group to contain all of the Azure resources for the service.
  • アプリをホストする Web サーバー ファームの場所、サイズ、および機能を指定する新しいホスティング プランA new Hosting Plan that specifies the location, size, and features of the web server farm that hosts your app.

App Service を作成して Web アプリを発行するには、次の手順に従います。Follow these steps to create your App Service and publish your web app:

  1. ソリューション エクスプローラーmyFirstAzureWebApp プロジェクトを右クリックし、 [発行] を選択します。In Solution Explorer, right-click the myFirstAzureWebApp project and select Publish. まだ Visual Studio から Azure アカウントにサインインしていない場合は、 [アカウントの追加] または [サインイン] を選択します。If you haven't already signed-in to your Azure account from Visual Studio, select either Add an account or Sign in. 無料の Azure アカウントを作成することもできます。You can also create a free Azure account.

  2. [発行先を選択] ダイアログボックスで [App Service] を選択し、 [新規作成] を選択して、 [プロファイルの作成] を選択します。In the Pick a publish target dialog box, choose App Service, select Create New, and then select Create Profile.

    発行先の選択

  3. App Service の [新規作成] ダイアログボックスで、既定の名前を受け入れるか、新しい名前を入力して、アプリに対してグローバルに一意の名前を指定します。In the App Service: Create new dialog, provide a globally unique Name for your app by either accepting the default name, or entering a new name. 有効な文字は、a-zA-Z0-9、および - です。Valid characters are: a-z, A-Z, 0-9, and -. この名前は、Web アプリの URL プレフィックスとして http://<app_name>.azurewebsites.net の形式で使用されます。This Name is used as the URL prefix for your web app in the format http://<app_name>.azurewebsites.net.

  4. [サブスクリプション] で、リストされているサブスクリプションを受け入れるか、ドロップダウン リストから新しいサブスクリプションを選択します。For Subscription, accept the subscription that is listed or select a new one from the drop-down list.

  5. [リソース グループ] で、 [新規] を選択します。In Resource group, select New. [新しいリソース グループ名] に「myResourceGroup」と入力し、 [OK] を選択します。In New resource group name, enter myResourceGroup and select OK.

  6. [ホスティング プラン] で、 [新規] を選択します。For Hosting Plan, select New.

  7. ホスティング プランの [新規作成] ダイアログで、次の表で指定されている値を使用します。In the Hosting Plan: Create new dialog, enter the values specified in the following table:

    設定Setting 推奨値Suggested Value 説明Description
    ホスティング プランHosting Plan myFirstAzureWebAppPlanmyFirstAzureWebAppPlan App Service プランの名前です。Name of the App Service plan.
    場所Location "西ヨーロッパ"West Europe Web アプリがホストされているデータ センターです。The datacenter where the web app is hosted.
    [サイズ]Size FreeFree 価格レベルによって、ホスティング機能が決まります。Pricing tier determines hosting features.

    新しいホスティング プランを作成する

  8. [Application Insights][なし] のままにします。Leave Application Insights set to None.

  9. App Service の [新規作成] ダイアログ ボックスで [作成] をクリックして、Azure リソースの作成を開始します。In the App Service: Create new dialog box, select Create to start creating the Azure resources.

    新しい App Service を作成する

  10. ウィザードが完了したら、 [発行] を選択します。Once the wizard completes, select Publish.

    Web アプリを Azure に発行する

    Visual Studio によって ASP.NET Core Web アプリが Azure に発行され、既定のブラウザーでアプリが起動されます。Visual Studio publishes your ASP.NET Core web app to Azure, and launches the app in your default browser.

    Azure で実行されている発行済みの ASP.NET Web アプリ

お疲れさまでした。Congratulations! Azure App Service で ASP.NET Core Web アプリをライブ実行することができました。Your ASP.NET Core web app is running live in Azure App Service.

アプリを更新して再デプロイするUpdate the app and redeploy

Web アプリを更新して再デプロイするには、次の手順に従います。Follow these steps to update and redeploy your web app:

  1. ソリューション エクスプローラーで、対象プロジェクトから [ページ] > [Index.cshtml] の順に開きます。In Solution Explorer, under your project, open Pages > Index.cshtml.

  2. <div> タグ全体を次のコードに置き換えます。Replace the entire <div> tag 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.

    Web アプリに更新を発行する

発行が完了すると、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 your 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 アプリの [概要] ページには、参照、停止、開始、再起動、削除などの基本的な管理のためのオプションが含まれています。The Overview page for your web app, contains options for basic management like browse, stop, start, restart, and delete. 左側のメニューは、アプリを構成するためのさらなるページを示しています。The left menu provides further pages for configuring your app.

Azure portal の App Service

リソースをクリーンアップする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 resource group, type myResourceGroup in the text box to confirm, and then select Delete.

次のステップNext steps

このクイック スタートでは、Visual Studio を使用して ASP.NET Core Web アプリを作成し、Azure App Service にデプロイしました。In this quickstart, you used Visual Studio to create and deploy an ASP.NET Core web app to Azure App Service.

次の記事に進み、.NET Core アプリを作成して SQL Database に接続する方法を学習してください。Advance to the next article to learn how to create a .NET Core app and connect it to a SQL Database: