도커는 개발 환경을 표준화하고 컨테이너를 통해 손쉽게 애플리케이션을 실행할 수 있는 도구입니다. React와 TypeScript로 개발하는 프론트엔드 프로젝트에 도커를 적용하려면 다음 단계를 따라 진행할 수 있습니다.

1. 도커 설치

도커를 아직 설치 중이라면, Docker 공식 사이트에서 OS에 맞는 설치 파일을 다운로드하여 설치합니다. 설치 후 Docker Desktop을 실행하고 정상적으로 작동하는지 확인합니다.

https://www.docker.com/

2. React + TypeScript 프로젝트를 위한 Dockerfile 생성

프로젝트 루트 디렉토리에 Dockerfile을 생성합니다.

# Node.js 이미지를 베이스로 사용
FROM node:18-alpine

# 컨테이너 내 앱 디렉토리 생성
WORKDIR /usr/src/app

# package.json과 package-lock.json 복사
COPY package*.json ./

# 의존성 설치
RUN npm install

# 애플리케이션 소스 코드 복사
COPY . .

# 개발 서버 실행
CMD ["npm", "start"]

# 컨테이너가 노출할 포트
EXPOSE 3000

3. docker-compose.yml 파일 생성

개발 시 여러 컨테이너를 관리하기 편하도록 docker-compose.yml 파일을 작성합니다.

version: '3.9'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000" # 호스트의 3000 포트를 컨테이너의 3000 포트에 매핑
    volumes:
      - .:/usr/src/app # 로컬 파일 변경 시 컨테이너에 반영
      - /usr/src/app/node_modules # node_modules는 볼륨 매핑 제외
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true # 파일 변경 감지를 위한 설정
4. 프로젝트의 package.json 스크립트 수정
React 프로젝트가 도커 컨테이너 내에서도 제대로 실행되도록 설정을 추가합니다. 예를 들어, start 스크립트를 수정합니다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

5. 도커 빌드 및 실행

도커 환경을 실행하려면 다음 명령어를 사용합니다.

빌드

docker-compose build

실행

docker-compose up

6. 도커 환경 확인

브라우저에서 http://localhost:3000으로 접속하여 React 앱이 정상적으로 실행되는지 확인합니다.
코드 수정 시 변경 사항이 자동으로 반영되는지 확인합니다.

7. 추가 고려 사항

환경 변수: .env 파일을 사용하고, docker-compose.yml에서 이를 참조하도록 설정합니다.

생산 환경 설정: Dockerfile에 RUN npm run build를 추가하고, Nginx 또는 다른 웹 서버를 통해 빌드된 파일을 서빙할 수 있도록 설정합니다.