React 와 Spring boot 서버

회사에서 개발하면서 삽질한 내용을 적어보고자 한다.

 

프론트는 React + Typescript 를 사용해서 SPA 구조로 개발했고, Spring boot 로 REST api 를 개발하였다, 내장 톰캣을 사용해, 프론트와 서버를 같이 jar 로 말아서 배포해야했다.

 

사실, 배포 단위를 나누는 것이, 변화에 대한 수용에 용이하게 해주어서, 프론트와 백을 각각의 웹 어플리케이션 서비스로 띄우고, 웹서버를 앞단에 두어서 리버스 프록시 설정을 하는게 좋다. (보안상으로도 좋다고 한다)

 

예를들어, 프론트를 3000번 포트에 띄우고, 스프링 서버를 8080포트에 각각 띄운다음에, nginx 설정을 통해서, /api/ 로 요청이 들어오면 8080포트로, 그 외에는 3000번 포트로 요청을 보내주게끔 하면, 포트 번호를 직접 노출하지 않고도 처리가 가능하다. 

 

참고로 nginx 는 이 리버스 프록시 뿐만아니라 다양한 기능을 제공해준다.

1. 로드 밸런싱 : 요청이 많은 사이트를 운영하는 경우 하나의 서버가 아닌 여러 대의 서버를 두고 운영을 하게 됩니다. 그럴 경우 특정 서버에만 요청이 몰리지 않도록 하는 역할
2. 공격으로 부터 보호 : 웹사이트나 서비스에서 실제 서버의 IP 주소를 필요로 하지 않기 때문에 DDoS와 같은 공격이 들어와도 nginx를 공격하게 되어 실제 서버에 공격이 들어오는 것을 막을 수 있다.
3. 캐싱 : 콘텐츠를 캐싱할 수 있어 결과를 더 빠르게 응답하여 성능을 높일 수 있다.

 

그렇지만, 이번에 개발한 것은 가벼운 서비스이고 기능도 많지 않아 하나의 서버에 하나의 포트로 배포를 하기로 했다. 

 

여기서 겪은 문제점이, SPA 구조로 되어있다 보니, SPA는 react-router-dom을 사용해서, 웹 브라우저에서 액세스 할 수있는 하나의 색인 파일(index.html)만 사용한다고 한다. 그런 다음 HTML5 히스토리 API를 사용하여 JavaScript를 사용하여 애플리케이션의 탐색을 일반적으로 처리한다. 

 

그런데, 브라우저에서 새로고침을 하면, 색인 파일을 무시하고, 웹서버에서 해당 경로의 파일을 탐색하고, 따라서 404 에러가 뜬다.

 

해당 문제를 해결하기 위해서는 nginx 설정이 필요하다.

 

site-available 의 nginx.conf 파일에 다음과 같이 추가한다. root 경로를 설정한 디렉터리 안에 프론트엔드 빌드파일들이 있어야 한다. 요청된 경로에 파일이 없다면, 색인 파일로 보내버리도록 설정한다.

server {
	...
    
    location / {
    	root html; // static file 경로
        index index.html index.htm; // 인덱스파일명
        try_files $uri $uri/ /index.html;
    }
    
    ...
}

 

며칠동안 끙끙대고 있었던 것이 해결되니 마음이 편안해졌다 :)