📚 2년차 프론트엔드 개발자의 12주 기초 챌린지
Week 2: 배포 환경 이해하기 (Day 6-10)
🍳 레스토랑 비유로 시작하기
지금까지 등장한 인물:
- 셰프(프로세스) — 실제로 요리하는 사람 (
yarn start) - 주방 매니저(pm2) — 셰프를 관리, 쓰러지면 대타 투입
그런데 손님 응대는 누가 하나?
손님(사용자)이 레스토랑에 들어오면 바로 주방으로 가지 않는다.
홀 매니저가 손님을 맞이하고, 알맞은 주방으로 안내해준다.
이 홀 매니저가 바로 Nginx!
우리 레스토랑에는 주방이 두 개 있다:
- 5008번 주방 — 일반 손님용 (프로덕션)
- 5007번 주방 — 직원 시식용 (개발 확인)
홀 매니저(Nginx)가 "일반 손님은 5008번 주방, 직원은 5007번 주방"으로 안내하는 것.
1. Nginx가 뭐야?
Nginx = 요청을 받아서 알맞은 곳으로 전달해주는 웹 서버
역할 1: 포트 번호 숨기기
사용자 → https://my-site.com → Nginx → localhost:5008 (Next.js 앱)사용자는 포트 번호를 몰라도, 깔끔한 주소로 접속할 수 있다.
역할 2: 여러 앱으로 요청 분배하기
my-site.com → Nginx → localhost:5008 (프로덕션 앱)
dev.my-site.com → Nginx → localhost:5007 (개발 확인용)
api.my-site.com → Nginx → localhost:3000 (백엔드 API)서버 한 대에서 여러 앱을 동시에 운영할 수 있다!
2. 포트 번호를 안 쳐도 되는 이유
HTTP의 기본 포트는 80, HTTPS의 기본 포트는 443이다.
브라우저에서 https://my-site.com이라고 치면 자동으로 443번 포트로 요청을 보낸다.
Nginx가 이 443번 포트에서 대기하다가 받아서 내부 포트(5008)로 전달하는 것.
사용자: https://my-site.com (자동으로 443번 포트)
↓
Nginx: 443번에서 대기하다가 받음
↓
localhost:5008로 전달💡 localhost vs localStorage 헷갈리지 말기!
- localhost = 컴퓨터가 자기 자신을 가리키는 주소
- localStorage = 브라우저에 데이터를 저장하는 기능
완전 다른 개념이다!
3. 리버스 프록시란?
Nginx의 핵심 기능을 리버스 프록시(Reverse Proxy)라고 부른다.
- 프록시(Proxy) = 대리인
- 리버스(Reverse) = 서버 쪽의
리버스 프록시 = 서버를 대신해서 요청을 받아주는 대리인
| 개념 | 비유 |
|---|---|
| 포워드 프록시 | 손님 쪽 대리인 (VPN — 손님 신분을 숨겨줌) |
| 리버스 프록시 | 주방 쪽 대리인 (Nginx — 주방 위치를 숨겨줌) |
손님은 홀 매니저(Nginx)하고만 대화하고, 주방이 몇 번인지 전혀 모른다.
서버 내부 구조를 사용자에게 숨기는 것이 핵심!
4. Nginx 설정 파일 맛보기
server {
listen 80;
server_name my-site.com;
location / {
proxy_pass http://localhost:5008;
}
}| 줄 | 의미 | 비유 |
|---|---|---|
listen 80 | 80번 포트에서 요청 받기 | 홀 매니저가 정문에서 대기 |
server_name my-site.com | 이 도메인의 요청을 처리 | "우리 레스토랑 이름은 이거야" |
location / | 모든 경로에 대해 | 어떤 주문이든 |
proxy_pass http://localhost:5008 | 5008 포트로 전달 | "5008번 주방으로 보내" |
5. Nginx 있을 때 vs 없을 때
Nginx 없이
사용자가 포트 번호를 직접 알아야 한다:
http://회사IP:5008— 프론트엔드http://회사IP:3000— 백엔드 APIhttp://회사IP:4000— 어드민
Nginx 있으면
사용자는 깔끔한 주소만 알면 된다:
my-site.com→ 5008api.my-site.com→ 3000admin.my-site.com→ 4000
사용자는 포트 번호를 전혀 모르고, 서버 내부 구조도 모른다!
6. 전체 구조 연결 (Day 6~9 총정리)
사용자가 my-site.com 접속
↓
[ Nginx ] (홀 매니저) — 80/443번 포트에서 대기
↓
proxy_pass → localhost:5008
↓
[ pm2 ] (주방 매니저) — 프로세스 감시·관리
↓
[ Node.js / Next.js ] (셰프) — 실제 응답 생성
↓
HTML, CSS, JS 응답
↓
사용자 화면에 사이트 표시!| 역할 | 담당 | 하는 일 |
|---|---|---|
| 홀 매니저 | Nginx | 요청을 받아서 알맞은 앱으로 전달 |
| 주방 매니저 | pm2 | 프로세스 감시, 죽으면 재시작 |
| 셰프 | Node.js (Next.js) | 실제 페이지를 만들어서 응답 |
| 주방 건물 | 서버 컴퓨터 | 24시간 켜져 있는 컴퓨터 |
| 전화선 | SSH | 서버에 원격 접속하는 방법 |
📌 오늘의 핵심 정리
- Nginx — 요청을 받아서 알맞은 앱으로 전달 (홀 매니저)
- 리버스 프록시 — 서버를 대신해서 요청을 받는 대리인 (서버 내부 구조 숨김)
- 포트 안 쳐도 되는 이유 — HTTP(80), HTTPS(443)이 기본 포트 + Nginx가 내부 포트로 전달
- 여러 앱 분배 — 도메인에 따라 다른 포트의 앱으로 연결 가능
- 전체 흐름 — 사용자 → Nginx → pm2 → Node.js → 응답
💡 프론트엔드 개발자가 Nginx를 직접 설정할 일은 많지 않다.
중요한 건 전체 구조에서 Nginx가 어디에 있고 뭘 하는지 아는 것!
🔮 다음 시간 (Day 10): 로그 확인하기
사이트에 문제가 생겼을 때 "뭐가 잘못됐는지" 어떻게 찾는가?
병원의 환자 차트처럼 서버에도 모든 기록이 남는 로그가 있다!
