次の方法で共有

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

注意

これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。 詳細については、 .NET および .NET Core サポート ポリシーを参照してください。 現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

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

アプリの発行

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

注意

Blazor WebAssembly プロジェクトからホステッド Serverを発行します。

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

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

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

コマンド シェルで 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 フォルダーの内容を静的サイトのホストにコピーします。
  • Blazor Server: アプリが、/bin/Release/{TARGET FRAMEWORK}/publish フォルダに公開されます。ここでは、{TARGET FRAMEWORK} プレースホルダーはターゲット フレームワークです。 publish フォルダーの内容をホストに展開します。
  • Blazor WebAssembly
    • スタンドアロン: アプリは、 /bin/Release/{TARGET FRAMEWORK}/publish フォルダーまたは bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish フォルダーに発行されます。 アプリを静的サイトとして展開するには、wwwroot フォルダーの内容を静的サイトのホストにコピーします。
    • ホスト: サーバー ASP.NET Core アプリとクライアント Blazor WebAssembly アプリは、クライアント アプリの静的 Web アセットと共に、サーバー アプリの /bin/Release/{TARGET FRAMEWORK}/publish フォルダーに発行されます。 publish フォルダーの内容をホストに展開します。

IIS

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

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

"Blazor WebAssembly" のアプリ プールに対して、ASP.NET Core アプリによってホストされる 1 つ以上の Blazor WebAssembly アプリ (ホステッド ソリューションと呼ばれます) がサポートされます。 ただし、1 つのアプリ プールを複数のホステッド Blazor WebAssembly ソリューションに割り当てること、またはサブアプリのホスティング シナリオで割り当てることは推奨されず、またサポートもされません。

ソリューションの詳細については、「ASP.NET Core Blazor 用のツール」を参照してください。

JavaScript バンドルのサポート

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

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

<WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>

重要

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

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

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

注意

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

注意

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

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

デモ サンプル アプリ:

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();