🧱 프론트와 백엔드, Nginx, 톰캣의 실제 배포 구조 이해하기

 

프론트엔드(React)와 백엔드(Spring Boot)를 로컬에서 잘 개발하고 있지만,
"실제로 사용자들이 접속하는 웹서비스는 어떻게 배포되고 동작할까?"
"왜 Nginx를 쓰고, 톰캣은 뭔데, Apache는 또 뭐지?"
이런 궁금증이 한 번쯤 생기셨다면, 이 글을 읽어보는걸 추천합니다.

 

---

✅ 1. 로컬 개발 환경의 요청 흐름

개발 중일 때는 프론트와 백엔드를 따로 띄워서 작업하죠.

[브라우저]
   ↓ (http://localhost:3000)
[프론트 서버 (React 개발 서버)]
   ↓ API 요청 (fetch('/api/users'))
[백엔드 서버 (Spring Boot - http://localhost:8080)]

• 프록시 설정을 통해 프론트가 백엔드로 API 요청을 넘깁니다.
• 개발자에게는 빠르고 편리하지만, 실 서비스 환경에는 적합하지 않습니다.

---

✅ 2. 실제 배포 구조 (AWS EC2 기준)

실제 사용자들이 접속하는 배포 환경에서는 아래처럼 구성됩니다.

[사용자 브라우저]
   ↓ HTTPS 요청 (https://myapp.com)
[Nginx (웹 서버, 리버스 프록시)]
   ├─▶ 정적 파일 응답 (React build 결과)
   └─▶ API 요청은 Spring Boot로 프록시
               ↓
       [Spring Boot (내장 Tomcat WAS)]
               ↓
         [DB (MySQL, RDS 등)]

---

🧩 각 구성요소 역할 정리

구성 요소 역할

Nginx	정적 파일 빠르게 응답, HTTPS 인증, 백엔드 프록시, 로드밸런싱
Spring Boot	백엔드 로직 실행, DB 처리. 내장 톰캣으로 WAS 기능 수행
톰캣(Tomcat)	Java 기반 WAS, Spring Boot에 내장되어 별도 설치 없이 사용
Apache HTTP Server	예전에는 정적 웹서버로 사용되었지만, 요즘은 Nginx가 대세
EC2 (AWS)	전체 서비스를 구동하는 가상 서버

---

✅ 실제 요청 시나리오 예시

예: 게시판 목록을 보는 경우

1. 사용자가 브라우저에서 https://myapp.com 접속
2. Nginx가 React 정적 파일(index.html)을 응답
3. React 앱 실행 → /api/posts API 요청 발생
4. Nginx가 API 요청을 Spring Boot로 전달 (proxy_pass)
5. Spring Boot가 DB에서 데이터 조회 후 응답
6. React가 데이터를 받아서 브라우저에 표시

---

❓ 자주 묻는 질문 (FAQ)

Q. Spring Boot만으로 정적 파일 서빙하면 안 되나요?

가능은 하지만, Nginx를 쓰는 게 더 빠르고 효율적입니다.

• Nginx는 C로 만들어져 정적 파일 서빙 속도가 훨씬 빠름
• HTTPS, Gzip 압축, 오류 페이지, 로드밸런싱 등 다양한 기능 제공
• 보안, 확장성 면에서도 Nginx가 앞섬

Q. 톰캣은 따로 설치해야 하나요?

Spring Boot는 톰캣을 내장하고 있어, 별도 설치 없이 jar 파일 실행만으로 톰캣이 뜹니다.

---

실무 예시 - 디렉토리 구성

/home/ec2-user/
├── frontend/
│   └── build/         ← React 빌드 결과
├── backend/
│   └── app.jar        ← Spring Boot 실행 파일
├── nginx/
│   └── nginx.conf     ← 웹서버 설정

---

간단한 Nginx 설정 예시

server {
    listen 80;
    server_name myapp.com;

    location / {
        root /home/ec2-user/frontend/build;
        index index.html;
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

---

마무리 요약

• Spring Boot는 WAS 기능을 내장한 백엔드 서버입니다.
• 정적 파일도 서빙할 수 있지만, Nginx를 함께 쓰면 더 빠르고 안정적인 아키텍처를 구성할 수 있습니다.
• Nginx는 웹서버, 리버스 프록시, HTTPS 처리, 로드밸런싱 등 멀티 역할의 핵심 구성요소입니다.
• 실제 배포 시에는 EC2 같은 서버에서 이 모든 구성 요소가 분리된 책임으로 작동합니다.