[Spring Boot] Spring Boot & React 프로젝트 연결하기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

개요

프로젝트를 배포하면서 또다시 서버를 화면과 함께 배포해야되는 상황이 생겼다.

 

이전에 작성했던 게시글보다 더 쉬운 방법을 찾아서 기록해보려 한다.

 

https://tlseoqja.tistory.com/184

[Spring Boot] Spring Boot & React 프로젝트 연결하기

 

 

리액트 프로젝트 빌드

먼저 만들어놓은 리액트 프로젝트를 아래의 명령어를 입력해서 빌드한다.

# npm 사용 시
npm run build

# yarn 사용 시
yarn build

 

빌드가 완료되면 프로젝트 폴더 안에 build 폴더가 생성된다.

 

vite를 사용면 dist 폴더가 생성된다.

 

 

빌드된 폴더 서버에 추가하기

빌드가 완료되면 빌드된 폴더의 파일들을 서버 폴더에 넣어주면 된다.

 

경로는 src/main/resources이다.

 

 

프로젝트 실행

별도의 설정 없이 서버를 실행시켜준 뒤 아이피로 접속해보면 정상적으로 페이지가 호출된다.

 

하지만 "/" 경로가 아닌 다른 경로로 접속 시 Whitelabel Error Page 에러가 발생한다.

 

 

 

Whitelabel Error Page 에러 해결하기

해당 에러는 React Router가 관리하는 클라이언트 사이드 경로를 Spring Boot 서버에서 알지 못하기 때문에 발생한다.

 

React Router는 브라우저에서 동작해서 URL 경로 변경을 서버에 요청하지 않고 클라이언트 사이드에서 독립적으로 관리한다.

 

그러나 페이지를 새로 고침하거나, URL을 직접 입력해서 접근할 경우 브라우저는 해당 URL에 대해서 서버로 요청을 보내게 된다.

 

따라서 서버에서 클라이언트 사이드 라우트 요청 시 index.html로 리다이렉트하도록 설정해주면 된다.

 

 

index.html 리다이렉트 설정

먼저 Controller를 하나 생성해주고 아래의 코드를 넣어준다.

@Controller
public class ViewController {
  @GetMapping(value = {"/**/{path:[^\\.]*}"})
  public String redirect() {
    return "forward:/index.html";
  }
}

 

그리고 프로젝트를 실행하면 해당 패턴을 인식하지 못해서 다음과 같은 오류가 발생한다.

Invalid mapping pattern detected: /**/{path:[^\.]*}
^
No more pattern data allowed after {*...} or ** pattern element

 

IntelliJ에서 해결 방법을 친절하게 알려주므로 application.yml 파일에 아래 코드를 추가한다.

spring:
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher

 

프로젝트를 실행한 뒤 새로 고침하거나, URL 직접 접속 시 Whitelabel 에러 없이 접속 가능하게 된다.