소개

안녕하세요! 이번 포스트에서는 AWS EC2와 Docker를 사용하여 React 애플리케이션을 배포하는 과정에서 발생한 404 오류 문제를 해결하는 방법을 공유하고자 합니다. 특히, Nginx 설정 파일이 React 프로젝트 내부에 있을 때만 성공하고, Nginx를 React 프로젝트에 포함시키지 않았을 때 실패했던 이유를 중점적으로 다룹니다.

1. 문제 상황: Nginx에서 React 앱의 404 오류

1.1 404 오류란?

404 오류는 웹 서버가 요청된 페이지를 찾을 수 없음을 나타냅니다. React와 같은 Single Page Application(SPA)에서는 모든 경로 요청을 하나의 HTML 파일로 처리합니다. 그러나 서버 설정이 이를 고려하지 않으면 경로 요청 시 404 오류가 발생할 수 있습니다.

1.2 SPA와 클라이언트 측 라우팅

SPA는 모든 페이지 로드가 하나의 HTML 파일을 통해 이루어집니다. 페이지 간 전환은 클라이언트 측에서 JavaScript로 관리되기 때문에, 브라우저의 경로 요청은 서버가 아닌 클라이언트에서 처리해야 합니다. 서버가 이 요청을 적절히 처리하지 못하면 404 오류가 발생합니다.

2. Nginx 설정 파일을 React 프로젝트에 포함시키기

2.1 Nginx란?

Nginx는 고성능 웹 서버로, 정적 파일을 서빙하고, 리버스 프록시 및 로드 밸런싱 기능을 제공합니다. React와 같은 SPA를 서빙할 때 주로 사용됩니다.

2.2 Nginx 설정 파일을 React 프로젝트 내부에 포함시키기

React 프로젝트 내부에 Nginx 설정 파일을 포함시키면, Dockerfile에서 이 파일을 쉽게 참조하고 Nginx 설정을 적용할 수 있습니다. 다음은 Nginx 설정 파일을 React 프로젝트에 포함시키는 예시입니다.

 

server {
    listen 80;
    server_name 내도메인

    root /usr/share/nginx/html; # React 정적 파일 경로

    location / {
        try_files $uri $uri/ /index.html; # SPA 라우팅 문제 해결
        autoindex off; # 디렉토리 인덱스 나열하지 않기
    }

    error_page 404 /404.html;
    location = /404.html {
        root /usr/share/nginx/html; # 404 에러 페이지의 실제 경로
        internal;
    }
}

 

2.3 Dockerfile에서 Nginx 설정 파일 참조

Nginx 설정 파일을 React 프로젝트 내부에 포함시켰을 때, Dockerfile에서 이를 참조하는 방식입니다. Dockerfile은 빌드 과정에서 Nginx 설정 파일을 Nginx의 설정 디렉토리로 복사합니다.

 

# Build stage
FROM node:16 AS build-stage
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM nginx:1.21.0-alpine AS production-stage
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

3. Nginx를 React 프로젝트에 포함시키지 않은 경우 발생한 문제

3.1 문제 설명

Nginx를 React 프로젝트에 포함시키지 않고 Docker Compose에서 Nginx와 React를 별도로 관리했을 때, React 프로젝트가 Nginx 컨테이너 내에 정상적으로 복사되지 않는 문제가 발생했습니다. 이는 volumes 설정이 올바르게 적용되지 않았거나, Docker Compose 설정 파일에서 경로 참조가 정확하지 않아서 발생할 수 있습니다.

3.2 Nginx 설정 파일을 Docker Compose에 따로 추가했을 때의 설정

아래는 React 프로젝트와 Nginx를 별도의 컨테이너로 관리하는 docker-compose.yml 파일입니다.

 

services:
  nginx:
    image: nginx:1.21.0-alpine
    ports:
      - "80:80" # 외부 포트 80을 Nginx의 80 포트로 매핑
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf # Nginx 설정 파일
      - ./react-app/build:/usr/share/nginx/html # React의 정적 파일 디렉토리 매핑
    depends_on:
      - db
      - springboot-app
    networks:
      - my-network

  react-app:
    image: kkm9291/react-app:latest
    expose:
      - "3000" # React 앱의 내부 포트
    networks:
      - my-network

이 설정에서 Nginx는 default.conf 설정 파일과 React의 빌드 파일을 자신의 컨테이너로 복사합니다.

3.3 발생한 문제의 원인

Nginx 설정 파일이 React 프로젝트 외부에 있으면 다음과 같은 문제들이 발생할 수 있습니다:

  • 경로 문제: Docker Compose에서 volumes 경로가 잘못 참조되거나, 상대 경로가 올바르게 설정되지 않아 Nginx가 React의 정적 파일을 찾지 못할 수 있습니다.
  • 타이밍 문제: Nginx 컨테이너가 React 컨테이너보다 먼저 시작되거나, React 컨테이너가 빌드되기 전에 Nginx가 설정을 적용하려고 시도하면 문제가 발생할 수 있습니다.
  • 권한 문제: Docker가 호스트 파일 시스템에서 컨테이너로 파일을 복사하는 과정에서 권한 문제가 발생할 수 있습니다. 특히, 컨테이너가 파일을 읽거나 쓸 권한이 없으면 문제가 발생할 수 있습니다.

4. 문제 해결 후 결과 확인

4.1 Nginx 컨테이너 내부 확인

Nginx 컨테이너 내부의 파일 구조를 확인하여 React 애플리케이션이 올바르게 배포되었는지 확인했습니다.

 

docker exec -it 앱이름-nginx-1 /bin/sh
cd /usr/share/nginx/html
ls -l

 

이 명령어를 통해 빌드된 React 파일들이 Nginx의 정적 파일 디렉토리에 존재하는 것을 확인할 수 있었습니다.

 

결론

이 포스트에서는 AWS EC2와 Docker를 사용하여 React 애플리케이션을 배포하는 과정에서 발생한 404 오류를 해결하는 방법을 다뤘습니다. Nginx 설정 파일의 위치가 React 프로젝트 내부에 있을 때만 성공한 이유와, Nginx를 React 프로젝트에 포함시키지 않았을 때 발생한 문제의 원인을 설명했습니다. 

저작자표시

+ Recent posts

티스토리툴바