Azure に ASP.NET Framework Web アプリを作成するCreate an ASP.NET Framework web app in Azure

Azure App Service では、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供しています。Azure App Service provides a highly scalable, self-patching web hosting service.

このクイック スタートでは、Azure App Service に初めての ASP.NET Web アプリをデプロイする方法を示します。This quickstart shows how to deploy your first ASP.NET web app to Azure App Service. 完了すると、App Service プランが作成されます。When you're finished, you'll have an App Service plan. また、App Service アプリが作成され、Web アプリケーションがデプロイされます。You'll also have 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 Web アプリを作成するCreate an ASP.NET web app

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

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

  2. [新しいプロジェクトの作成] で、 [ASP.NET Web アプリケーション (.NET Framework)] を選択し、 [次へ] を選択します。In Create a new project, find and choose ASP.NET Web Application (.NET Framework), then select Next.

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

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

  4. 任意の種類の ASP.NET Web アプリを Azure にデプロイできます。You can deploy any type of ASP.NET web app to Azure. このクイックスタートでは、 [MVC] テンプレートを選択します。For this quickstart, choose the MVC template.

  5. 認証が [認証なし] に設定されていることを確認しますMake sure authentication is set to No Authentication. 作成 を選択します。Select Create.

    ASP.NET Web アプリケーションを作成する

  6. 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 change Create profile to 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 to 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 Web アプリを発行してから、既定のブラウザーでアプリを起動します。Once the wizard completes, it publishes the ASP.NET 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 Web アプリを Azure App Service でライブ実行することができました。Your ASP.NET web app is running live in Azure App Service.

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

  1. ソリューション エクスプローラーで、対象プロジェクトの [表示] > [ホーム] > [Index.cshtml] を順に開きます。In Solution Explorer, under your project, open Views > Home > Index.cshtml.

  2. 上部の <div class="jumbotron"> HTML タグを検索し、要素全体を次のコードに置き換えます。Find the <div class="jumbotron"> HTML tag near the top, and replace the entire element 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. 続けて、 [発行] を選択します。Then, select Publish.

発行が完了すると、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

  1. Web アプリを管理するには、Azure portal にアクセスし、App Services を検索して選択します。To manage the web app, go to the Azure portal, and search for and select App Services.

    App Services を選択する

  2. [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.

次の手順Next steps