React & Springboot 통합 빌드시 Whitelabel Error 해결

무슨 오류인가?

• 리액트가 통합된 스프링부트 애플리케이션을 실행하고, 리액트에서 설정한 Route로 웹페이지 이동 후, 새로고침하면 Whitelabel Error Page가 뜸

• 아래 오류는 http://localhost:8080/grammar로 접속후 새로고침시 나타난 오류

Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Fri Jan 19 00:01:16 KST 2024

There was an unexpected error (type=Not Found, status=404).

No static resource grammar.
...

오류 발생 원인 분석

1. 개발 단계에서 CORS 에러 피하기 위해 Proxy설정하지만 배포할때는 무의미함

2. build.gradle에 의해서 서버 포트에서 리액트 앱이 작동함

3. 하지만 Router로 매핑한 페이지는 기본 리액트 포트인 3000번을 사용하므로 서버에서는 해당 페이지를 못 찾음

4. 따라서 새로고침하면 내부적으로 3000번으로 요청해 오류 발생

해결방법

리액트에서 해결하는 방법

react-router-dom라이브러리에서 제공하는 BrowserRouter와 HashRouter의 차이부터 알아보자

BrowserRouter

• HTML5의 HistoryAPI를 사용하여 라우팅 처리를 지원하기 때문에 뒤로가기, 앞으로 가기 기능 활용 가능

• URL 경로를 읽을 때 실제 경로를 읽어오며 URL에 '#'이 표시되지 않아 URL을 읽기 쉬움

• 리액트 애플리케이션의 모든 경로에 대해 적절한 응답을 제공해야하고 이를 위해 추가적인 서버 설정 필요

HashRouter

• URL의 해시 부분('#')을 사용하여 라우팅을 처리

• 해시를 이용해 페이지의 변화를 감지하고 해당하는 컴포넌트를 렌더링

• 모든 경로에서 리액트 애플리케이션 작동

• 추가적인 서버 설정 필요 없음

• URL이 복잡한 만큼 검색 성능 저하

⇒ 웹 서버의 구성이 가능하고 검색시 노출되야하는 URL일 경우 BrowserRouter사용하고, 단독으로 호스팅하거나 서버의 설정이 불필요한 경우 HashRouter 사용하자

스프링부트에서 해결하는 방법

• BrowserRouter를 사용하는 경우에만 스프링부트에서 해결 가능

• 리액트를 빌드하면 스프링부트 프로젝트의 static 폴더에 index.html만 생성됨

⇒ 모든 URL 요청을 index.html로 포워딩해주자!

package com.wordwave.main;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {
	@RequestMapping({"/", "/grammar"})//URI 추가해야함
    public String redirect() {
        return "index.html";
    }
}

• 스프링부트가 타임리프 템플릿 엔진 사용해서 resources/templates에서 html파일 찾으려고 함 → index.html은 resources/static에 있으므로 경로 수정해야함 → application.properties에 아래 내용 추가
  
  → build.gradle에 thymeleaf 의존성 삭제하기

남아있는 문제

• 새로고침시 Layout 컴포넌트 위치 바뀜 → 바뀌다 안바뀜 → 프론트로 해결

• bulid.gradle의 타임리프 의존성 삭제하면 application.properties에 타임리프 설정 없어도 되는지 테스트해보기 → 타임리프 의존성 삭제하니 정상 작동함

• 모든 URL(라우트)을 추가해줘야함

참고

[Spring]React + SpringBoot 새로고침 오류

React와 Springboot 프로젝트를 연동한 경우 발생하는 새로고침(whitelabel error)의 원인을 알아보고 클라이언트와 서버 측의 해결 방안을 살펴보자.

https://velog.io/@ung6860/SpringReact-SpringBoot-새로고침-오류