wwwroot フォルダにある静的ファイル以外にも asp-append-version を適用する

ページ作成日 : torsdag 29. april 2021

環境

Visual Studio

Visual Studio 2019

ASP.NET Core

3.1 (Razor ページ, MVC)

wwwroot フォルダ以外に配置した静的ファイルには asp-append-version が反映されない

app.UseStaticFiles メソッドを追加で呼び出し StaticFileOptions を指定することによって wwwroot 以外のフォルダにも静的ファイルを配置することが可能です。しかし、wwwroot フォルダ以外に配置した静的ファイルに対して link タグや script タグに asp-append-version 属性を設定しても URL にバージョン情報が付加されません。

試しに確認してみます。ファイルは以下の構成で配置しています。

Startup.Configure メソッドで Areas/Site1/Content フォルダも公開できるように設定しています。

// wwwroot フォルダで静的ファイル参照を有効にする
app.UseStaticFiles();

// Site1 用の物理コンテンツフォルダと参照 URL を紐づける
app.UseStaticFiles(new StaticFileOptions()
{
  FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site1/Content")),
  RequestPath = "/Site1",
});

以下は index.cshtml に追加したコードです。それぞれに asp-append-version を付加しています。

<!-- ここから追加 -->

<!-- wwwroot のファイル -->
<img src="~/image/sample.png" asp-append-version="true" />

<!-- wwwroot 以外のファイル -->
<img src="~/site1/image/sample1.png" asp-append-version="true" />

<!-- ここからまで -->

実行すると画像は正しく表示されています。

しかし、ページの HTML を見てみると wwwroot に配置したファイルにしか文字列が展開されていないことが分かります。

asp-append-version が反映されない原因

asp-append-version が反映されるかどうかを決定しているのは env.WebRootFileProvider プロパティに設定している IFileProvider によります。既定では wwwroot 指定の PhysicalFileProvider が設定されているため、他のフォルダには反映されないのです。

一応、複数の IFileProvider を持つことができる CompositeFileProvider クラスというものがあり、こちらに PhysicalFileProvider を複数詰め込んで env.WebRootFileProvider に渡すこともできるのですが、あくまでも物理フォルダパスのみ複数渡せるものであり、 StaticFileOptions.RequestPath を複数指定できるわけではありませんので、意図した動作にはならないと思います。

※ env.WebRootFileProvider とは Startup.Configure メソッドで受け取っている IWebHostEnvironment env の事です。

IFileProvider を継承して独自のクラスを作る

ASP.NET Core にある標準機能のみでは対応できないため、独自の FileProvider を作成します。

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.Primitives;

namespace Microsoft.Extensions.FileProviders
{
  /// <summary>
  /// wwwroot フォルダ以外のファイルで "asp-append-version”を有効にするための複数の <see cref="StaticFileOptions"/> を管理するファイルプロバイダです。
  /// </summary>
  class CompositeStaticFileOptionsProvider : IFileProvider
  {
    private readonly IFileProvider _webRootFileProvider;
    private readonly IEnumerable<StaticFileOptions> _staticFileOptions;

    /// <summary>
    /// コンストラクタです。
    /// </summary>
    /// <param name="webRootFileProvider">
    /// デフォルトの wwwroot が設定されている WebRootFileProvider を指定します。通常は env.WebRootFileProvider を指定してください。
    /// これは追加した <see cref="StaticFileOptions"/> がヒットしなかった場合に使用するためです。
    /// </param>
    /// <param name="staticFileOptions">
    /// 追加した静的ファイルオプションの一覧です。
    /// FileProvider と RequestPath が設定されている必要があります。
    /// </param>
    public CompositeStaticFileOptionsProvider(IFileProvider webRootFileProvider, IEnumerable<StaticFileOptions> staticFileOptions)
    {
      _webRootFileProvider = webRootFileProvider ?? throw new ArgumentNullException(nameof(webRootFileProvider));
      _staticFileOptions = staticFileOptions;
    }

    /// <summary>
    /// 指定されたパスにあるディレクトリを列挙します（存在する場合）。
    /// </summary>
    /// <param name="subpath">ディレクトリを識別する相対パス。</param>
    /// <returns>ディレクトリの内容を返します。</returns>
    public IDirectoryContents GetDirectoryContents(string subpath)
    {
      var result = GetFileProvider(subpath);
      return result.FileProvider.GetDirectoryContents(result.StaticFileRelativePath);
    }

    /// <summary>
    /// 指定されたパスでファイルを見つけます。
    /// </summary>
    /// <param name="subpath">ファイルを識別する相対パス。</param>
    /// <returns>ファイル情報。 発信者はExistsプロパティを確認する必要があります。</returns>
    public IFileInfo GetFileInfo(string subpath)
    {
      var result = GetFileProvider(subpath);
      return result.FileProvider.GetFileInfo(result.StaticFileRelativePath);
    }

    /// <summary>
    /// 指定されたフィルターの Microsoft.Extensions.Primitives.IChangeToken を作成します。
    /// </summary>
    /// <param name="filter">監視するファイルまたはフォルダーを決定するために使用されるフィルター文字列。 例：**/*.cs、*.*、subFolder/**/*.cshtml。</param>
    /// <returns>ファイル一致フィルターが追加、変更、または削除されたときに通知される Microsoft.Extensions.Primitives.IChangeToken。</returns>
    public IChangeToken Watch(string filter)
    {
      var result = GetFileProvider(filter);
      return result.FileProvider.Watch(result.StaticFileRelativePath);
    }

    /// <summary>
    /// 指定された相対 URL に含まれる <see cref="StaticFileOptions"/> を探し、その FileProvider と静的ファイルへの相対パスを返します。
    /// 見つからなかった場合は wwwroot を持つ FileProvider を返します。
    /// </summary>
    /// <param name="path">アクセスされたホスト名以降の相対 URL。</param>
    /// <returns>検索された <see cref="StaticFileOptions"/> の FileProvider と RequestPath から静的ファイルへの相対パス。</returns>
    private (IFileProvider FileProvider, string StaticFileRelativePath) GetFileProvider(string path)
    {
      if (_staticFileOptions != null)
      {
        foreach (var option in _staticFileOptions)
        {
          // 登録している RequestPath とアクセスされた URL の大文字小文字が異なる場合があるので OrdinalIgnoreCase を指定
          if (path.StartsWith(option.RequestPath, StringComparison.OrdinalIgnoreCase))
          {
            return (option.FileProvider, path[option.RequestPath.Value.Length..]);
          }
        }
      }
      return (_webRootFileProvider, path);
    }
  }
}

長いので細かいところの説明は省きますが、簡単に説明すると、まず作成した StaticFileOptions の一覧をこのクラスですべて持っておきます。このクラスは後で env.WebRootFileProvider プロパティにセットしておきます。

クライアントからアクセスされると各メソッドが呼ばれるので URL をもとにどの StaticFileOptions の静的ファイルにアクセスしたかを検索し、ヒットした StaticFileOptions の FileProvider と静的ファイルへの相対パスを返します。StaticFileOptions にヒットしなかった場合はデフォルトの FileProvider を返すことによって wwwroot の設定が適用されます。

各処理で正しいファイル情報を返すと asp-append-version 属性が反映されるようになります。

ちなみにこの作成したコードはどこにおいても構いません。

独自のクラス (CompositeStaticFileOptionsProvider) を適用する

Startup.Configure では以下のように修正します。書いてある通りなので特に説明するようなものはありません。 StaticFileOptions を配列でまとめているところぐらいです。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 省略
  app.UseHttpsRedirection();
  
  // ここから修正
  
  var staticOptions = new StaticFileOptions[]
  {
    // Site1 用の物理コンテンツフォルダと参照 URL を紐づける
    new StaticFileOptions()
    {
      FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site1/Content")),
      RequestPath = "/Site1",
    },
    // 複数ある場合はこんな感じで追加
    //new StaticFileOptions()
    //{
    //  FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site2/Content")),
    //  RequestPath = "/Site2",
    //},
  };
  
  // wwwroot フォルダで静的ファイル参照を有効にする
  app.UseStaticFiles();
  
  // 追加したい StaticFileOptions
  foreach (var option in staticOptions)
  {
    app.UseStaticFiles(option);
  }
  
  // StaticFileOptions を独自クラスでまとめて WebRootFileProvider にセットする
  var compositeProvider = new CompositeStaticFileOptionsProvider(env.WebRootFileProvider, staticOptions);
  env.WebRootFileProvider = compositeProvider;
  
  // ここまで修正
  
  app.UseRouting();
  // 省略
}

これで実行してみると wwwroot 以外のフォルダに配置した静的ファイルにも asp-append-version 属性が反映されていることが分かります。

静的ファイルを wwwroot 以外のフォルダに配置する

ASP.NET Core で Entity Framework Core を使用してデータベースにアクセスする