Apache Tomcat 9.0.80 버전 및 윈도우10을 기준으로 작성되었습니다.
회사에서 새로운 서비스(사실 서비스라고 하기엔 조금 거창한데, 뭐라고 표현할 단어가 없습니다..💀) 개발 요청이 들어왔는데, 기존에 사용하던 웹 서버가 아닌 신규 웹 서버에 배포를 해 달라는 요청을 받았습니다.
신규 웹 서버는 윈도우에서 nginx + apache tomcat 으로 대략 4개의 서비스가 돌아가고 있었는데,
문제는 기존 웹 서버들은 IIS로 배포를 했기 때문에 톰캣으로 새로운 환경을 구축해 본 경험이 없었습니다.
그리고 배포된 서비스들은 전자정부프레임워크 + JSP 로 구축되어 있었는데, UI 인터랙션이 조금 있는 페이지라 프론트단을 JSP로 개발하면 비효율적일 것 같다는 생각이 들어 프론트만 React로 빠르게 개발하고, proxy 설정을 통해 인터페이스용 백엔드 서버랑 통신해 보기로 하였습니다.
그렇게 시작된.. 간단하지만 하루동안 삽질을 했던
톰캣으로 리액트 정적 페이지 배포하는 법을 기록하고자 합니다. 😭
Tomcat 다운로드
https://tomcat.apache.org/ (Apache Tomcat 홈페이지)
톰캣 공식 웹 사이트에서 톰캣 설치파일을 다운받을 수 있습니다. 좌측 gnb의 Download에 다운로드 가능한 버전들이 있는데, 저는 이미 서버에 서비스되고 있는 Tomcat 9 버전으로 진행하였습니다.
운영체제에 맞는 설치파일을 다운로드해줍니다. 무설치판과 설치판(Installer)이 있는데 저는 무설치판으로 진행하였습니다. (64-bit Windows zip)
설치판으로도 진행해 보았는데, 차이점은 톰캣 경로, 포트, jre 경로 같은 기본 설정과 service.bat install 로 서비스를 등록하지 않아도 바로 서비스를 등록해준다는 점? 정도 인 것 같습니다. 👻
무설치판은 압축파일로 다운받아지는데, 톰캣 경로로 설정하고 싶은 폴더에 압축을 풀어 주시면 됩니다.
포트 설정
압축을 풀고 나면 conf라는 폴더가 있는데, 이 곳에서 톰캣 설정을 변경할 수 있습니다.
포트 정보를 변경해야 하므로 server.xml 파일을 편집해 줍니다.
기본적으로 톰캣 종료 포트는 8005, 커넥터(요청을 수신하고 응답을 전송하는 역할) 포트는 8080, 커넥터 리다이렉트 포트(SSL을 지원하지 않을 때, SSL 요청이 들어오면 해당 포트로 리다이렉트 시키는 역할)는 8443으로 설정되어 있습니다.
사용중인 포트와 겹치지 않도록 포트를 변경해 줍니다.
사용중인 포트 확인
netstat -ano
cmd 창에서 netstat -ano 명령어를 입력하면 사용중인 포트 목록을 확인할 수 있습니다.
netstat -ano | findstr [포트 번호] 명령어로 특정 포트를 사용하고 있는지 확인 가능합니다.
리액트 파일 빌드
npm run build
프론트 폴더에서 npm run build 명령어를 입력하여 리액트 파일을 빌드합니다.
소스 경로 설정
톰캣 폴더 내의 webapps/ROOT 내 파일을 전부 지우고, 프론트 빌드 결과물이 나온 폴더(build) 안의 파일들을 ROOT 폴더로 옮기면 별도의 경로 설정이 필요 없습니다.
하지만 빌드된 결과물을 톰캣 내부 폴더로 옮기지 않고 사용하고 싶다면, 포트 설정을 했던 [톰캣 폴더명]/conf/server.xml 파일을 수정해 주어야 합니다.
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">server.xml 파일 하단의 Host 부분에 Context 를 추가해 주면 파일 경로 변경이 가능합니다.
path에 클라이언트에서 요청할 주소, docBase에 프론트 소스 build파일 경로를 적어줍니다.
http:://localhost:7080 으로 요청을 보내면, 해당 파일에 있는 index.html을 실행하게 됩니다.
서비스 설치 및 실행
[톰캣 설치 폴더]/bin 폴더에는 톰캣 실행과 종료에 관련된 파일들이 있습니다.
해당 경로에서 cmd 창을 키고, service.bat install [서비스 이름] 을 입력해 줍니다.
서비스가 잘 등록됐으면 윈도우의 서비스에서 확인할 수 있습니다.
왼쪽의 '시작' 버튼을 누르면 서비스가 바로 가동되며,
마우스 우클릭 > 속성 > 시작 유형을 '자동' 으로 설정하면 윈도우 시작 시 자동으로 톰캣 서비스가 실행됩니다.
등록했던 서비스를 삭제할 때에는 service.bat remove [서비스 이름] 명령어를 입력해 주면 됩니다.
브라우저에서 http://localhost:[설정했던 Connector 포트] 로 접속하면 빌드 결과물이 잘 출력되는 것을 볼 수 있습니다!😙
실제로 배포하려면 리액트 라우터 설정부터 해서 이것저것 더 설정해야겠지만, 일단 기본적인 사용법만 간단히 정리해봤습니다.
