React 작업 Dockerizing: 실전 DevOps 구현

Source: Dev.to

소개

이 글에서는 Docker‑화된 React 작업 관리자를 처음부터 구축하는 과정을 살펴보며, 컨테이너화, 멀티‑스테이지 빌드, 프로덕션‑레디 배포와 같은 실무 DevOps 관행을 보여줍니다.

프로젝트 개요

• 프론트엔드 – Vite 로 만든 React 애플리케이션을 Nginx 로 서비스합니다.
• 백엔드 – 향후 통합을 위한 플레이스홀더 API.
• 오케스트레이션 – Docker Compose 로 두 컨테이너를 함께 실행합니다.

이 프로젝트는 DevOps 실습용 연습이자 프로덕션‑레디 애플리케이션 템플릿으로 활용될 수 있습니다.

사전 요구 사항

• Docker 20+
• Docker Compose 2+
• Node 20 (Vite 에 필요)

React 프론트엔드 설정

# 프론트엔드 디렉터리를 만들고 Vite React 프로젝트 초기화
cd frontend
npm create vite@latest . -- --template react
npm install

로컬에서 앱이 정상 동작하는지 확인합니다:

npm run dev

기본 Vite UI(카운터와 로고)가 표시되어야 합니다.

Dockerfile (멀티‑스테이지 빌드)

# ---- Build stage ----
FROM node:20-alpine AS build
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Copy source files and build
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

참고: 원본 Dockerfile 은 node:18 을 사용했는데, 이 때문에 Vite 빌드 오류가 발생했습니다. Vite 는 Node 20+ 가 필요합니다.

Docker Compose 설정

version: "3.9"

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    env_file:
      - .env
    networks:
      - devops-net

networks:
  devops-net:
    driver: bridge

설명

• frontend – React 앱을 빌드하고 Nginx 로 컨테이너 내부 포트 80 에서 제공하며, localhost:3000 으로 외부에 노출됩니다.
• backend – 플레이스홀더 API 로 ./backend 에서 빌드되며, localhost:5000 에서 접근할 수 있습니다.
• depends_on 은 프론트엔드보다 백엔드가 먼저 시작되도록 보장합니다.
• 컨테이너들은 devops-net 네트워크를 통해 서비스 이름(frontend, backend)을 사용해 통신합니다.

애플리케이션 실행

# 두 컨테이너를 포그라운드에서 빌드 및 시작
docker compose up --build

# 혹은 백그라운드(detached) 모드로 실행
docker compose up -d --build

• 프론트엔드 URL:
• 백엔드 URL:

주요 정리

• 멀티‑스테이지 Docker 빌드는 빌드 환경과 런타임 환경을 분리함으로써 가벼운 프로덕션 이미지를 생성합니다.
• Node 버전 관리가 중요합니다; Vite 는 Node 20 이상이 필요합니다.
• Docker Compose 는 다중 서비스 오케스트레이션을 간소화하고 네트워킹을 자동으로 처리합니다.
• Nginx 는 React 프로덕션 빌드의 정적 파일을 제공하는 효율적인 서버입니다.

이 단계들을 따라 하면 추가 개발 및 배포를 위한 완전한 컨테이너화된 React 작업 관리자를 갖추게 됩니다.