JavaでWebアプリを作成しているときにCSSが反映されずに躓いた話

目次

1. はじめに
2. 解決に向けた取り組み
   1. CSSファイルの配置確認
   2. ログの確認
3. 解決方法
4. まとめ
5. あとがき

はじめに

現在、Javaを勉強中で、サンプルのWebアプリケーションを作成しています。
その中で、Spring Securityを使用してログインページを作成しましたが、CSSが反映されない問題に遭遇しました。
本記事では、その解決方法について説明します。

解決に向けた取り組み

1. CSSファイルの配置確認

CSSファイルが正しいディレクトリに配置されていない可能性があると思い、配置を確認しましたが、src/main/resources/static/cssに配置してありました。

2. ログの確認

ログを確認したところ、以下のような記述がありました。

o.s.security.web.FilterChainProxy : Securing GET /css/styles.css
o.s.s.w.a.AnonymousAuthenticationFilter : Set SecurityContextHolder to anonymous SecurityContext
o.s.s.w.s.HttpSessionRequestCache : Saved request http://localhost:8080/css/styles.css?continue to session
o.s.s.web.DefaultRedirectStrategy : Redirecting to http://localhost:8080/login

これを見ると、Spring SecurityがCSSファイルへのアクセスを保護しているため、
CSSが正しく読み込まれていないことが分かりました。

解決方法

SecurityConfigクラスでHttpSecurityオブジェクトを構築する際、認証設定を行っています。この設定で、/loginと/registerのみを許可していました。

    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        // 関連部分だけ抜き出しました。
        http
        .authorizeHttpRequests(authorizeHttpRequests ->
            authorizeHttpRequests
                .requestMatchers("/login", "/register").permitAll()
                .anyRequest().authenticated()
        );
        return http.build();
    }

上記の設定にCSSファイルへのアクセス許可を追加することで、問題が解決しました。

    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        // 関連部分だけ抜き出しました。
        http
        .authorizeHttpRequests(authorizeHttpRequests ->
            authorizeHttpRequests
                .requestMatchers("/login", "/register").permitAll()
+               .requestMatchers("/css/**").permitAll()
                .anyRequest().authenticated()
        );
        return http.build();
    }

この変更により、/cssディレクトリ以下のファイルへのアクセスが許可され、CSSが正しく反映されるようになりました。

まとめ

Spring Securityを使用する際、静的リソース（CSSやJavaScriptなど）へのアクセス許可を適切に設定することが重要です。今回の例では、SecurityConfigクラスに/css/**を追加することで、CSSファイルが正しく読み込まれるようになりました。これからもJavaの学習を進めていく中で、こうした設定の重要性を意識していきたいと思います。

あとがき

この記事は、以前C#を学んだ際に躓いたポイントを記事にしておけばよかったという後悔から作成しました。今回は、ChatGPTに文章作成のサポートをしてもらい、この記事を書きました。誤りやアドバイスなどがありましたら、ぜひコメントでお知らせください。