[Tomcat] 톰캣 도메인 연결, 톰캣 포트포워딩, React 새로고침시 404 Error

환경 : Centos7 , Tomcat9 , React(Deploy)

 

IP주소 1.1.1.1 이라고 치자구요.

연결하고싶은 도메인은 abc.co.kr 이라치고

 

톰캣에 올린 리액트 프로젝트 도메인 연결부터 새로고침시 에러 나는부분까지 한번에 정리하겠습니다.

톰캣은 기본포트가 8080

1. 도메인 연결 (server.xml)

 

아래와 같이 Host 부분을 추가해줘야합니다.

당연히 해당 도메인에 레코드를 해당서버로 설정 해줬다는 가정하에 진행합니다.

(해당 도메인이 1.1.1.1 서버를 바라보고있다는걸 확인하고 싶다면 cmd 창에서 ping abc.co.kr 때려주면 됩니다.)

 

appBase 는 저는 /home/httpd/www 로 잡아서 작업했지만 보통 톰캣 내부폴더 중에 webapps 로 되있습니다.

...생략

<Host name="localhost" appBase="/home/httpd/www" unpackWARs="true" autoDeploy="true" >        
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
           prefix="localhost_access_log" suffix=".txt"
           pattern="%h %l %u %t &quot;%r&quot; %s %b" />
        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
      </Host>


 <Host name="abc.co.kr" appBase="/home/httpd/www" unpackWARs="true" autoDeploy="true" >
    <Alias>www.abc.co.kr</Alias>
    <Alias>abc.co.kr</Alias>
    <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
           prefix="localhost_access_log" suffix=".txt"
           pattern="%h %l %u %t &quot;%r&quot; %s %b" />
    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
  </Host>
  
  ...생략

 

자 이렇게 설정하고 서버 재시작후에 , 도메인이 정상적으로 연결이 되었다면 abc.co.kr:8080 으로 연결이 됩니다.

뒤에 8080이 기분 나쁘죠 ? 저는 아파치 웹서버를 사용하는게 아니라 순수 톰캣만 사용하고 있어서 

abc.co.kr 을 치고 들어왔을때 알아서 뒤에 8080 붙지않고 순수 abc.co.kr 를 유지하면서 톰캣 서비스를 하고싶습니다.

톰캣은 기본포트가 8080 이기 때문에 기본 웹서버 포트인 80 으로 들어가고싶으면 포트포워딩 작업을 해줘야합니다.

8080으로 들어와도 80으로 바로 강제로 보내줍니다.

아래 처럼 센토스7 기준 firewall 설정을 추가 해줍니다.

#포트포워딩 추가
firewall-cmd --permanent --zone=public --add-forward-port=port=80:proto=tcp:toport=8080:toaddr=1.1.1.1

#재시작
firewall-cmd --reload

#확인
firewall-cmd --list-all

 

위와 같이 정상적으로 설정이 되었다면, 이제 abc.co.kr 로 접속하면 뒤에 8080 이 더이상 붙지 않습니다

 

2. 리액트 프로젝트 새로고침 404 에러

제 톰캣 웹서버의 프로젝트 폴더 (appBase) 구조는 아래와 같습니다.

 

리액트프로젝트1 (폴더)

리액트프로젝트2 (폴더)

ROOT      (폴더)

ㅇㅇㅇ.war

ㅇㅇㅇ     (폴더)

도메인이 아닌 ip 주소로 해당 리액트 프로젝트로 접속하여 새로고침을 하면 이상없이 잘되었습니다.

1.1.1.1/프로젝트1 

 

문제는 도메인으로 연결하고 나서 새로고침했을때에 문제가 지속적으로 발생하였습니다.

abc.co.kr/프로젝트1 접속 후 새로고침 하면 404 error

 

각 프로젝트 폴더에 접속하여 "WEB-INF" 라는 폴더를 만들고 그 안에 web.xml 이라는 파일을 만들어줍니다.

 

 

web.xml 이라는 파일을 아래와 같이 만들어줍니다.

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>리액트프로젝트1</display-name>

    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

</web-app>

 

web.xml 이라는 파일이 만들어지거나 수정되어 업로드 하면 톰캣측에서 알아서 로딩이 되는데 적용이 안된다면 재시작 해버리는것도 하나의 방법입니다.

이렇게 해주니 abc.co.kr/리액트프로젝트1 에 접속하여 아무리 새로고침을 해줘도 404 에러가 나지않는것을 확인 할 수 있었습니다.