Visual Studio を使用した Azure App Service への ASP.NET Web アプリのデプロイ

概要

このチュートリアルでは、Visual Studio 2015 を使用して ASP.NET Web アプリケーションを Azure App Service の Web アプリ にデプロイする方法を紹介します。

このチュートリアルは、Azure を使用した経験がない ASP.NET 開発者を対象に作成されています。 完了すると、単純な Web アプリケーションがクラウドで稼働している状態になります。

学習内容:

  • Visual Studio で新しい Web プロジェクトを作成するときに新しい App Service Web アプリを作成する方法。
  • Visual Studio を使用して、App Service Web アプリに WEB プロジェクトをデプロイする方法。

次の図は、チュートリアルでの作業内容を示しています。

Visual Studio での作成とデプロイの図

このチュートリアルの最後の「トラブルシューティング」セクションでは、うまくいかない場合の対処方法を説明します。また、「次のステップ」セクションには、Azure App Service の使い方をさらに学習できる他のチュートリアルへのリンクがあります。

これは入門チュートリアルであるため、デプロイ方法が示されている Web プロジェクトは単純なもので、データベースを使用せず、認証や承認を行いません。 より高度なデプロイのトピックへのリンクについては、 Azure Web アプリのデプロイ方法に関するページを参照してください。

Azure SDK for .NET のインストールに必要な時間は別にして、このチュートリアルを完了するには、10 ~ 15 分ほどかかります。

前提条件

開発環境の設定

このチュートリアルは、Visual Studio 2015 と Azure SDK for .NET 2.9 以降向けに書かれています。

Visual Studio 2013 を持っていて、それを使用する場合は、 最新の Azure SDK for Visual Studio 2013 をダウンロードすることができます。 一部の画面は画像と異なる場合があります。

Web アプリケーションの作成

次の手順では、Visual Studio で Web アプリケーション プロジェクトを作成し、Azure App Service で Web アプリを作成します。 チュートリアルのこのセクションでは、新しい Web プロジェクトを構成します。

  1. Visual Studio 2015 を開きます。
  2. [ファイル]、[新規作成]、[プロジェクト] の順にクリックします。
  3. [新しいプロジェクト] ダイアログ ボックスで、[Visual C#]、[Web]、[ASP.NET Web アプリケーション] の順にクリックします。
  4. ターゲット フレームワークとして [.NET Framework 4.5.2] が選択されていることを確認します。
  5. Azure Application Insights は、Web アプリの可用性、パフォーマンス、利用状況を監視します。 [Application Insights をプロジェクトに追加する] チェック ボックスは、Visual Studio のインストール後に初めて Web プロジェクトを作成するときは、既定でオンになっています。 このチェック ボックスがオンになっているが Application Insights を使う予定がない場合は、オフにしてください。
  6. アプリケーションに「MyExample」という名前を付けて、[OK] をクリックします。

    New Project dialog box

  7. [新しい ASP.NET プロジェクト] ダイアログ ボックスで、[MVC] テンプレートを選択し、[認証の変更] をクリックします。

    このチュートリアルでは、ASP.NET MVC Web プロジェクトをデプロイします。 ASP.NET Web API プロジェクトのデプロイ方法については、「 次のステップ 」セクションを参照してください。

    [新しい ASP.NET プロジェクト] ダイアログ ボックス

  8. [認証の変更] ダイアログ ボックスで、[認証なし] をクリックし、[OK] をクリックします。

    [認証なし]

    この入門チュートリアルでは、ユーザー ログインを行わない、単純なアプリをデプロイします。

  9. [New ASP.NET Project (新しい ASP.NET プロジェクト)] ダイアログ ボックスの [Microsoft Azure] セクションで、[クラウドにホストする] がオンになっていることと、ドロップダウン リストで [App Service] が選択されていることを確認します。

    [新しい ASP.NET プロジェクト] ダイアログ ボックス

    このように設定すると、Visual Studio によってこの Web プロジェクトの Azure Web アプリが自動的に作成されます。

  10. [OK]

Azure リソースの作成

ここでは、作成する Azure リソースについて、Visual Studio に指示します。

  1. [App Service の作成] ダイアログで [アカウントの追加] をクリックし、Azure サブスクリプションの管理に使用するアカウントの ID とパスワードで Azure にサインインします。

    Azure へのサインイン

    同じコンピューターに既にサインインしている場合は、 [アカウントの追加] ボタンが表示されないことがあります。 その場合は、この手順を省略できることもありますが、資格情報の再入力が必要なこともあります。

  2. azurewebsites.net ドメインに固有の Web アプリの名前 を入力します。 たとえば、MyExample という名前の右側に番号を付加して一意にすることができます (例: MyExample810)。 既定の Web 名が作成される場合は、それが一意になるため、そのまま使用することができます。

    入力した名前が既に使用されている場合は、右側に緑色のチェック マークではなく赤色の感嘆符が表示されます。この場合、別の名前を入力する必要があります。

    アプリケーションの URL は、この名前に .azurewebsites.netを追加したものです。 たとえば、名前が MyExample810 である場合、URL は myexample810.azurewebsites.net になります。

    また、Azure Web アプリでカスタム ドメインを使用することもできます。 詳細については、「 Azure App Service のカスタム ドメイン名の構成」を参照してください。

  3. [リソース グループ] ボックスの横にある [新規] をクリックし、「MyExample」(またはお好きな名前) を入力します。

    [App Service の作成] ダイアログ

    リソース グループは、Web アプリ、データベース、VM などの Azure リソースをひとまとめにしたものです。 チュートリアルを行うときは、新しいリソース グループを作成することをお勧めします。このようにすると、チュートリアルのために作成した Azure リソースをまとめて簡単に削除できるためです。 詳細については、「Azure Resource Manager の概要」を参照してください。

  4. [App Service プラン] ドロップダウンの隣にある [新規] ボタンをクリックします。

    [App Service の作成] ダイアログ

    [App Service プランの構成] ダイアログが表示されます。

    [App Service の構成] ダイアログ

    以降の手順では、新しいリソース グループの App Service プランを構成します。 App Service プランでは、Web アプリの実行環境となるコンピューティング リソースを指定します。 たとえば、Free レベルを選択した場合、API アプリは共有 VM 上で実行され、一部の有料レベルを選択した場合は専用 VM で実行されます。 詳細については、「 Azure App Service プランの詳細な概要」を参照してください。

  5. [App Service プランの構成] ダイアログに「MyExamplePlan」(またはお好きな名前) を入力します。
  6. [場所] ドロップダウン リストで、現在の所在地に最も近い場所を選択します。

    この設定によって、アプリが実行される Azure データ センターが指定されます。 このチュートリアルでは、任意のリージョンを選択することができます。任意のリージョンを選択しても、大きな違いはありません。 ただし運用アプリでは、待機時間を最小限に抑えるために、アクセスするクライアントに最も近いサーバーを選択することをお勧めします。

  7. [サイズ] ドロップダウンで、[Free] をクリックします。

    このチュートリアルでは、無料の価格レベルで十分に良好な性能が提供されます。

  8. [App Service プランの構成] ダイアログで、[OK] をクリックします。
  9. [App Service の作成] ダイアログ ボックスで、[作成] をクリックします。

Visual Studio での Azure リソースの確認

ごく短時間で (通常は&1; 分未満)、Visual Studio によって Web プロジェクトと Web アプリが作成されます。

[ソリューション エクスプローラー] ウィンドウには、新しいプロジェクトのファイルとフォルダーが表示されます

[ソリューション エクスプローラー]

[Azure App Service のアクティビティ] ウィンドウでは、Azure に App Service リソースが作成されたことが示されます。 ここでリンクをクリックすると、新しいプロジェクトの発行をすぐに開始できます。 ただし後ほど、このチュートリアルでは、いつでもファイルを発行できる方法を説明します。

[Azure App Service アクティビティ] ウィンドウで作成された Web アプリ

[Cloud Explorer] ウィンドウでは、作成したばかりの新しい Web アプリも含めて、Azure のリソースを表示したり管理したりできます。

Cloud Explorer で作成された Web アプリ

Azure への Web プロジェクトのデプロイ

このセクションでは、Azure App Service で作成した Web アプリのリソースに Web プロジェクトをデプロイします。

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

    Visual Studio メニューの [発行場所の選択]

    数秒で、 Web の発行 ウィザードが表示されます。 このウィザードは、新しい Web アプリに Web プロジェクトをデプロイするための設定が含まれる 発行プロファイル に対して開かれます。

    ヒント

    発行プロファイルにはデプロイ用のユーザー名とパスワードが含まれています。 これらの資格情報は自動的に生成されているので、入力の必要はありません。 パスワードは、 Properties\PublishProfiles フォルダー内のユーザー固有の隠しファイルで暗号化されています。

  2. Web の発行ウィザードの [接続] タブで、[次へ] をクリックします。

    Web の発行ウィザードの [接続] タブで [次へ] をクリック

    次は [設定] タブです。 ここで、ビルド構成を変更して、デバッグ ビルドをデプロイするように設定すると、 リモート デバッグができるようになります。 このタブには他にもいくつかの ファイル発行オプションがあります。

  3. [設定] タブの [次へ] をクリックします。

    Web の発行ウィザードの [設定] タブ

    次は [プレビュー] タブです。 ここで、どのファイルがプロジェクトから API アプリにコピーされるかを確認できます。 既にデプロイ済みの API アプリにプロジェクトをデプロイした場合は、変更されたファイルだけがコピーされます。 コピーされるファイルの一覧を確認するには、 [プレビューの開始] ボタンをクリックしてください。

  4. [プレビュー] タブで、[発行] をクリックします。

    Web の発行ウィザードの [プレビュー] タブ

    [発行]をクリックすると、Visual Studio で Azure サーバーにファイルをコピーする処理が開始されます。 これには&1; ~&2; 分ほどかかることがあります。

    [出力] ウィンドウと [Azure App Service アクティビティ] ウィンドウでは、実行されたデプロイ操作が表示され、デプロイが問題なく完了したことが報告されます。

    デプロイが正常に完了したことを示す Visual Studio の出力ウィンドウ

    デプロイが成功すると、自動的に既定のブラウザーが開き、デプロイ先の Web アプリの URL にアクセスします。これで、作成したアプリケーションはクラウドで実行されています。 ブラウザー アドレス バーの URL は、インターネットから読み込まれた Web アプリを示します。

    Azure で実行されている Web アプリ

    ヒント

    [Web の&1; クリック発行] ツール バーを有効にすると、簡単にデプロイできるようになります。 [表示]、[ツール バー] の順にクリックし、[Web の&1; クリック発行] を選択します。 このツール バーを使用すると、プロファイルを選択できるほか、ボタンをクリックして発行したり、ボタンをクリックして Web の発行 ウィザードを開いたりできます。 [Web の&1; クリック発行] ツール バー

トラブルシューティング

このチュートリアルの手順を行う際に問題が発生した場合は、必ず最新バージョンの Azure SDK for .NET を使用するようにしてください。 そのための最も簡単な方法は、 Azure SDK for Visual Studio 2015 をダウンロードすることです。 最新バージョンをインストール済みの場合は、Web Platform Installer によってインストールが不要であることが示されます。

企業ネットワークを使用しており、ファイアウォールを介して Azure App Service にデプロイしようとしている場合は、Web デプロイのためにポート 443 と 8172 を開いてください。 これらのポートを開くことができない場合は、次の「次のステップ」セクションで、その他のデプロイ オプションについて確認してください。

ASP.NET Web アプリが Azure App Service で動作するようになったら、トラブルシューティングを容易にする Visual Studio の機能についてさらに学習できます。 ログ記録、リモート デバッグなどの詳細については、Visual Studio での Azure Web アプリのトラブルシューティングに関する記事を参照してください。

次のステップ

このチュートリアルでは、Azure の Web アプリに単純な Web アプリケーションを作成してデプロイする方法について説明しました。 次に示すのは、Azure App Service についてさらに学習するための関連トピックとリソースです。