ASP.NET Core Blazor のホストと展開

この記事では、Blazor アプリをホストおよび展開する方法について説明します。

アプリの発行

アプリは、リリース構成での展開のために発行されます。

Visual Studio

1. [ビルド] メニューから 「{APPLICATION} を発行する] コマンドを選択します。{APPLICATION} プレースホルダーはアプリの名前です。
2. [publish target]\(発行先\) を選択します。 ローカルに発行するには、[フォルダー] を選択します。 [次へ] を選択します。
3. ローカルで発行する場合は、既定のフォルダーの場所をそのまま使用するか、別の場所を指定します。 [完了] を選択してプロファイルを保存します。 を選択してを閉じます。
4. アプリを発行する前にターゲットの発行フォルダーを消去するには、[ すべての設定を表示] を選択します。 [ 設定]>[ファイルの発行オプション]>発行する前にすべての既存のファイルを削除するを選択します。 保存 を選択します。
5. 公開ボタンを選択します。

Visual Studio Code と .NET CLI

プロジェクトのルート ディレクトリに対してコマンド シェルを開きます。

dotnet publish コマンドを使用してアプリを発行します。

dotnet publish

.NET 8 より前のバージョンでは、既定の発行構成は Debug。 .NET 7 以前を対象とするアプリを発行する場合は、 -c|--configuration オプションを "Release" でコマンドに渡して、 Release 構成で発行します。

dotnet publish -c Release

アプリを発行すると、プロジェクトの依存関係の復元がトリガーされ、展開されるアセットを作成する前にプロジェクトがビルドされます。 ビルド プロセスの一環として、アプリのダウンロード サイズを縮小し読み込み時間を短縮するため、未使用のメソッドおよびアセンブリが削除されます。

ターゲットの発行フォルダーを空にする

コマンド シェルで dotnet publish コマンドを使用してアプリを発行すると、プロジェクトの現在の状態に基づいて配置に必要なファイルが生成され、指定された出力フォルダーにファイルが配置されます。 このコマンドは、アプリを発行する前にターゲット フォルダーを自動的にクリーンアップしません。

アプリが発行される前にターゲット フォルダーを自動的に空にするには、ルート .csproj要素の下にあるアプリのプロジェクト ファイル (<Project>) に次の MSBuild ターゲットを追加します。

<Target Name="_RemovePublishDirBeforePublishing" BeforeTargets="BeforePublish">
  <RemoveDir Directories="$(PublishDir)" Condition="'$(PublishDir)' != ''" />
</Target>

既定の発行場所

• Blazor Web App: アプリが、/bin/Release/{TARGET FRAMEWORK}/publish フォルダに公開されます。ここでは、 {TARGET FRAMEWORK} プレースホルダーはターゲット フレームワークです。 publish フォルダーの内容をホストに展開します。
• スタンドアロン Blazor WebAssembly: アプリは、 bin/Release/{TARGET FRAMEWORK}/publish フォルダーまたは bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish フォルダーに発行されます。 アプリを静的サイトとして展開するには、wwwroot フォルダーの内容を静的サイトのホストにコピーします。

IIS

IIS で Blazor アプリをホストするには、次のリソースを参照してください。

• IIS のホスティング
  • IIS に ASP.NET Core アプリを発行する
  • IIS を使用した Windows での ASP.NET Core のホスト
• Blazorします。IIS で実行される アプリ (.NET 8 以降) と Blazor Web App アプリ (.NET 7 以前)、Azure Virtual Machines (VM) で稼働する Windows OS と Azure App Service を含む IIS を含む。
• IIS を使用して ASP.NET Core Blazor WebAssemblyをホストおよび展開する: スタンドアロン Blazor WebAssembly アプリ (すべての .NET リリース) とホストされているBlazor WebAssembly アプリ (.NET 7 以前)。
• IIS サブアプリケーションのホスト
  • アプリを発行する前に、 アプリの基本パスのガイダンス に従ってください。 この例では、アプリのベース パス /CoolApp を使い、アプリ設定または他の構成プロバイダーからベース パスを取得する方法を示します。
  • 「高度な構成」にあるサブアプリケーションの構成に関するガイダンスに従ってください。 ルート サイトの下にあるサブアプリのフォルダー パスがサブアプリの仮想パスになります。 /CoolApp のアプリ ベース パスの場合、Blazor アプリはルート サイトの下の CoolApp という名前のフォルダーに配置され、サブアプリは /CoolApp の仮想パスを使用します。

Blazor アプリを含め、ASP.NET Core アプリ間のアプリ プールの共有はサポートされていません。 IIS でホストする場合は、アプリごとに 1 つのアプリ プールを使い、複数のアプリをホストするために IIS の仮想ディレクトリを使用しないようにしてください。

JavaScript バンドルのサポート

Blazor ランタイムは、JavaScript (JS) ファイル、WebAssembly コードにコンパイルされた .NET ランタイム、および WebAssembly ファイルとしてパックされたマネージド アセンブリに依存します。 Blazor アプリがビルドされると、Blazor ランタイムは、異なるビルドの場所にあるこれらのファイルに依存します。 この制約により、Blazorのビルド出力はJS、Webpack、Rollup などのバンドルと互換性がありません。

JSに バンドルと互換性のあるビルド出力を生成するには、アプリのプロジェクト ファイルで WasmBundlerFriendlyBootConfig MSBuild プロパティをtrueに設定します。

<WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>

重要

この機能では、アプリの発行時にのみ、バンドルフレンドリ出力が生成されます。

出力はブラウザーで直接実行することはできませんが、 JS ツールで使用して、 JS ファイルを開発者が提供する残りのスクリプトとバンドルできます。

WasmBundlerFriendlyBootConfigが有効になっている場合、生成されたJSには、アプリ内のすべての資産のimport ディレクティブが含まれており、これにより、バンドルに対して依存関係が表示されます。 アセットの多くはブラウザーでは読み込みできませんが、通常は、読み込みを処理するためにファイルの種類によって資産を認識するようにバンドルを構成できます。 バンドルを構成する方法の詳細については、バンドルのドキュメントを参照してください。

注意

ビルド出力のバンドルは、 JS バンドル カスタム プラグインを使用して個々のファイルの場所にインポートをマッピングすることで可能である必要があります。 現時点では、このようなプラグインは提供していません。

注意

files プラグインをurlに置き換えると、JS WebAssembly ランタイム (Blazor でエンコードされた base64) を含むアプリのすべてのJS ファイルが出力にバンドルされます。 ファイルサイズは、filesプラグインを使用した場合よりも大幅に大きくなります（たとえば、300% 大きくなる可能性があります）。したがって、urlバンドラー処理に対してバンドラー対応の出力を生成する際に一般的な方法としてJSプラグインを使用することはお勧めしません。

次のサンプル アプリは ロールアップに基づいています。 他の JS バンドルを使用する場合にも同様の概念が適用されます。

React アプリ (Blazor WebAssembly) および .NET 10 以降用の React アプリ (BlazorWebAssemblyReact) の .NET on WebAssembly でのDotNetWebAssemblyReactのデモ サンプル アプリは、Blazor サンプル GitHub リポジトリ (dotnet/blazor-samples) で入手できます。

Blazor WebAssembly キャッシュの側面は、Blazor Web Appに適用されます

Blazor Blazor WebAssembly ノードのバンドル キャッシュと HTTP キャッシュのガイダンスでは、スタンドアロンのBlazor WebAssembly アプリに焦点を当てていますが、これらの記事のクライアント側キャッシュのいくつかの側面は、対話型 WebAssembly または対話型自動レンダリング モードを採用するBlazor Web Appにも適用されます。 クライアント側でコンテンツをレンダリングする Blazor Web App で静的アセットまたはバンドル キャッシュの問題が発生した場合は、次の記事のガイダンスを参照して問題のトラブルシューティングを行ってください。

• ASP.NET Core Blazor WebAssembly のキャッシュと整合性チェックの失敗
• ASP.NET Core Blazor アプリをアップグレードする際の HTTP キャッシングの問題を回避する

Blazor Server MapFallbackToPage 構成

"このセクションは Blazor Server アプリにのみ適用されます。 " MapFallbackToPage は、Blazor Web App および Blazor WebAssembly アプリではサポートされていません。

アプリでカスタム リソースと Razor コンポーネントを含む区分が別に必要なシナリオでは、次の操作を行います。

• アプリの Pages フォルダー内に、リソースを保持するためのフォルダーを作成します。 たとえば、アプリの管理者セクションは、Admin という名前の新しいフォルダー内に作成されます (Pages/Admin)。

• その区分のルート ページ (_Host.cshtml) を作成します。 たとえば、アプリのメイン ルート ページ (Pages/Admin/_Host.cshtml) から Pages/_Host.cshtml ファイルを作成します。 Admin @page ページには、_Host ディレクティブを指定しないでください。

• 区分のフォルダーにレイアウトを追加します (例: Pages/Admin/_Layout.razor)。 別の区分のレイアウトで、<base> タグ href を設定して、その区分のフォルダーと一致するようします (例: <base href="/Admin/" />)。 デモンストレーションの目的で、ページ内の静的リソースに ~/ を追加します。 次に例を示します。

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (サンプル アプリの名前空間は BlazorSample です)。
  • ~/_framework/blazor.server.js (Blazor スクリプト)

• 区分に独自の静的アセット フォルダーが必要な場合は、該当するフォルダーを追加し、その場所を Program.cs 内の静的ファイル ミドルウェアに指定します (例: app.UseStaticFiles("/Admin/wwwroot"))。

• Razor コンポーネントが区分のフォルダーに追加されます。 少なくとも、区分の正しい Index ディレクティブを使用して @page コンポーネントを区分フォルダーに追加します。 たとえば、アプリの既定の Pages/Admin/Index.razor のファイルに基づいて Pages/Index.razor ファイルを追加します。 ファイルの先頭にルート テンプレートとして Admin 区分を指定します (@page "/admin")。 必要に応じて追加のコンポーネントを追加します。 たとえば、Pages/Admin/Component1.razor の @page ディレクティブとルート テンプレートを使用した @page "/admin/component1。

• Program.cs では、MapFallbackToPage ページへのフォールバック ルート ページ パスの直前に、区分の要求パスに対して _Host を呼び出します。

  ...
  app.UseRouting();
  
  app.MapBlazorHub();
  app.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/Admin/_Host");
  app.MapFallbackToPage("/_Host");
  
  app.Run();