Nginx

최근 진행중인 스프링 웹 프로젝트에서 Nginx를 도입했다. 사실 도입한 가장 큰 이유는 CORS 문제 때문인데 먼저 CORS 문제가 왜 발생하는지부터 알아보자. CORS는 브라우저에서 출처(origin)이 다르면 요청을 js에 전달하지 않는 브라우저 중심의 보안 정책이다.

origin은

• 프로토콜 (http, https)
• 도메인 (example.com, localhost)
• 포트 (80, 8080)

세 가지 요소로 구성되는데, 이 중 하나라도 다르면 다른 출처로 취급된다. 그리고 이것이 front와 back을 분리해서 사용할 때 CORS 문제가 발생하는 이유이다.

우리가 vue 어플리케이션을 ‘npm run dev’ 로 작동하면 개발 서버에서 vue가 실행되고, localhost:5173 같은 주소에서 제공된다. 이 때 백엔드 주소가 localhost:8080 이면 두 출처는 포트가 달라 CORS 문제가 발생한다.

여기서 nginx와 같은 리버스 프록시의 이점을 사용할 수 있다. nginx와 같은 리버스 프록시에서는 정적 리소스를 nginx가 담당해서 브라우저로 보내주고, api 호출같은 경우는 백엔드 서버와 통신하여 받아온 후 브라우저로 보내준다. 따라서

프론트엔드: http://example.com 백엔드 API 요청: http://example.com/api/users

와 같이 모든 요청이 example.com의 특정 포트로 전송되므로 CORS 문제가 발생하지 않는다.

또한 프로그래밍에서 사이에 레이어를 하나 둔다는 것은 그 자체로 많은 이점을 제공한다. 그것만으로도 버퍼링, 캐싱, lazy한 처리 등을 지원해서 많은 최적화가 가능해진다.

거기에 더해 nginx는 서버를 여러 대 운용할 때 진가를 나타낸다. 다양한 알고리즘을 통해 로드 밸런싱을 지원하고, 서버를 추가해도 수평적 확장이 용이하며, 스프링 어플리케이션 외에 추가적인 보안을 제공하고, url을 리다이렉션 하는 구조로 내부 서비스를 은닉하고 정적 리소스를 효율적으로 처리하고 무중단 설정변경이 가능하고 등등…

현재는 어차피 나중에 도입할거 지금부터 써서 수혜를 보자는 식으로 CORS 문제 해결에만 사용하고 있지만, 추후 서버를 여러 대 가용하면 로드밸런싱 등 기능을 하나씩 써볼 예정이다.