[Nginx] 필수 개념 요약

Nginx란? (필수 개념 요약)

Nginx(엔진엑스)는 초고성능 웹 서버입니다.
보통 아래의 용도로 사용됩니다.

역할	설명
📁 정적 파일 서버	HTML, JS, CSS, 이미지 등을 브라우저에 빠르게 서빙
🔁 Reverse Proxy	브라우저 요청을 Flask/Django/Node 등 백엔드 서버에 중계
🔐 SSL Termination	HTTPS 처리를 대신 수행
🔄 로드밸런서	다수의 서버에 요청 분산

 

---

목표

역할	담당
React 앱 (빌드된 HTML/CSS/JS)	Nginx가 직접 서빙
/dashboard, /admin 같은 경로	Nginx가 index.html 반환 (SPA fallback)
/api/... 같은 API 경로	Nginx가 Flask로 프록시 전달 (Reverse Proxy)
Flask	API 응답만 처리

 

---

실무에서 보편적으로 쓰는 구조

React + Flask + Nginx 조합은 배포에서 아주 안정적인 패턴입니다.

• SPA 새로고침 문제 완전 해결
• 보안, 로드밸런싱, 캐싱 등 확장성도 좋음
• React, Vue, Angular + Flask, FastAPI, Node 다 이렇게 엮습니다

---

동작 흐름 요약

[Client Browser]
       │
       ▼
   http://IP:80
       │
       ▼
   ┌──────────┐
   │  Nginx   │
   └──────────┘
     │       │
     ▼       ▼
React 파일   → Flask API (/api/**)
(index.html)   http://localhost:포트번호​

 

---

 

Nginx 설정 예시 (default.conf)

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # React SPA fallback
    location / {
        try_files $uri /index.html;
    }

    # Flask API 프록시
    location /api/ {
        proxy_pass http://flask:포트번호;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

---

각 컴포넌트 Dockerfile (간단 예시)

🔹 Flask용 Dockerfile

FROM python:3.10-slim
WORKDIR /app
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 포트번호
CMD ["python", "app.py"]

🔹 Nginx용 Dockerfile

FROM nginx:alpine
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
COPY webpage/build /usr/share/nginx/html

---

최종적으로는 docker-compose 사용 (3 컨테이너 연결)

• frontend (nginx)
• backend (flask)
• network 공유

---

결론

• 정적 파일, fallback, proxy 분리 → 확장성과 안정성 최고
• 실무에서 가장 많이 쓰는 아키텍처 패턴
• "SPA 새로고침 문제"도 완전 해결