先生と生徒の会話形式で理解しよう

生徒

「Spring Bootで画像ファイルやCSSファイルを表示させたいときって、どこに置けばいいんですか？」

先生

「それなら、/staticや/publicといったディレクトリに配置するのが基本です。Spring MVCは静的リソースの配信にも対応しているんですよ。」

生徒

「そうなんですね！でも、どうして/staticとかに置くだけで表示されるんですか？設定しないとだめだと思ってました。」

先生

「それにはSpring MVCの静的リソース解決の仕組みが関係しています。順を追って説明しましょう。」

1. Spring Bootにおける静的リソースの自動配信機能

Spring Bootでは、src/main/resourcesディレクトリ内にある特定のパスに配置されたファイルは、自動的にWebブラウザからアクセスできるようになります。たとえば次のようなディレクトリが対象です。

/static
/public
/resources
/META-INF/resources

たとえば、次のような構成でlogo.pngという画像ファイルを配置したとします。


src/
└── main/
    └── resources/
        └── static/
            └── images/
                └── logo.png

この場合、ブラウザからは次のようなURLでアクセスできます。


http://localhost:8080/images/logo.png

2. /staticと/publicの違いとは？

/staticも/publicも静的リソースを配置するためのディレクトリですが、優先順位が異なります。Spring Bootはリクエストに対して以下の順でリソースを探します。

/META-INF/resources
/resources
/static
/public

つまり、同じファイル名のリソースが複数の場所に存在する場合、/staticのものが/publicより優先されます。

PR

将来を見据えて、＋αのスキルを身につけたい方へ

JavaやLinuxを学んでいても、「このままで市場価値は上がるのか」「キャリアの選択肢を広げたい」と感じる方は少なくありません。

AIを学ぶならアイデミープレミアム

3. HTMLやCSS、JavaScriptの配置例

Spring MVCの静的リソース処理は、HTMLテンプレートで使うCSSやJavaScriptファイルとも相性が良く、th:hrefなどを使ってテンプレートと連携できます。


<link th:href="@{/css/style.css}" rel="stylesheet" />
<script th:src="@{/js/app.js}"></script>

ファイルの物理的な配置は以下のようになります。


src/
└── main/
    └── resources/
        └── static/
            ├── css/
            │   └── style.css
            └── js/
                └── app.js

4. キャッシュ制御の基本：キャッシュを無効化・制御する方法

静的リソースは通常ブラウザによってキャッシュされますが、開発中などでキャッシュを無効にしたい場合もあります。Spring BootではWebMvcConfigurerを使ってキャッシュ設定をカスタマイズできます。


@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/")
            .setCachePeriod(0);
    }
}

setCachePeriod(0)とすることで、ブラウザ側のキャッシュが無効になり、毎回ファイルが読み込まれるようになります。

5. 実際の動作確認とHTTPヘッダーの確認

ブラウザの開発者ツール（F12）を開き、ネットワークタブを確認すると、静的リソースに対するレスポンスにキャッシュ関連のHTTPヘッダーが含まれていることがわかります。

キャッシュ無効設定が正しく行われていれば、以下のようなHTTPヘッダーが確認できます。


Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0

6. アクセスできないときの原因と対処法

静的リソースにアクセスできないときの主な原因は以下の通りです。

ファイルの配置場所が誤っている
URLパスの指定ミス（例：/static/imagesと書くのは誤り）
セキュリティ設定（Spring Security）でブロックされている

特にSpring Securityを導入している場合、静的リソースにも認証が必要になってしまうことがあります。その場合は、SecurityFilterChainの設定で静的ファイルを除外する必要があります。


@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
        .authorizeHttpRequests(auth -> auth
            .requestMatchers("/css/**", "/js/**", "/images/**").permitAll()
            .anyRequest().authenticated()
        );
    return http.build();
}

7. CDNやバージョニングとの併用

本番環境では、静的リソースのキャッシュを活かすために、ファイル名にバージョン番号を付ける手法がよく使われます。たとえば、次のように記述します。


<link href="/css/style-v1.2.3.css" rel="stylesheet" />

これにより、ブラウザはファイル名が変わったときだけキャッシュを無効にし、新しいファイルを取得します。また、CDNを使えばグローバルな配信速度向上にもつながります。

8. Spring MVCにおける静的リソースの使いどころ

Spring BootやSpring MVCでは、静的リソースの取り扱いも非常にシンプルです。開発初期は/staticにファイルを置くだけでよく、細かいキャッシュ制御が必要になればWebMvcConfigurerを使って対応できます。

さらに、Spring SecurityやCDNとも連携させることで、安全かつ効率的なWebアプリケーションの配信が実現できます。

まとめ

Spring MVCの静的リソース配信を全体から振り返る

ここまでの記事では、Spring MVCおよびSpring Bootにおける静的リソース配信の仕組みについて、基礎から実務で役立つポイントまで段階的に学んできました。画像ファイルやCSS、JavaScriptといった静的リソースは、Webアプリケーションにおいて欠かせない存在です。画面デザインや操作性を支える重要な要素でありながら、仕組みを正しく理解していないと「表示されない」「キャッシュが効きすぎる」「本番と開発で挙動が違う」といったトラブルの原因にもなります。

Spring Bootでは、src/main/resources配下の/staticや/publicなどの決められたディレクトリにファイルを配置するだけで、特別な設定を行わなくてもブラウザから直接アクセスできるようになります。この自動配信機能は、初心者にとって非常に扱いやすく、HTMLやテンプレートと静的ファイルをスムーズに連携させる大きな助けになります。

ディレクトリ構成と優先順位の理解が安定動作の鍵

記事の中で解説したように、Spring MVCは静的リソースを探す際に決められた優先順位でディレクトリを確認します。 /staticと/publicは似た役割を持ちますが、同名ファイルが存在した場合の優先度が異なります。この仕組みを知らずにファイルを配置すると、意図しないリソースが表示されてしまうこともあります。

そのため、実務では「どの種類のファイルをどのディレクトリに置くのか」をあらかじめ決めておくことが重要です。 CSSやJavaScript、画像といったリソースを用途ごとに整理して配置することで、保守性の高いプロジェクト構成を維持できます。

キャッシュ制御と開発・本番環境の使い分け

静的リソース配信で特に重要なのがキャッシュの扱いです。ブラウザは一度取得したCSSや画像をキャッシュとして保存するため、ページの表示速度は向上しますが、開発中には「修正したはずなのに反映されない」という状況が起こりがちです。

Spring MVCではWebMvcConfigurerを使うことで、キャッシュ期間を柔軟に制御できます。開発環境ではキャッシュを無効にし、本番環境ではキャッシュを活用する、といった切り替えを行うことで、作業効率とユーザー体験の両立が可能になります。

まとめとしての簡単な設定サンプル

記事全体の内容を踏まえた、静的リソース配信とキャッシュ制御の基本形を改めて確認してみましょう。


@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/")
            .setCachePeriod(0);
    }
}

この設定により、/static配下の静的ファイルが確実に配信され、キャッシュの影響を受けずに変更を確認できます。状況に応じてキャッシュ期間を調整することで、より実践的な運用が可能になります。

先生と生徒の振り返り会話

生徒

「Spring Bootでは、静的リソースってこんなに簡単に扱えるんですね。ただ置くだけで表示される理由が分かって、仕組みもスッと理解できました。」

先生

「そうですね。自動配信の仕組みを知っておくと、無駄な設定をしなくて済みます。その分、ディレクトリ構成や命名ルールを意識することが大切になります。」

生徒

「キャッシュの話も印象に残りました。開発中に反映されない理由が、ブラウザのキャッシュだったんですね。」

先生

「多くの人が一度はつまずくポイントです。キャッシュ制御と静的リソースの配置を理解しておけば、 Spring MVCの画面まわりはかなり安定して扱えるようになりますよ。」