クイックスタート: ASP.NET Web アプリをデプロイする

このクイックスタートでは、初めての ASP.NET Web アプリを作成し、Azure App Service にデプロイする方法について説明します。 App Service はさまざまなバージョンの .NET アプリをサポートし、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供します。 ASP.NET Web アプリはクロスプラットフォームであり、Linux でも Windows でもホストすることができます。 完了すると、App Service ホスティング プランと、デプロイされた Web アプリケーションを含む App Service とで構成される、Azure リソース グループを作成できます。

ヒント

.NET Core 3.1 は、最新の長期サポート (LTS) リリースの .NET です。 詳細については、.NET のサポート ポリシーに関するページを参照してください。

前提条件

  • アクティブなサブスクリプションが含まれる Azure アカウント。 無料でアカウントを作成できます

  • Visual Studio 2019ASP.NET と Web 開発 ワークロード。

    既に Visual Studio 2019 がインストール済みである場合:

    • [ヘルプ] > [更新プログラムの確認] の順に選択して、Visual Studio に最新の更新プログラムをインストールします。
    • [ツール] > [ツールと機能を取得] の順に選択し、ワークロードを追加します。

最新の .NET Core 3.1 SDK をインストールします。

最新の .NET Core 3.1 SDK をインストールします。

ASP.NET Web アプリを作成する

  1. Visual Studio を開き、 [新しいプロジェクトの作成] を選択します。

  2. [新しいプロジェクトの作成][ASP.NET Web Core App](ASP.NET Web Core アプリ) を検索して選択し、 [次へ] を選択します。

  3. [新しいプロジェクトの構成] で、アプリケーションに MyFirstAzureWebApp という名前を付け、 [次へ] を選択します。

    ASP.NET Core 3.1 Web アプリを構成する

  4. [.NET Core 3.1 (Long-term support)](.NET Core 3.1 (長期サポート)) を選択します。

  5. [認証の種類][なし] に設定されていることを確認します。 [作成] を選択します。

    Visual Studio - .NET Core 3.1 を選択し、[認証の種類] として [なし] を選択する。

  6. Visual Studio のメニューから [デバッグ] > [デバッグなしで開始] の順に選択して、Web アプリをローカルで実行します。

    Visual Studio - .NET Core 3.1 をローカルで参照

MyFirstAzureWebApp という名前の新しいフォルダーを作成し、Visual Studio Code で開きます。 ターミナル ウィンドウを開き、dotnet new webapp コマンドを使用して新しい .NET Web アプリを作成します。

dotnet new webapp -f netcoreapp3.1

Visual Studio Code の ターミナル から dotnet run コマンドを使用し、アプリケーションをローカルで実行します。

dotnet run

Web ブラウザーを開き、https://localhost:5001 のアプリに移動します。

テンプレート ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

Visual Studio Code - .NET Core 3.1 をブラウザーからローカルで実行する。

自分のマシンでターミナル ウィンドウを開き、作業ディレクトリに移動します。 dotnet new webapp コマンドを使用して新しい .NET Web アプリを作成し、新しく作成したアプリのディレクトリに移動します。

dotnet new webapp -n MyFirstAzureWebApp -f netcoreapp3.1 && cd MyFirstAzureWebApp

同じターミナル セッションから dotnet run コマンドを使用して、アプリケーションをローカルで実行します。

dotnet run

Web ブラウザーを開き、https://localhost:5001 のアプリに移動します。

テンプレート ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

Visual Studio Code - ローカル ブラウザーでの ASP.NET Core 3.1。

Web アプリを発行する

Web アプリを発行するには、まず、アプリの発行先となる新しい App Service を作成して構成する必要があります。

App Service の設定の一環として、次のものを作成します。

App Service を作成して Web アプリを発行するには、次の手順に従います。

  1. ソリューション エクスプローラーMyFirstAzureWebApp プロジェクトを右クリックし、 [発行] を選択します。

  2. [発行][Azure] を選択し、 [次へ] を選択します。

    Visual Studio - Web アプリを発行し、Azure をターゲットにする。

  3. 表示されるオプションは、既に Azure にサインインしているかどうかや、Visual Studio アカウントが Azure アカウントとリンクされているかどうかによって異なります。 [アカウントの追加] または [サインイン] を選択して Azure サブスクリプションにサインインします。 既にサインインしている場合は、目的のアカウントを選択します。

    Visual Studio - Azure へのサインインを選択するためのダイアログ。

  4. [特定のターゲット] で、 [Azure App Service (Linux)] または [Azure App Service (Windows)] を選択します。

    重要

    ASP.NET Framework 4.8 をターゲットにする場合は、 [Azure App Service (Windows)] を使用します。

  5. [App Service インスタンス] の右側にある [+] を選択します。

    Visual Studio - App Service アプリの新規作成ダイアログ。

  6. [サブスクリプション] で、リストされているサブスクリプションを受け入れるか、ドロップダウン リストから新しいサブスクリプションを選択します。

  7. [リソース グループ] で、 [新規] を選択します。 [新しいリソース グループ名] に「myResourceGroup」と入力し、 [OK] を選択します。

  8. [ホスティング プラン] で、 [新規] を選択します。

  9. ホスティング プランの [新規作成] ダイアログで、次の表で指定されている値を使用します。

    設定 推奨値 説明
    ホスティング プラン MyFirstAzureWebAppPlan App Service プランの名前です。
    場所 "西ヨーロッパ" Web アプリがホストされているデータ センターです。
    [サイズ] Free 価格レベルによって、ホスティング機能が決まります。

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

  10. [名前] に、有効な文字 (a-zA-Z0-9-) のみから成る一意のアプリ名を入力します。 自動的に生成される一意の名前をそのまま使用してもかまいません。 Web アプリの URL は http://<app-name>.azurewebsites.net です。<app-name> には自分のアプリの名前を指定します。

  11. [作成] を選択して、Azure リソースを作成します。

    Visual Studio - アプリ リソースの作成ダイアログ。

    ウィザードが完了すると、Azure リソースが作成され、発行する準備が整います。

  12. [完了] を選択して、ウィザードを終了します。

  13. [発行] ページで [発行] を選択します。 Visual Studio によってアプリのビルド、パッケージ化、および Azure への発行が行われた後、既定のブラウザーでアプリが起動されます。

    ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

    Visual Studio - Azure での ASP.NET Core 3.1 Web アプリ。

Visual Studio Azure Tools 拡張機能を使用して Web アプリをデプロイするには:

  1. Visual Studio Code で コマンド パレットを開き、Ctrl+Shift+P キーを押します。

  2. [Azure App Service: Web アプリにデプロイ] を検索して選択します。

  3. プロンプトに次のように応答します。

    • デプロイするフォルダーとして [MyFirstAzureWebApp] を選択します。
    • 確認を求められたら [構成の追加] を選択します。
    • メッセージに従って既存の Azure アカウントにサインインします。

    Visual Studio Code - Azure にサインインする。

    • サブスクリプション を選択します。
    • [Create new Web App](新しい Web アプリの作成)、[詳細設定] の順に選択します。
    • [Enter a globally unique name](グローバルに一意の名前を入力する) には、Azure 全体で一意の名前を使用します ("有効な文字は a-z0-9- です")。 会社名とアプリ識別子を組み合わせて使用すると、適切なパターンになります。
    • [新しいリソース グループの作成] を選択して、myResourceGroup のような名前を指定します。
    • "ランタイム スタックを選択してください" という確認を求められたら、次の操作を行います。
      • [.NET Core 3.1] の場合は、 [.NET Core 3.1 (LTS)] を選択します
      • [.NET 5.0] の場合は、 [.NET 5] を選択します
      • [.NET Framework 4.8] の場合は、 [ASP.NET V4.8] を選択します
    • オペレーティング システム (Windows または Linux) を選択します。
      • .NET Framework 4.8 の場合は、暗黙的に Windows が選択されます。
    • [新しい App Service プランの作成] を選択し、名前を指定して、 [F1 Free] 価格レベルを選択します。
    • Application Insights リソースに対して [Skip for now](今はしない) を選択します。
    • お近くの場所を選択します。
  4. 発行が完了したら、通知の [Web サイトの参照] を選択し、確認を求められたら [開く] を選択します。

    ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

    Visual Studio Code - Azure での ASP.NET Core 3.1 Web アプリ。

az webapp up コマンドを使用して、ローカルの MyFirstAzureWebApp ディレクトリにコードをデプロイします。

az webapp up --sku F1 --name <app-name> --os-type <os>
  • az コマンドが認識されない場合は、「前提条件」の説明に従って Azure CLI がインストールされていることを確認してください。
  • <app-name> を Azure 全体で一意の名前で置き換えます ("有効な文字は、a-z0-9、および - です")。 会社名とアプリ識別子を組み合わせて使用すると、適切なパターンになります。
  • --sku F1 引数を使用すると、Free 価格レベルで Web アプリが作成されます。 この引数を省略するとより高速な Premium レベルが使用されるため、時間単位のコストが発生します。
  • <os>linux または windows に置き換えます。 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

Web ブラウザーを開き、URL に移動します。

ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

CLI - Azure での ASP.NET Core 3.1 Web アプリ。

アプリを更新して再デプロイする

Web アプリを更新して再デプロイするには、次の手順に従います。

  1. ソリューション エクスプローラー で、対象プロジェクトの [Index.cshtml] を開きます。

  2. 最初の <div> 要素を次のコードに置き換えます。

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    変更内容を保存します。

  3. Azure に再デプロイするには、ソリューション エクスプローラーMyFirstAzureWebApp プロジェクトを右クリックし、 [発行] を選択します。

  4. 発行 の概要ページで [発行] を選択します。

    発行が完了すると、Visual Studio で Web アプリの URL のブラウザーが起動されます。

    更新された ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

    Visual Studio - Azure での更新された ASP.NET Core 3.1 Web アプリ。

  1. Index.cshtml を開きます。

  2. 最初の <div> 要素を次のコードに置き換えます。

    <div class="jumbotron">
        <h1>.NET 💜 Azure</h1>
        <p class="lead">Example .NET app to Azure App Service.</p>
    </div>
    

    変更内容を保存します。

  3. Visual Studio Code の サイド バー を開き、Azure アイコンを選択して、そのオプションを展開します。

  4. [APP SERVICE] ノードで自分のサブスクリプションを展開し、 [MyFirstAzureWebApp] を右クリックします。

  5. [Web アプリにデプロイ] を選択します。

  6. 確認を求められたら [デプロイ] を選択します。

  7. 発行が完了したら、通知の [Web サイトの参照] を選択し、確認を求められたら [開く] を選択します。

    更新された ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

    Visual Studio Code - Azure での更新された ASP.NET Core 3.1 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 3.1 はクロスプラットフォームです。前のデプロイに基づいて、<os>linux または windows に置き換えてください。

az webapp up --os-type <os>

このコマンドでは、 .azure/config ファイルにローカルでキャッシュされている値 (アプリ名、リソース グループ、App Service プランなど) を使用します。

デプロイが完了したら、「アプリの参照」の手順で開いた元のブラウザー ウィンドウに切り替えて、更新をクリックします。

更新された ASP.NET Core 3.1 Web アプリがページに表示されていることがわかります。

CLI - Azure での更新された ASP.NET Core 3.1 Web アプリ。

Azure アプリの管理

Web アプリを管理するには、Azure portal に移動し、 [App Services] を検索して選択します。

Azure portal - [App Services] オプションを選択する。

[App Services] ページで、Web アプリの名前を選択します。

Azure portal - サンプル Web アプリが選択されている [App Services] ページ。

Web アプリの [概要] ページには、参照、停止、開始、再起動、削除などの基本的な管理のためのオプションが含まれています。 左側のメニューは、アプリを構成するためのさらなるページを示しています。

Azure portal - App Service の概要ページ。

リソースをクリーンアップする

前の手順では、リソース グループ内に Azure リソースを作成しました。 今後、これらのリソースを必要としない場合は、リソース グループを削除することでリソースを削除できます。

  1. Azure Portal の Web アプリの [概要] ページで、[リソース グループ] の下の myResourceGroup リンクを選択します。
  2. リソース グループ ページで、リストされたリソースが削除対象であることを確認します。
  3. [削除] を選択し、テキスト ボックスに「myResourceGroup」と入力してから、 [削除] を選びます。

リソースをクリーンアップする

前の手順では、リソース グループ内に Azure リソースを作成しました。 今後、これらのリソースを必要としない場合は、リソース グループを削除することでリソースを削除できます。

  1. Azure Portal の Web アプリの [概要] ページで、[リソース グループ] の下の myResourceGroup リンクを選択します。
  2. リソース グループ ページで、リストされたリソースが削除対象であることを確認します。
  3. [削除] を選択し、テキスト ボックスに「myResourceGroup」と入力してから、 [削除] を選びます。

リソースをクリーンアップする

前の手順では、リソース グループ内に Azure リソースを作成しました。 これらのリソースが将来必要になると想定していない場合、Cloud Shell で次のコマンドを実行して、リソース グループを削除します。

az group delete --name myResourceGroup

このコマンドの実行には、少し時間がかかる場合があります。

次の手順

このクイックスタートでは、ASP.NET Web アプリを作成して Azure App Service にデプロイしました。

次の記事に進み、.NET Core アプリを作成して SQL Database に接続する方法を学習してください。