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

  • [アーティクル]

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

アプリの発行

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

Note

Server プロジェクトからホステッド Blazor WebAssemblyソリューションを発行します。

  1. [ビルド]>[Publish {APPLICATION}]({アプリケーション} を発行する) を選択します。
  2. [publish target](発行先) を選択します。 ローカルに発行するには、 [フォルダー] を選択します。
  3. [フォルダーの選択] フィールド内で既定の場所を受け入れるか、または別の場所を指定します。 Publish ボタンを選択します。

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

発行場所:

  • Blazor WebAssembly
    • スタンドアロン: アプリは /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発行されます。 アプリを静的サイトとして展開するには、wwwroot フォルダーの内容を静的サイトのホストにコピーします。
    • ホストされている: クライアント Blazor WebAssembly アプリは、サーバー アプリの他の静的な Web アセットと共に、サーバー アプリの /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発行されます。 publish フォルダーの内容をホストに展開します。
  • Blazor Server:アプリは /bin/Release/{TARGET FRAMEWORK}/publish フォルダーに発行されます。 publish フォルダーの内容をホストに展開します。

フォルダー内のアセットは、Web サーバーに展開されます。 展開のプロセスが手動であるか自動であるかは、ご使用の展開ツールによって異なります。

IIS アプリケーション プール

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

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

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

アプリのベース パス

アプリのベース パスとは、アプリのルート URL パスのことです。 次の ASP.NET Core アプリと Blazor サブアプリについて考えてみましょう。

  • ASP.NET Core アプリは MyApp と命名します。
    • このアプリは、物理的に d:/MyApp に存在します。
    • 要求は、https://www.contoso.com/{MYAPP RESOURCE} で受信されます。
  • CoolApp という名前の Blazor アプリは MyApp のサブアプリです。
    • このサブアプリは、物理的に d:/MyApp/CoolApp に存在します。
    • 要求は、https://www.contoso.com/CoolApp/{COOLAPP RESOURCE} で受信されます。

CoolApp に対して構成を追加指定しない場合、このシナリオではサブ アプリにはそれがサーバー上のどこの場所にあるかわかりません。 たとえば、相対 URL パス /CoolApp/ にあることがわからない場合、アプリはそのリソースに対する正しい相対 URL を作成できません。 このシナリオは、アプリがルート URL パスでホストされていない場合、さまざまなホスティングおよびリバース プロキシのシナリオでも適用されます。

Blazor アプリのベース パスである https://www.contoso.com/CoolApp/ に構成を指定するには、相対ルート パスを設定します。

アプリの相対 URL を構成することにより、ルート ディレクトリに存在しないコンポーネントでアプリのルート パスへの相対 URL を構築できます。 ディレクトリ構造の別のレベルに存在するコンポーネントが、アプリ内のさまざまな場所にある他のリソースに対するリンクを構築できます。 アプリのベース パスは、リンクの href ターゲットがアプリのベース パス URI 空間内にある、選択されたハイパーリンクの阻止にも使用されます。 内部のナビゲーションは、Blazor ルーターによって処理されます。

多くのホスティング シナリオでは、アプリへの相対 URL パスは、アプリのルートです。 これらの既定のケースでは、アプリの相対 URL のベース パスは次のようになります。

  • Blazor WebAssembly: / は wwwroot/index.html で <base href="/" /> として構成されます。
  • Blazor Server: ~/ は Pages/_Layout.cshtml で <base href="~/" /> として構成されます。

GitHub ページと IIS サブアプリなど、その他のホスティング シナリオの場合、アプリのベースパスは、アプリへのサーバーの相対 URL パスに設定する必要があります。

  • スタンドアロン Blazor WebAssembly:

    wwwroot/index.html:

    <base href="/CoolApp/">

    末尾にスラッシュが必要です。

  • ホステッド Blazor WebAssembly:

    Client プロジェクトの wwwroot/index.html:

    <base href="/CoolApp/">

    末尾にスラッシュが必要です。

    Server プロジェクトでは、要求処理パイプライン (Program.cs) の "早い段階" で UsePathBase を呼び出して、要求パスと対話する以降のミドルウェアのベース パスを構成します。

    app.UsePathBase("/CoolApp");
// ...
app.UseRouting();

  • Blazor Server アプリでは、次の "いずれか" の方法を使用します。

    • オプション 1: Pages/_Layout.cshtml に <base> タグを使用して、アプリのベース パスを設定する。

      <base href="/CoolApp/">

      末尾にスラッシュが必要です。

    • オプション 2: 要求処理パイプライン (Program.cs) の "早い段階" で UsePathBase を呼び出して、要求パスと対話する以降のミドルウェアのベース パスを構成します。

      app.UsePathBase("/CoolApp");
// ...
app.UseRouting();

      UsePathBase の呼び出しは、Blazor Server アプリをローカル環境でも実行したい場合に推奨されます。 たとえば、Properties/launchSettings.json に起動 URL を指定します。

      "launchUrl": "https://localhost:{PORT}/CoolApp",

      前の例の {PORT} プレース ホルダーは、applicationUrl 構成パス内のセキュリティで保護されたポートと一致するポートです。 次の例では、ポート 7279 におけるアプリの完全起動プロファイルを示しています。

      "BlazorSample": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "applicationUrl": "https://localhost:7279;http://localhost:5279",
  "launchUrl": "https://localhost:7279/CoolApp",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
}

Note

WebApplication を使用する場合 (ASP.NET Core 5.0 から 6.0 への移行に関する記事を参照) は、UsePathBase の後に app.UseRouting を呼び出して、ルーティング ミドルウェアがルートを照合する前に変更されたパスを確認できるようにする必要があります。 そうしない場合、ミドルウェアの順序とルーティングに関する記事で説明されているように、ルートはパスが書き直される前に UsePathBase によって照合されます。

アプリ全体のリンクの先頭にフォワード スラッシュを付けないでください。 パス セグメント区切り記号を使わないか、ドットスラッシュ (./) による相対パス表記を使ってください。

  • ❌ 正しくない: <a href="/account">
  • ✔️ 正しい: <a href="account">
  • ✔️ 正しい: <a href="./account">

HttpClient サービスを使用する Blazor WebAssembly Web API 要求では、JSON ヘルパー (HttpClientJsonExtensions) によって URL の先頭にフォワード スラッシュ (/) が付けられて "いない" ことを確認します。

  • ❌ 正しくない: var rsp = await client.GetFromJsonAsync("/api/Account");
  • ✔️ 正しい: var rsp = await client.GetFromJsonAsync("api/Account");

Navigation Manager の相対リンクの先頭にフォワード スラッシュを付けないでください。 パス セグメント区切り記号を使わないか、ドットスラッシュ (./) による相対パス表記を使ってください。

  • ❌ 正しくない: NavigationManager.NavigateTo("/other");
  • ✔️ 正しい: NavigationManager.NavigateTo("other");
  • ✔️ 正しい: NavigationManager.NavigateTo("./other");

Azure または IIS ホスティングの一般的な構成では、通常、追加の構成は必要ありません。 IIS 以外のホスティングおよびリバース プロキシ ホスティングの一部のシナリオでは、静的ファイルを正しく処理するために追加の静的ファイル ミドルウェア構成が必要になる場合があります (例: app.UseStaticFiles("/CoolApp");)。 必要とされる構成では、Blazor スクリプト (_framework/blazor.server.js または _framework/blazor.webassembly.js) を処理するために、さらに構成を行うことが必要になる場合があります。 詳しくは、「ASP.NET Core Blazor の静的ファイル」をご覧ください。

ルート以外の相対 URL パスが構成されている Blazor WebAssembly アプリの場合 (例: <base href="/CoolApp/">)、そのアプリは "ローカルで実行されると" 自身のリソースを見つけることができません。 ローカルでの開発およびテスト中は、実行時の <base> タグの href 値と一致するパス ベース引数を指定することで、この問題を克服することができます。 末尾にはスラッシュを含めないでください。 アプリをローカルで実行しているときにパス ベースの引数を渡すには、アプリのディレクトリから --pathbase オプションを指定して dotnet run コマンドを実行します。

dotnet run --pathbase=/{RELATIVE URL PATH (no trailing slash)}

相対 URL パスが /CoolApp/ (<base href="/CoolApp/">) の Blazor WebAssembly アプリについては、このコマンドは次のようになります。

dotnet run --pathbase=/CoolApp

Blazor WebAssembly アプリは、http://localhost:port/CoolApp でローカルに応答します。

Blazor ServerMapFallbackToPage の構成

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

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

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

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

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

    ...
app.UseRouting();

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

app.Run();

複数の Blazor WebAssembly アプリをホストする

ホストされた Blazorソリューションで複数の Blazor WebAssembly アプリをホストする方法について詳しくは、ASP.NET Core Blazor WebAssembly のホストと展開に関する記事をご覧ください。

配置

展開のガイダンスについては、次のトピックを参照してください。

アプリの発行

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

  1. [ビルド]>[Publish {APPLICATION}]({アプリケーション} を発行する) を選択します。
  2. [publish target](発行先) を選択します。 ローカルに発行するには、 [フォルダー] を選択します。
  3. [フォルダーの選択] フィールド内で既定の場所を受け入れるか、または別の場所を指定します。 Publish ボタンを選択します。

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

発行場所:

  • Blazor WebAssembly
    • スタンドアロン: アプリは /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発行されます。 アプリを静的サイトとして展開するには、wwwroot フォルダーの内容を静的サイトのホストにコピーします。
    • ホストされている: クライアント Blazor WebAssembly アプリは、サーバー アプリの他の静的な Web アセットと共に、サーバー アプリの /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発行されます。 publish フォルダーの内容をホストに展開します。
  • Blazor Server:アプリは /bin/Release/{TARGET FRAMEWORK}/publish フォルダーに発行されます。 publish フォルダーの内容をホストに展開します。

フォルダー内のアセットは、Web サーバーに展開されます。 展開のプロセスが手動であるか自動であるかは、ご使用の展開ツールによって異なります。

IIS アプリケーション プール

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

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

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

アプリのベース パス

アプリのベース パスとは、アプリのルート URL パスのことです。 次の ASP.NET Core アプリと Blazor サブアプリについて考えてみましょう。

  • ASP.NET Core アプリは MyApp と命名します。
    • このアプリは、物理的に d:/MyApp に存在します。
    • 要求は、https://www.contoso.com/{MYAPP RESOURCE} で受信されます。
  • CoolApp という名前の Blazor アプリは MyApp のサブアプリです。
    • このサブアプリは、物理的に d:/MyApp/CoolApp に存在します。
    • 要求は、https://www.contoso.com/CoolApp/{COOLAPP RESOURCE} で受信されます。

CoolApp に対して構成を追加指定しない場合、このシナリオではサブ アプリにはそれがサーバー上のどこの場所にあるかわかりません。 たとえば、相対 URL パス /CoolApp/ にあることがわからない場合、アプリはそのリソースに対する正しい相対 URL を作成できません。 このシナリオは、アプリがルート URL パスでホストされていない場合、さまざまなホスティングおよびリバース プロキシのシナリオでも適用されます。

Blazor アプリのベース パスである https://www.contoso.com/CoolApp/ に構成を指定するには、相対ルート パスを設定します。

アプリの相対 URL を構成することにより、ルート ディレクトリに存在しないコンポーネントでアプリのルート パスへの相対 URL を構築できます。 ディレクトリ構造の別のレベルに存在するコンポーネントが、アプリ内のさまざまな場所にある他のリソースに対するリンクを構築できます。 アプリのベース パスは、リンクの href ターゲットがアプリのベース パス URI 空間内にある、選択されたハイパーリンクの阻止にも使用されます。 内部のナビゲーションは、Blazor ルーターによって処理されます。

多くのホスティング シナリオでは、アプリへの相対 URL パスは、アプリのルートです。 これらの既定のケースでは、アプリの相対 URL のベース パスは次のようになります。

  • Blazor WebAssembly: / は wwwroot/index.html で <base href="/" /> として構成されます。
  • Blazor Server: ~/ は Pages/_Host.cshtml で <base href="~/" /> として構成されます。

GitHub ページと IIS サブアプリなど、その他のホスティング シナリオの場合、アプリのベースパスは、アプリへのサーバーの相対 URL パスに設定する必要があります。

  • スタンドアロン Blazor WebAssembly:

    wwwroot/index.html:

    <base href="/CoolApp/">

    末尾にスラッシュが必要です。

  • ホステッド Blazor WebAssembly:

    Client プロジェクトの wwwroot/index.html:

    <base href="/CoolApp/">

    末尾にスラッシュが必要です。

    Server プロジェクトでは、要求処理パイプライン (Startup.cs) の "早い段階" で UsePathBase を呼び出して、要求パスと対話する以降のミドルウェアのベース パスを構成します。

    app.UsePathBase("/CoolApp");

  • Blazor Server アプリでは、次の "いずれか" の方法を使用します。

    • オプション 1: Pages/_Host.cshtml に <base> タグを使用して、アプリのベース パスを設定する。

      <base href="/CoolApp/">

      末尾にスラッシュが必要です。

    • オプション 2: 要求処理パイプライン (Startup.cs) の "早い段階" で UsePathBase を呼び出して、要求パスと対話する以降のミドルウェアのベース パスを構成します。

      app.UsePathBase("/CoolApp");

      UsePathBase の呼び出しは、Blazor Server アプリをローカル環境でも実行したい場合に推奨されます。 たとえば、Properties/launchSettings.json に起動 URL を指定します。

      "launchUrl": "https://localhost:{PORT}/CoolApp",

      前の例の {PORT} プレース ホルダーは、applicationUrl 構成パス内のセキュリティで保護されたポートと一致するポートです。 次の例では、ポート 7279 におけるアプリの完全起動プロファイルを示しています。

      "BlazorSample": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "applicationUrl": "https://localhost:7279;http://localhost:5279",
  "launchUrl": "https://localhost:7279/CoolApp",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
}

ルート以外の相対 URL パスが構成されている Blazor WebAssembly アプリの場合 (例: <base href="/CoolApp/">)、そのアプリは "ローカルで実行されると" 自身のリソースを見つけることができません。 ローカルでの開発およびテスト中は、実行時の <base> タグの href 値と一致するパス ベース引数を指定することで、この問題を克服することができます。 末尾にはスラッシュを含めないでください。 アプリをローカルで実行しているときにパス ベースの引数を渡すには、アプリのディレクトリから --pathbase オプションを指定して dotnet run コマンドを実行します。

dotnet run --pathbase=/{RELATIVE URL PATH (no trailing slash)}

相対 URL パスが /CoolApp/ (<base href="/CoolApp/">) の Blazor WebAssembly アプリについては、このコマンドは次のようになります。

dotnet run --pathbase=/CoolApp

Blazor WebAssembly アプリは、http://localhost:port/CoolApp でローカルに応答します。

その他のサードパーティ ホストのサポート:

Blazor ServerMapFallbackToPage の構成

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

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

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

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

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

    ...
app.UseRouting();

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

app.Run();

複数の Blazor WebAssembly アプリをホストする

ホストされた Blazorソリューションで複数の Blazor WebAssembly アプリをホストする方法について詳しくは、ASP.NET Core Blazor WebAssembly のホストと展開に関する記事をご覧ください。

配置

展開のガイダンスについては、次のトピックを参照してください。

アプリの発行

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

  1. [ビルド]>[Publish {APPLICATION}]({アプリケーション} を発行する) を選択します。
  2. [publish target](発行先) を選択します。 ローカルに発行するには、 [フォルダー] を選択します。
  3. [フォルダーの選択] フィールド内で既定の場所を受け入れるか、または別の場所を指定します。 Publish ボタンを選択します。

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

発行場所:

  • Blazor WebAssembly
    • スタンドアロン: アプリは /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発行されます。 アプリを静的サイトとして展開するには、wwwroot フォルダーの内容を静的サイトのホストにコピーします。
    • ホストされている: クライアント Blazor WebAssembly アプリは、サーバー アプリの他の静的な Web アセットと共に、サーバー アプリの /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot フォルダーに発行されます。 publish フォルダーの内容をホストに展開します。
  • Blazor Server:アプリは /bin/Release/{TARGET FRAMEWORK}/publish フォルダーに発行されます。 publish フォルダーの内容をホストに展開します。

フォルダー内のアセットは、Web サーバーに展開されます。 展開のプロセスが手動であるか自動であるかは、ご使用の展開ツールによって異なります。

IIS アプリケーション プール

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

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

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

アプリのベース パス

アプリのベース パスとは、アプリのルート URL パスのことです。 次の ASP.NET Core アプリと Blazor サブアプリについて考えてみましょう。

  • ASP.NET Core アプリは MyApp と命名します。
    • このアプリは、物理的に d:/MyApp に存在します。
    • 要求は、https://www.contoso.com/{MYAPP RESOURCE} で受信されます。
  • CoolApp という名前の Blazor アプリは MyApp のサブアプリです。
    • このサブアプリは、物理的に d:/MyApp/CoolApp に存在します。
    • 要求は、https://www.contoso.com/CoolApp/{COOLAPP RESOURCE} で受信されます。

CoolApp に対して構成を追加指定しない場合、このシナリオではサブ アプリにはそれがサーバー上のどこの場所にあるかわかりません。 たとえば、相対 URL パス /CoolApp/ にあることがわからない場合、アプリはそのリソースに対する正しい相対 URL を作成できません。 このシナリオは、アプリがルート URL パスでホストされていない場合、さまざまなホスティングおよびリバース プロキシのシナリオでも適用されます。

Blazor アプリのベース パスである https://www.contoso.com/CoolApp/ に構成を指定するには、相対ルート パスを設定します。

アプリの相対 URL を構成することにより、ルート ディレクトリに存在しないコンポーネントでアプリのルート パスへの相対 URL を構築できます。 ディレクトリ構造の別のレベルに存在するコンポーネントが、アプリ内のさまざまな場所にある他のリソースに対するリンクを構築できます。 アプリのベース パスは、リンクの href ターゲットがアプリのベース パス URI 空間内にある、選択されたハイパーリンクの阻止にも使用されます。 内部のナビゲーションは、Blazor ルーターによって処理されます。

多くのホスティング シナリオでは、アプリへの相対 URL パスは、アプリのルートです。 これらの既定のケースでは、アプリの相対 URL のベース パスは次のようになります。

  • Blazor WebAssembly: / は wwwroot/index.html で <base href="/" /> として構成されます。
  • Blazor Server: ~/ は Pages/_Host.cshtml で <base href="~/" /> として構成されます。

GitHub ページと IIS サブアプリなど、その他のホスティング シナリオの場合、アプリのベースパスは、アプリへのサーバーの相対 URL パスに設定する必要があります。

  • スタンドアロン Blazor WebAssembly:

    wwwroot/index.html:

    <base href="/CoolApp/">

    末尾にスラッシュが必要です。

  • ホステッド Blazor WebAssembly:

    Client プロジェクトの wwwroot/index.html:

    <base href="/CoolApp/">

    末尾にスラッシュが必要です。

    Server プロジェクトでは、要求処理パイプライン (Startup.cs) の "早い段階" で UsePathBase を呼び出して、要求パスと対話する以降のミドルウェアのベース パスを構成します。

    app.UsePathBase("/CoolApp");

  • Blazor Server アプリでは、次の "いずれか" の方法を使用します。

    • オプション 1: Pages/_Host.cshtml に <base> タグを使用して、アプリのベース パスを設定する。

      <base href="/CoolApp/">

      末尾にスラッシュが必要です。

    • オプション 2: 要求処理パイプライン (Startup.cs) の "早い段階" で UsePathBase を呼び出して、要求パスと対話する以降のミドルウェアのベース パスを構成します。

      app.UsePathBase("/CoolApp");

      UsePathBase の呼び出しは、Blazor Server アプリをローカル環境でも実行したい場合に推奨されます。 たとえば、Properties/launchSettings.json に起動 URL を指定します。

      "launchUrl": "https://localhost:{PORT}/CoolApp",

      前の例の {PORT} プレース ホルダーは、applicationUrl 構成パス内のセキュリティで保護されたポートと一致するポートです。 次の例では、ポート 7279 におけるアプリの完全起動プロファイルを示しています。

      "BlazorSample": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": true,
  "applicationUrl": "https://localhost:7279;http://localhost:5279",
  "launchUrl": "https://localhost:7279/CoolApp",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
}

ルート以外の相対 URL パスが構成されている Blazor WebAssembly アプリの場合 (例: <base href="/CoolApp/">)、そのアプリは "ローカルで実行されると" 自身のリソースを見つけることができません。 ローカルでの開発およびテスト中は、実行時の <base> タグの href 値と一致するパス ベース引数を指定することで、この問題を克服することができます。 末尾にはスラッシュを含めないでください。 アプリをローカルで実行しているときにパス ベースの引数を渡すには、アプリのディレクトリから --pathbase オプションを指定して dotnet run コマンドを実行します。

dotnet run --pathbase=/{RELATIVE URL PATH (no trailing slash)}

相対 URL パスが /CoolApp/ (<base href="/CoolApp/">) の Blazor WebAssembly アプリについては、このコマンドは次のようになります。

dotnet run --pathbase=/CoolApp

Blazor WebAssembly アプリは、http://localhost:port/CoolApp でローカルに応答します。

その他のサードパーティ ホストのサポート:

Blazor ServerMapFallbackToPage の構成

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

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

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

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

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

    ...
app.UseRouting();

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

app.Run();

複数の Blazor WebAssembly アプリをホストする

ホストされた Blazorソリューションで複数の Blazor WebAssembly アプリをホストする方法について詳しくは、ASP.NET Core Blazor WebAssembly のホストと展開に関する記事をご覧ください。

配置

展開のガイダンスについては、次のトピックを参照してください。