【thymeleaf】静的ファイルのキャッシュキーにコミットIDを使用する【SpringBoot】

Java Spring Boot

こんにちは、エキサイト株式会社の蝦名です。

エキサイトHDアドベントカレンダー13日目の記事です。 qiita.com 是非、他の記事もチェックしてみてください！

本題

cssやjsなどの静的ファイルはブラウザにキャッシュされます。
サイトの表示が速くなるなどの利点がありますが、ファイルが更新された後にも更新前のキャッシュを参照してしまうことがあります。
それを解決するためによく用いられているのが静的ファイルにパラメータでキャッシュキーを付与する手法です。

htmlタグの例
<script src="/sample/sample.js?cachekey20221101">

私の経験においてはキャッシュキーに日付を使用し手動で更新することが多かったのですが、 今回は以下の記事を参考に、キャッシュキーの自動更新を実践してみました！

tech.excite.co.jp

実際にやってみる

前提環境

  • JDK 17
  • Gradle 7.5
  • SpringBoot 2.6 + thymeleaf

gradle設定

build.gradle
plugins {
    id 'com.gorylenko.gradle-git-properties' version '2.4.1'
}

subprojects {
    apply plugin: 'com.gorylenko.gradle-git-properties'
}

サブプロジェクトの.build/resource/mainにgit.propertiesが生成されるよう設定します。

git.propertiesファイルの読み込み設定

application.yml
spring:
  config:
    import:
      - 'classpath:git.properties'

application.ymlがあるサブプロジェクトでgit.propertiesが生成されている必要があります。

コンストラクターをDIコンテナへ登録

GitCommitProperty.java
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.context.properties.ConstructorBinding;

@ConstructorBinding
@ConfigurationProperties(prefix = "git.commit")
public record GitCommitProperty(String id) { }

静的ファイルのキャッシュキーとして使用

thymeleafからGitCommitProperty.getId()を呼び出して、htmlに埋め込みます。

<scrip type="text/javascript" th:attr="src=|js/sample.js?${@gitCommitProperty.id}|"></script>

結果

出力されたhtml例
<scrip type="text/javascript" src="js/sample.js?comitidxxx0000111122223333"></script>

まとめ

ざっと思いつくメリット、デメリットを以下に挙げてみます。

メリット

  • 手動で更新する手間がない
  • コミットごとに必ずキャッシュキーが更新される
  • キャッシュキーが被りにくい
  • キャッシュキー文字列の意味を推測しにくい

デメリット

  • 変更していないファイルのキャッシュキーが更新されてしまう

コミットIDが変わるタイミングで静的ファイルへのアクセスが集中してしまうので注意が必要ですが、キャッシュキーを自動でシンプルに管理できます。 キャッシュキー管理の選択肢の一つとしていかがでしょうか。

最後に

エキサイトHDアドベントカレンダーはまだまだ続きます！明日もお楽しみに！

qiita.com