ASP.NET Core Blazor の静的ファイル
注意
これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 8 バージョンを参照してください。
重要
この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。
現在のリリースについては、この記事の .NET 8 バージョンを参照してください。
この記事では、Blazor アプリで静的ファイルを提供する構成について説明します。
Blazor フレームワークの静的ファイル
.NET 8 より前のリリースでは、 Blazor スクリプトなどの Blazor フレームワークの静的ファイルは、静的ファイル ミドルウェアを介して提供されます。 .NET 8 以降では、 Blazor フレームワークの静的ファイルはエンドポイント ルーティングを使用してマップされ、静的ファイル ミドルウェアは使用されなくなりました。
静的 Web アセット プロジェクト モード
このセクションは、Blazor Web アプリの .Client
プロジェクトに適用されます。
Blazor Web アプリの .Client
プロジェクトで必要な <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
設定は、Blazor WebAssembly 静的アセットの動作を既定値に戻して、プロジェクトがホストされているプロジェクトの一部として動作するようにします。 Blazor WebAssembly SDK (Microsoft.NET.Sdk.BlazorWebAssembly
) は、ライブラリからの出力を単に消費するサーバーと "スタンドアロン" モードで連携するように、特定の方法で静的 Web アセットを構成します。 これは Blazor Web アプリには適していません。ここでは、アプリの WebAssembly 部分がホストの論理部分であり、もっとライブラリのように動作する必要があります。 たとえば、プロジェクトは styles バンドル (たとえば、BlazorSample.Client.styles.css
) を公開せず、代わりにホストに project バンドルのみを提供するため、ホストは独自の styles バンドルに組み込むことができます。
<StaticWebAssetProjectMode>
の値 (Default
) の変更や、 .Client
プロジェクトからのプロパティの削除はサポートされていません。
静的ファイル ミドルウェア
このセクションは、サーバー側の Blazor アプリに適用されます。
静的ファイル ミドルウェアを構成し、アプリの要求処理パイプラインで UseStaticFiles を呼び出して、静的資産をクライアントに提供します。 詳細については、「ASP.NET Core の静的ファイル」をご覧ください。
非 Development
環境の静的ファイル
このセクションは、サーバー側の静的ファイルに適用されます。
アプリがローカルで実行されている場合、静的 Web アセットは、Development 環境内でのみ既定で有効になります。 ローカル開発およびテスト中 (たとえば、Staging) の Development 以外の環境で静的ファイルを有効にするには Program
ファイルの WebApplicationBuilder 上の UseStaticWebAssets を呼び出します。
警告
運用環境で呼び出された場合は、ディスク上の "プロジェクト以外の別の場所" からファイルを処理するため、運用環境で機能をアクティブ化しないように、"正確な環境" の UseStaticWebAssets を呼び出します。 このセクションの例では、IsStaging を呼び出して Staging 環境を確認します。
if (builder.Environment.IsStaging())
{
builder.WebHost.UseStaticWebAssets();
}
Blazor WebAssembly 資産のプレフィックス
"このセクションは Blazor WebAssembly に適用されます。"
WebAssemblyComponentsEndpointOptions.PathPrefix エンドポイント オプションを使用して、資産のプレフィックスを示すパス文字列 Blazor WebAssembly を設定します。 パスは、参照先 Blazor WebAssembly アプリケーション プロジェクトに対応している必要があります。
endpoints.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode(options =>
options.PathPrefix = "{PATH PREFIX}");
前の例では、{PATH PREFIX}
プレースホルダーはパス プレフィックスで、スラッシュ (/
) で始まる必要があります。
次の例では、パス プレフィックス が /path-prefix
に設定されています。
endpoints.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode(options =>
options.PathPrefix = "/path-prefix");
静的な Web 資産のベース パス
このセクションは、スタンドアロンの Blazor WebAssembly アプリに適用されます。
既定では、アプリを発行すると、発行された出力のルート パス (/
) に、Blazor フレームワーク ファイル (_framework
フォルダー資産) を含むアプリの静的アセットが格納されます。 プロジェクト ファイル (.csproj
) で指定された <StaticWebAssetBasePath>
によって、ベース パスが非ルート パスに設定されます。
<PropertyGroup>
<StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>
前の例では、{PATH}
プレースホルダーがパスです。
<StaticWebAssetBasePath>
プロパティを設定しない場合、スタンドアロンのアプリは /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/
で発行されます。
前の例では、{TFM}
プレースホルダーはターゲット フレームワーク モニカー (TFM) (net6.0
など) です。
スタンドアロンの Blazor WebAssembly アプリの <StaticWebAssetBasePath>
プロパティで、発行された静的資産パスが app1
に設定されている場合、発行された出力のアプリへのルート パスは /app1
です。
スタンドアロンの Blazor WebAssembly アプリのプロジェクト ファイル (.csproj
) で、次のようにします。
<PropertyGroup>
<StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>
発行された出力では、スタンドアロンの Blazor WebAssembly アプリへのパスは /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/
です。
前の例では、{TFM}
プレースホルダーはターゲット フレームワーク モニカー (TFM) (net6.0
など) です。
このセクションは、スタンドアロンの Blazor WebAssembly アプリとホストされている Blazor WebAssembly ソリューションに適用されます。
既定では、アプリを発行すると、発行された出力のルート パス (/
) に、Blazor フレームワーク ファイル (_framework
フォルダー資産) を含むアプリの静的アセットが格納されます。 プロジェクト ファイル (.csproj
) で指定された <StaticWebAssetBasePath>
によって、ベース パスが非ルート パスに設定されます。
<PropertyGroup>
<StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>
前の例では、{PATH}
プレースホルダーがパスです。
<StaticWebAssetBasePath>
プロパティを設定しない場合、ホストされているソリューションのクライアント アプリまたはスタンドアロン アプリは、次のパスで発行されます。
- ホストされている Blazor WebAssembly ソリューションの Server プロジェクトの場合:
/BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/
- スタンドアロン Blazor WebAssembly アプリの場合:
/BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/
ホストされている Blazor WebAssembly アプリの Client プロジェクトまたはスタンドアロンの Blazor WebAssembly アプリの <StaticWebAssetBasePath>
プロパティで、発行された静的資産パスが app1
に設定されている場合、発行された出力のアプリへのルート パスは /app1
です。
Client アプリのプロジェクト ファイル (.csproj
) またはスタンドアロンの Blazor WebAssembly アプリのプロジェクト ファイル (.csproj
) の場合:
<PropertyGroup>
<StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>
発行された出力で:
- ホストされている Blazor WebAssembly ソリューションの Server プロジェクトでのクライアント アプリへのパス:
/BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/app1/
- スタンドアロン Blazor WebAssembly アプリへのパス:
/BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/
<StaticWebAssetBasePath>
プロパティは、1 つのホストされた展開で複数の Blazor WebAssembly アプリの発行済み静的資産へのパスを制御するために最も一般的に使用されます。 詳細については、「複数のホストされた ASP.NET Core Blazor WebAssembly アプリ」を参照してください。 プロパティは、スタンドアロンの Blazor WebAssembly アプリでも有効です。
前の例では、{TFM}
プレースホルダーはターゲット フレームワーク モニカー (TFM) (net6.0
など) です。
ファイル マッピングと静的ファイルのオプション
このセクションは、サーバー側の静的ファイルに適用されます。
FileExtensionContentTypeProvider を使用して追加のファイル マッピングを作成するか、他の StaticFileOptions を構成するには、次の方法のうち 1 つを使用します。 次の例では、{EXTENSION}
プレースホルダーはファイル拡張子、{CONTENT TYPE}
プレースホルダーはコンテンツ タイプです。 次の API の名前空間は Microsoft.AspNetCore.StaticFiles です。
StaticFileOptions を使用して
Program
で依存関係の挿入 (DI) を使ってオプションを構成します:var provider = new FileExtensionContentTypeProvider(); provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}"; builder.Services.Configure<StaticFileOptions>(options => { options.ContentTypeProvider = provider; }); app.UseStaticFiles();
StaticFileOptions を
Program
ファイル内の UseStaticFiles に直接渡します。var provider = new FileExtensionContentTypeProvider(); provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}"; app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
FileExtensionContentTypeProvider を使用して追加のファイル マッピングを作成するか、他の StaticFileOptions を構成するには、次の方法のうち 1 つを使用します。 次の例では、{EXTENSION}
プレースホルダーはファイル拡張子、{CONTENT TYPE}
プレースホルダーはコンテンツ タイプです。
StaticFileOptions を使用して
Program
で依存関係の挿入 (DI) を使ってオプションを構成します:using Microsoft.AspNetCore.StaticFiles; ... var provider = new FileExtensionContentTypeProvider(); provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}"; builder.Services.Configure<StaticFileOptions>(options => { options.ContentTypeProvider = provider; });
この方法では、Blazor スクリプトの処理に使用されるのと同じファイル プロバイダーが構成されます。 カスタム構成が Blazor スクリプトの提供を妨げないことを確認します。 たとえば、
provider.Mappings.Remove(".js")
でプロバイダーを構成することによって、JavaScript ファイルのマッピングを削除しないでください。Program
ファイル内で次の 2 つの UseStaticFiles の呼び出しを使用します:- StaticFileOptions を使用した最初の呼び出しでカスタム ファイル プロバイダーを構成します。
- 2 番目のミドルウェアは、Blazor フレームワークが提供するデフォルトの静的ファイル構成を使用する Blazor スクリプトを提供します。
using Microsoft.AspNetCore.StaticFiles; ... var provider = new FileExtensionContentTypeProvider(); provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}"; app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider }); app.UseStaticFiles();
MapWhen を使用してカスタムの静的ファイル ミドルウェアを実行することで、
_framework/blazor.server.js
の提供の妨げにならないようにすることができます。app.MapWhen(ctx => !ctx.Request.Path .StartsWithSegments("/_framework/blazor.server.js"), subApp => subApp.UseStaticFiles(new StaticFileOptions() { ... }));
その他のリソース
ASP.NET Core
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示