[Docker] 06. Nginx 설정부터 React · Spring 연동까지 정리

[Docker] 06. Nginx 설정부터 React · Spring 연동까지 정리

Docker로 백엔드와 DB를 실행했다면, 이제 실제 배포 구조에 가까워질 차례다.

이번 글에서는 Nginx 개념부터 React + Spring 연동, 그리고 404 에러 해결까지 한 번에 정리해본다.

---

1. Nginx란 무엇인가?

Nginx는 웹 서버이자 리버스 프록시 서버다.

사용자의 요청을 먼저 받아서 백엔드 서버(Spring 등)로 전달해주는 역할을 한다.

구조는 보통 다음과 같다.

[사용자] → [Nginx] → [Spring 서버]

---

2. 왜 Nginx가 필요한가?

• 정적 파일(React build 파일) 빠르게 제공
• 백엔드 서버를 외부에 직접 노출하지 않음
• 포트 통합 (80번 하나로 관리 가능)
• SSL 적용 시 필수

---

3. Docker로 Nginx 실행

docker run -d -p 80:80 nginx

기본 Nginx 서버가 실행된다.

---

4. React + Spring 연동 구조

보통 이렇게 구성한다.

• React → build 생성
• Nginx → React 정적 파일 제공
• /api 요청 → Spring 서버로 전달

---

5. nginx.conf 기본 설정 예시

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://backend:8080/;
    }
}

---

설명

location / → React 정적 파일 처리

try_files $uri /index.html; React Router 404 방지용 설정

location /api/ → 백엔드 서버로 요청 전달

---

6. docker-compose 예시

version: '3'

services:
  backend:
    build: .
    ports:
      - "8080:8080"

  nginx:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./build:/usr/share/nginx/html
    depends_on:
      - backend

---

7. React 404 에러 해결 방법

React Router를 사용하는 경우, 새로고침 시 404가 발생할 수 있다.

이때 반드시 nginx 설정에

try_files $uri /index.html;

을 추가해야 한다.

이 설정이 없으면 서버가 해당 경로 파일을 찾다가 404를 반환한다.

---

8. 전체 흐름 정리

• React build 생성
• Spring 서버 실행
• Nginx가 정적 파일 제공
• /api 요청은 Spring으로 전달

이 구조가 기본적인 실전 배포 구조다.

---

마무리

Docker는 실행 환경을 통일해주고, Nginx는 요청을 정리해주는 역할을 한다.

이 구조를 이해하면 실제 배포 환경과 거의 비슷한 구성을 만들 수 있다.