옛날 자바 개발자 입장에서 보면, 지금의 프런트엔드/백엔드 환경은 꽤 다르게 느껴집니다. 톰캣과 Vite를 비교하면서, Nginx와 Express가 어떤 역할을 하는지도 함께 정리해봤습니다.
먼저 톰캣(Tomcat)은 자바 시절의 핵심 WAS였습니다. 요청을 받아 JSP/서블릿을 실행하고 HTML을 생성해 내려주는, 운영 환경의 중심 서버였죠.
반면 Vite는 개발용 서버이자 빌드 도구입니다. 개발할 때는 빠르게 코드 수정 반영(Hot Reload)을 제공하고, 배포 시점에는 npm run build를 통해 정적 파일(js, css, html)을 만들어냅니다. 운영 환경에서 직접 서버로 쓰이지 않고, 빌드 결과물만 남기는 것이 특징입니다.
그렇다면 Vite와 Nginx/Express의 차이는 뭘까요?
- Vite는 개발 단계 전용 도구 (개발 서버 + 빌드).
- Nginx는 운영 환경에서 정적 파일을 전달하는 서버. Apache처럼 파일을 “배달”하는 역할이지만 훨씬 가볍고 리버스 프록시에도 특화돼 있습니다.
- Express는 Node.js 기반의 백엔드 프레임워크로, API를 구현하고 DB 연결, 인증, 비즈니스 로직을 담당합니다. 필요하다면 React 빌드 결과물까지 함께 서빙할 수 있습니다.
즉, 과거 톰캣이 개발/운영/배포를 모두 책임졌다면, 지금은 역할이 나뉘었습니다.
- 개발: Vite
- 배포(정적 파일 서빙): Nginx
- 비즈니스 로직(API): Express
그럼 React 코드에서 데이터를 어떻게 받아올까요?
React는 브라우저에서 실행되며 fetch나 axios로 API 요청을 보냅니다. 이 요청은 Express 서버에 전달되고, Express는 DB와 연결해 데이터를 내려줍니다. React는 받은 JSON 데이터를 화면에 반영하죠.
흐름은 이렇게 볼 수 있습니다:
React → Nginx → Express → Database → Express → React
운영 환경에서는 Nginx가 정적 파일을 서빙하고, API 요청도 리버스 프록시로 Express에 연결해줍니다. 이렇게 하면 브라우저 보안 정책(CORS) 문제를 피할 수 있고, 하나의 도메인에서 정적 파일과 API를 모두 제공할 수 있어 관리가 편리합니다.
정리하면, 예전에는 톰캣이 화면과 로직을 모두 처리했지만 지금은 프런트(UI)는 React, 데이터는 Express, 정적 파일과 API 연결은 Nginx, 개발 편의성은 Vite로 분리된 구조라고 보시면 됩니다.