ASP.NET Tips #004 - ASP.NET Core で静的ファイルへのアクセス時に HTTP ヘッダーに "Cache-Control" を付加して一定期間リクエストを軽減させる

ASP.NET Core で wwwroot 配下にある静的ファイル(画像やスタイルシート、スクリプトなど)へのアクセスに対して HTTP ヘッダーに "Cache-Control" を設定する事ができます。
ブラウザー側でのキャッシュ期間を設定する事でリクエストを軽減させたい場合は、Startup.cs の Configure() 内で UseStaticFiles() を書き換えて、レスポンスのヘッダーに "Cache-Control" を追加します。

~/Startup.cs
namespace AspNetTips.MvcSite
{
	public class Startup
	{
		// 省略...

		public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
		{
			// 省略...

			app.UseHttpsRedirection();

			//app.UseStaticFiles();
			app.UseStaticFiles(new StaticFileOptions
			{
				// 静的ファイルをブラウザーにキャッシュさせる期間(秒数) … 60秒x60分x24時間x365日 = 31,536,000
				OnPrepareResponse = sfrc => sfrc.Context.Response.Headers.Add("Cache-Control", "public, max-age=31536000")
			});

			app.UseRouting();

			// 省略...
		}
	}
}

これによって wwwroot 配下の静的ファイルはブラウザーに 1年間(31,536,000秒) キャッシュされます。

しかし、画像やスタイルなどを更新してもファイルのパスが同じままだと、キャッシュがクリアされるタイミングがデバイス毎にずれてしまう為、古い画像などが表示され続けると困った事になってしまいます。
静的ファイルの更新があった場合はファイル名やクエリ文字列などを変更し、パスを替える事でキャッシュしているデータと異なることをブラウザーへ通知する必要が出てきます。

ASP.NET Core では、スタイル(<link>タグ)、スクリプト(<script>タグ)、画像(<img>タグ)に asp-append-version="true" を付加する事で、ファイル名の後ろに "?v=xxxxxxxxxx" といった形でファイルのハッシュをクエリ文字列として自動で付加してくれます。
これにより、静的ファイルのデータが更新されるとハッシュが変わり自動的に生成されるパスが更新されるので、手動でパスを書き換える手間や書き換え漏れを防ぐ事ができます。

HTML <link>タグ (スタイル)
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
ソースを表示 (スタイル)
HTML <script>タグ (スクリプト)
<script src="~/js/site.js" asp-append-version="true"></script>
ソースを表示 (スクリプト)
HTML <img>タグ (画像)
<img src="~/img/plusism.png" asp-append-version="true" />
ソースを表示 (画像)
試作環境
  • Windows 10 (20H2)
  • Visual Studio 2019 (v16.8.3)
  • .NET SDK 5.0.101
  • ASP.NET Core 5.0 / MVC