📌 문제 정의

현재 상황

Spring Boot와 React 프로젝트를 통합하여 단일 jar로 빌드하는 과정에서 라우팅 관련 이슈가 발생하고 있습니다.

증상

React Router를 사용하는 페이지 접근 시 무한 리다이렉션 발생
페이지 새로고침 시 404 에러 발생
Spring Boot의 InternalResourceView.renderMergedOutputModel 메서드에서 무한 루프 발생

에러 로그

at org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:171)
at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:314)
at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1432)
...

영향

프로덕션 환경에서 SPA 라우팅 불가
정적 리소스 로딩 실패
서버 리소스 과다 사용

환경

Spring Boot: 3.2.11
React: 18.x
Gradle: 8.x
JDK: 17
Node.js: 22.11.0

🔍 Spring Boot + React 통합 빌드 문제 해결 과정

🚫 시도했던 방법들과 실패 원인

1차 시도: 단순 정적 리소스 설정

spring:
  web:
    resources:
      static-locations: classpath:/static/

➡️ 실패: SPA 라우팅이 작동하지 않고 404 에러 발생

2차 시도: 기본 WebConfig 설정

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @GetMapping("/**")
    public String forward() {
        return "forward:/index.html";
    }
}

➡️ 실패: 무한 리다이렉션 발생, API 요청도 모두 index.html로 라우팅됨

3차 시도: 매칭 패턴 변경

@GetMapping("/{path:^(?!api|static).*}")

➡️ 실패: 올바르지 않은 패턴 문법으로 인한 에러 발생

✨ 최종 해결 방법

문제의 핵심은 React Router의 클라이언트 사이드 라우팅과 Spring Boot의 서버 사이드 라우팅이 충돌하는 것이었습니다.

1️⃣ 정교한 라우팅 패턴 설정

@Controller
public static class ReactController {
    @GetMapping(value = {
        "/", 
        "/{x:[\\w\\-]+}", 
        "/{x:^(?!api$).*$}/**/{y:[\\w\\-]+}"
    })
    public String getIndex() {
        return "/index.html";
    }
}

✅ 성공: API 요청은 제외하고, SPA 라우팅만 정확하게 처리

2️⃣ 정적 리소스 처리 최적화

spring:
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
  web:
    resources:
      chain:
        strategy:
          content:
            enabled: true
            paths: /**

✅ 성공: 정적 리소스가 정상적으로 로드되고 캐싱도 적절히 처리

3️⃣ 빌드 프로세스 개선

task copyReactBuild(type: Copy) {
    dependsOn buildReact
    from("${frontDir}/build") {
        include "**/*"
    }
    into "${projectDir}/src/main/resources/static"
}

✅ 성공: React 빌드 결과물이 정확한 위치에 복사되어 서빙됨

🎯 문제 해결의 핵심 포인트

패턴 매칭 전략 변경
- ant_path_matcher 사용으로 URL 패턴 매칭 문제 해결
- API 요청과 정적 리소스 요청을 명확히 구분
리소스 체인 전략 적용
- 정적 리소스 처리를 위한 최적화된 설정
- 캐싱 전략 개선
빌드 프로세스 안정화
- React 빌드 결과물의 정확한 위치 지정
- 의존성 관계 명확화

💡 배운 점

Spring Boot의 리소스 핸들링 메커니즘에 대한 이해가 중요
React의 라우팅과 Spring Boot의 라우팅 처리 방식의 차이 이해
정적 리소스 처리와 SPA 라우팅의 균형 잡기

이런 방식으로 해결하니 무한 리다이렉션 문제도 해결되고, SPA 라우팅도 정상적으로 작동하게 되었습니다! 🎉

📌 참고사항

API 경로는 반드시 /api/** 패턴으로 시작하도록 구성해야 합니다
개발 환경에서 CORS 설정이 필요할 수 있습니다
빌드 시 React의 환경변수 설정에 주의해야 합니다

Tae4an / Smart-Office

Spring Boot와 React 통합 시 무한 리다이렉션 문제 #10