React로 프론트엔드를 개발하고, Spring Boot로 백엔드를 구성하는 프로젝트를 진행 중이라면, 두 프레임워크를 효율적으로 통합하는 방법을 고민해본 적이 있을 겁니다. 이 글에서는 React의 빌드 결과를 Spring Boot의 static 폴더에 넣고 단일 애플리케이션으로 실행하는 방법을 소개합니다.
왜 React와 Spring Boot를 통합해야할까?
React는 강력한 프론트엔드 라이브러리이고, Spring Boot는 안정적인 백엔드 프레임워크입니다. 두 개를 별도로 실행하면 프론트엔드와 백엔드 간 CORS 문제나 배포 복잡성이 생길 수 있습니다. 이를 해결하기 위해 React 빌드 파일을 Spring Boot의 static 폴더에 통합하면 단일 JAR 파일로 배포가 가능해지고, 운영과 관리가 훨씬 간편해집니다. 이 글에서는 설정 방법부터 Spring Security까지, 실무에서 바로 사용할 수 있도록 설명합니다.
React 빌드 파일을 Spring Boot에 통합하기
React 프로젝트 빌드하기
먼저, React 프로젝트에서 빌드를 생성합니다. 터미널에서 아래 명령어를 실행하세요.
npm run build이 명령어는 build 폴더에 정적 파일(index.html, static/js, static/css 등)을 생성합니다. 이 파일들을 Spring Boot에서 제공할 준비를 합시다.
Spring Boot의 static 폴더에 붙여넣기
Spring Boot는 기본적으로 src/main/resources/static 폴더에서 정적 파일을 제공합니다. React의 Build 폴더 내용을 그대로 src/main/resource/static에 복사하세요. 이제 Spring Boot 실행 시 React 프론트엔드가 자동으로 로드됩니다.
Spring Boot에서 React 라우팅 처리하기
WebConfig설정
src/main/java/[패키지명]/config/WebConfig.java 파일을 생성하고 다음 코드를 입력합니다.
package com.example.demo;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
// // React의 라우팅을 Spring Boot에서 처리하도록 설정
registry.addViewController("/{path:[^\\.]*}").setViewName("forward:/index.html");
registry.addViewController("/**/{path:[^\\.]*}").setViewName("forward:/index.html");
}
}이렇게 설정하면 .이 없는 모든 경로(예: /about, /contact)에 index.html를 보내 React Router가 처리합니다.
주의: Spring Boot 2.6 이상 버전 설정
Spring Boot 2.6 이상에서는 기본 URL 매칭 전략이 PathPatternParser로 변경되었습니다. 이로 인해 위 코드가 제대로 동작하지 않을 수 있으니, application.properties에 아래 설정을 추가하세요.
spring.mvc.pathmatch.matching-strategy=ant_path_matcher
실행하기
./mvnw spring-boot:run- 브라우저에서 http://localhost:8080에 접속해 React 앱이 제대로 로드되는지 확인하세요.
- React 라우터 경로(예: /about)로 이동해도 새로고침 시 404 오류 없이 잘 작동하는지 테스트하세요.