Visual Studio を使用して Azure に ASP.NET Core アプリを発行する

作成者: Rick Anderson

重要

Azure App Service と ASP.NET Core のプレビュー リリース

ASP.NET Core のプレビュー リリースは、既定では Azure App Service に展開されません。 ASP.NET Core プレビュー リリースを使用するアプリをホストするには、「Azure App Service に ASP.NET Core プレビュー リリースを展開する」を参照してください。

macOS で作業している場合は、「Visual Studio for Mac を使用して Azure App Service に Web アプリを発行する」を参照してください。

App Service デプロイの問題のトラブルシューティングを行うには、「Azure App Service および IIS での ASP.NET Core のトラブルシューティング」を参照してください。

設定

Web アプリの作成

Visual Studio のスタート ページで、 [ファイル]>[新規作成]>[プロジェクト] の順に選択します。

File menu

[新しいプロジェクト] ダイアログで次のように設定します。

  • [ASP.NET Core Web アプリケーション] を選択します。
  • [次へ] を選択します。

New Project dialog

[新しい ASP.NET Core Web アプリケーション] ダイアログで次の手順を実行します。

  • [Web アプリケーション] を選択します。
  • [認証] で [変更] を選択します。

New ASP.NET Core Web dialog

[認証の変更] ダイアログが表示されます。

  • [個人のユーザー アカウント] を選択します。
  • [OK] を選択して [新しい ASP.NET Core Web アプリケーション] に戻り、 [作成] を選択します。

New ASP.NET Core Web authentication dialog

Visual Studio によってソリューションが作成されます。

アプリを実行する

  • Ctrl キーを押しながら F5 キーを押してプロジェクトを実行します。
  • Privacy リンクをテストします。

Web application open in Microsoft Edge on localhost

ユーザーを登録する

  • [登録] を選択して、新しいユーザーを登録します。 架空の電子メール アドレスを使用できます。 送信すると、ページに次のエラーが表示されます。

    "A database operation failed while processing the request. Applying existing migrations for Application DB context may resolve this issue." (要求の処理中にデータベースの操作に失敗しました。アプリケーション DB コンテキストの既存の移行を適用すると、この問題が解決する場合があります。)

  • [Apply Migrations]/(移行を適用する/) を選択し、移行が完了したら、ページを更新します。

A database operation failed while processing the request. Applying existing migrations for Application DB context may resolve this issue.

アプリに、新しいユーザーの登録に使用した電子メールと [ログアウト] リンクが表示されます。

Web application open in Microsoft Edge. The Register link is replaced by the text Hello user1@example.com!

Azure にアプリを配置する

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

Contextual menu open with Publish link highlighted

[発行] ダイアログで、次の操作を行います。

  • [Azure] を選択します。
  • [次へ] を選択します。

Publish dialog

[発行] ダイアログで、次の操作を行います。

  • [Azure App Service (Linux)] を選択します。
  • [次へ] を選択します。

Publish Dialog: select Azure Service

[発行] ダイアログで、 [新しい Azure App Service の作成] を選択します。

Publish dialog: select Azure Service instance

[App Service の作成] ダイアログが表示されます。

  • [アプリ名][リソース グループ][App Service プラン] の各入力フィールドに値が設定されます。 これらの名前を保持することも、変更することもできます。
  • [作成] を選択します。

Create App Service dialog

作成が完了すると、ダイアログが自動的に閉じられ、 [発行] ダイアログに再度フォーカスが移ります。

  • 作成したばかりの新しいインスタンスが自動的に選択されます。
  • [完了] を選択します。

Publish dialog: select App Service instance

次に、発行プロファイルの概要ページが表示されます。 Visual Studio によって、このアプリケーションには SQL Server データベースが必要であることが検出されているため、構成するように求められています。 [構成] をクリックします。

Publish Profile summary page: configure SQL Server dependency

[依存関係の構成] ダイアログが表示されます。

  • [Azure SQL Database] を選択します。
  • [次へ] を選択します。

Configure SQL Server Dependency dialog

[Azure SQL Database の構成] ダイアログで [SQL Database の作成] を選択します。

Select Create a SQL DB

Azure SQL Database の作成が表示されます。

  • [データベース名][リソース グループ][データベース サーバー][App Service プラン] の各入力フィールドに値が設定されます。 これらの値を保持することも、変更することもできます。
  • 選択した [データベース サーバー][データベース管理者のユーザー名][データベース管理者のパスワード] を入力します (注: 使用するアカウントには、新しい Azure SQL データベースを作成するために必要なアクセス許可が必要です)。
  • [作成] を選択します。

New Azure SQL Database dialog

作成が完了すると、ダイアログが自動的に閉じられ、 [Azure SQL Database の構成] ダイアログに再度フォーカスが移ります。

  • 作成したばかりの新しいインスタンスが自動的に選択されます。
  • [次へ] を選択します。

Select Next

[Azure SQL Database の構成] ダイアログの次の手順で、以下を実行します。

  • [データベース接続のユーザー名][データベース管理者のパスワード] フィールドを入力します。 これらは、アプリケーションが実行時にデータベースに接続するために使用する詳細です。 ベスト プラクティスとして、前の手順で使用した管理者ユーザー名およびパスワードと同じ詳細を使用しないようにします。
  • [完了] を選択します。

Configure Azure SQL Database dialog, connection string details

発行プロファイルの概要ページで [設定] を選択します。

Publish profile summary page: edit settings

[発行] ダイアログの [設定] ページで次の手順を実行します。

  • [データベース] を展開し、 [この接続文字列を実行時に使用する] をオンにします。

  • [Entity Framework の移行] を展開し、 [発行時にこの移行を適用する] をオンにします。

  • [保存] を選択します。 Visual Studio が [発行] ダイアログに戻ります。

Publish dialog: Settings panel:Save

[発行] をクリックします。 Visual Studio が Azure にアプリを発行します。 デプロイが完了すると、ブラウザーでアプリが開きます。

Last step

アプリの更新

  • Pages/Index.cshtmlRazor ページを編集し、その内容を変更します。 たとえば、"Hello ASP.NET Core!" と表示されるように段落を修正できます。

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <p>Hello ASP.NET Core!</p>
    </div>
    
  • 発行プロファイルの概要ページから [発行] を選択します。

Publish profile summary page

  • アプリが発行されたら、Azure に変更内容が反映されていることを確認します。

Verify task is complete

クリーンアップ

アプリのテストが完了したら、Azure Portal に移動し、アプリを削除します。

  • [リソース グループ] を選択し、作成したリソース グループを選択します。

Azure Portal: Resource Groups in sidebar menu

  • [リソース グループ] ページで、 [削除] を選択します。

Azure Portal: Resource Groups page

  • リソース グループ名を入力し、 [削除] を選択します。 このチュートリアルで作成されたアプリとその他すべてのリソースが Azure から削除されます。

その他の技術情報