새로고침/라우팅 중 nginx 404

환경

• Docker Compose를 통해 React 앱을 배포 중
• nginx를 통해 하위 도메인으로 프록시 중 (DOMAIN/REACT)

---

문제

• 새로고침 혹은 라우팅 중 404 Not Found 발생

---

해결법

하위 URL로 접속하더라도 루트와 같은 정적 파일을 제공하도록 한다.

1. 프론트엔드 폴더 내에 별도의 nginx.conf 파일 작성

nginx.conf

server {
    listen 80;

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

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

2. nginx.conf 파일 또한 컨테이너 내부에 복사

Dockerfile

FROM node:22 AS build-stage

WORKDIR /app

COPY package.json package-lock.json ./
RUN yarn install

COPY . .
RUN yarn build

FROM nginx:latest
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf