[Tomcat] React 404 톰캣서버 RewriteRule 설정 (Feat. SPA, 404 ERROR)

환경 : SpringBoot (Gradle) + Tomcat + React.js 

 

Single Page Application : 단일 페이지 어플리케이션

서버로부터 페이지를 계속 새롭게 호출하는게 아니라 , 현재 페이지에서 동적으로 다시 불러오기 때문에 기존방식 링크타고 들어가는 a href="" ~~~ (새로고침) 보다 빠름

 

대충 이정도만 알면됐고 문제점 발생

 

SPA 특성상 한 페이지에서 재가동이되는데 로컬에선 잘만되던 녀석이 서버에 올라가서 404가 터짐

리액트던 뷰던 어쨌든 index.html 이 토대로 그 안에 있는 부분부분 Component 내용물 을 갈아끼우는 형식으로 진행이 되는데 특정 부분을 링크타고 들어갈려면 인식을 할수 있을리가 없다

애초에 웹서버단에서 인식이된건 index.html 뿐이 없기 때문에 뒤에 뭐가 들어가든 당연히 찾지못한다.

 

 

1. 웹서버 단에 server.xml 파일에 내용 추가

 <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

 

2. rewrite.config 라는 파일 생성 ( 경로 : /tomcat/conf/Catalina/localhost )

 

# /front/~ 로 시작하는 모든것들은 다 /front/index.html 로 보내라 !!! 라고 룰을 설정해주는 파일이다.

 

** /front/index.html 까지 명시를 제대로 안해주고 /front 라고 했다가 새로고침 할때마다 계속 index.html 초기화면으로 돌아가는게 확인되었다. index.html 까지 명시는 필수 

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/front/(.*) /front/index.html

 

3. 재시작 필수

#systemctl.service 에 등록을 하지않았다면 아래처럼 절대경로로 톰캣 재시작 필수
/usr/local/tomcat9/bin/shutdown.sh
/usr/local/tomcat9/bin/startup.sh

톰캣을 systemctl.service 에 등록해서 "systemctl restart tomcat" 이런식으로 조정하고싶다면 아래 링크를 참조하면된다.

https://bug41.tistory.com/131

 

여튼 이렇게 하면 front/test.html 어떠한 front/* 경로에 접속을해도 강제로 /front 로 보내준다.