ASP.NET Core Blazor の静的ファイル

この記事では、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 など) です。

ファイル マッピングと静的ファイルのオプション

このセクションは、サーバー側の静的ファイルに適用されます。

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

その他のリソース

アプリのベース パス