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

Important

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

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

App Service のデプロイに関する問題のトラブルシューティングについては、 Azure App Service と IIS での ASP.NET Core のトラブルシューティングに関するページを参照してください。

セットアップ

お持ちでない場合は、 無料の Azure アカウント を開きます。

Web アプリを作成する

Visual Studio 2022 を起動し、[ 新しいプロジェクトの作成] を選択します。

[新しいプロジェクトの作成] ダイアログで、 [ASP.NET Core Web アプリ] 、 [次へ] の順に選択します。

[ 新しいプロジェクトの構成 ] ダイアログで、プロジェクトに名前を付け、[ 次へ] を選択します。

[追加情報] ダイアログで、次の 手順 を実行します。

• フレームワークの入力で、[.NET 7.0 (Standard Term Support)]\(.NET 7.0 (標準用語サポート)\) を選択します。
• 認証の 種類 の入力で、[ 個々のアカウント] を選択し、[ 作成] を選択します。

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

アプリを実行する

• F5 キーを押してプロジェクトを実行します。

ユーザーを登録する

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

  "要求の処理中にデータベース操作が失敗しました。 既存の移行を適用すると、この問題が解決する可能性があります。

• [ 移行の適用] を選択し、ページが更新されたらページを更新します。

• 登録確認ページが表示されます。 [ ここをクリック] を選択してアカウントを確認します。
• [ 電子メールの確認 ] ページが表示されます。
• 新しいユーザーとしてログインします。

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

• ブラウザーを閉じてアプリケーションを停止するか、Visual Studio で [デバッグ>ストップ デバッグ] を選択します。
• Visual Studio で [ ビルド>Clean Solution ] を選択して、プロジェクト項目をクリーンアップし、ファイルの競合を回避します。

Azure にアプリケーションをデプロイする

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

[発行] ダイアログで、次の手順を実行します。

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

[発行] ダイアログで、次の手順を実行します。

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

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

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

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

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

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

発行プロファイルの作成の進行状況ダイアログでは、発行プロファイルが作成されたことを確認します。 を選択してを閉じます。

次に、 発行プロファイルの概要 ページが表示されます。 Visual Studio では、このアプリケーションに [サービスの依存関係] ウィンドウに表示されている SQL Server データベースが必要であることを検出しました。 省略記号 (...) を選択し、[ 接続] を選択します。

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

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

[ Azure SQL データベースへの接続 ] ダイアログで、[ 新規作成] を選択します。

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

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

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

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

[ Azure SQL Database への接続 ] ダイアログの次の手順で、次の手順を実行します。

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

[依存関係の構成の進行状況] ダイアログで、Azure SQL Database が構成されていることを確認します。 を選択してを閉じます。

[プロファイルの発行] 概要ページで、[その他のアクション] を選択>編集:

発行 ダイアログの 設定 タブで、

• データベースを展開し、実行時にこの接続文字列を使用にチェックを入れます。

• [Entity Framework Migrations]\(Entity Framework の移行\) を展開し、[発行時にこの移行を適用する] を選択します。

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

[公開] をクリックします。 Visual Studio によってアプリが Azure に発行されます。 デプロイが完了したとき。

アプリはブラウザーで開かれます。 新しいユーザーを登録し、新しいユーザーとしてログインして、データベースのデプロイと実行時の接続を検証します。

アプリを更新する

• Pages/Index.cshtml Razor ページを編集し、その内容を変更してから、変更を保存します。 たとえば、段落を "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>
  

• 発行プロファイルの概要ページで、もう一度発行を選択してください。

• アプリが発行されたら、ページを更新し、行った変更が Azure で使用可能であることを確認します。

クリーンアップ

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

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

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

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

その他のリソース

• Azure App Service
• Azure リソース グループ
• Azure SQL データベース
• ASP.NET Core アプリを配置するための Visual Studio 発行プロファイル (.pubxml)
• Azure App Service および IIS での ASP.NET Core のトラブルシューティング