[TIL] 내일배움캠프 104일차_[Docker] Docker를 활용한 React 개발 및 배포 환경 설정

👀Today I Learn

• Docker를 이용하여 React 프로젝트를 개발하고 배포하는 방법을 정리
  • 개발 환경에서는 코드 변경 시 자동 반영되도록 설정
  • 배포 환경에서는 정적 파일을 Nginx로 서빙할 수 있도록 구성

개발 환경 vs 배포 환경 차이점

개발 환경 (Development)

• npm start를 사용하여 개발 서버 실행
• 코드 변경 시 자동 반영
• docker-compose.yml에서 3000:3000 포트 매핑

배포 환경 (Production)

• npm run build 후 정적 파일을 생성하여 Nginx로 서빙
• 변경된 코드가 바로 반영되지 않으며, 빌드 후 배포 필요
• docker-compose.prod.yml에서 3000:80 포트 매핑

개발 환경 설정

Dockerfile.dev

• frontend/Dockerfile.dev front 앱 최상단에 위치

    # Node.js 환경 설정
    FROM node:18
  
    # 작업 디렉토리 설정
    WORKDIR /app
  
    # package.json 및 package-lock.json 복사 후 의존성 설치
    COPY package.json package-lock.json ./
    RUN npm install
  
    # 프로젝트 코드 복사
    COPY . .
  
    # 개발 서버 실행 (코드 변경 시 자동 반영됨)
    CMD ["npm", "start"]
  

docker-compose.yml

version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - "3000:3000"  # 개발 환경에서는 React Dev Server가 3000 포트에서 실행됨
    environment:
      - REACT_APP_API_URL=http://localhost:8000
    command: npm start
    stdin_open: true
    tty: true
    networks:
      - steamate-network

networks:
  steamate-network:
    driver: bridge

실행

docker-compose up --build

배포 환경 설정

Dockerfile.prod

# 1. Node.js 환경에서 React 빌드
FROM node:18 AS build

# 2. 작업 디렉토리 설정
WORKDIR /app

# 3. package.json 및 package-lock.json 복사 후 의존성 설치
COPY package.json package-lock.json ./
RUN npm install

# 4. 프로젝트 코드 복사 및 React 빌드 실행
COPY . .
RUN npm run build

# 5. Nginx를 사용하여 정적 파일 서빙
FROM nginx:latest
COPY --from=build /app/build /usr/share/nginx/html

# 6. Nginx 실행
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker-compose.prod.yml

version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.prod
    ports:
      - "3000:80"  # 배포 환경에서는 Nginx가 80 포트에서 실행됨
    networks:
      - steamate-network

networks:
  steamate-network:
    driver: bridge

배포 실행 방법

docker-compose -f docker-compose.prod.yml up --build

💡Today I Thought

오늘의 체크리스트

• 알고리즘 코드카타 1문제
• SQL 코드카타 1문제
• Frontend 개발환경 구성
• TIL 작성

회고

 오늘은 프론트만 하다가 끝났는데도 뿌듯하다. 원래 환경 설정하면 다 한거라고 했어.. 내일은 뼈대 다 구축해야겠다.