[90] 바인드 마운트로 React 컨테이너에 대한 라이브 소스 코드 업데이트하기

 

[90] 바인드 마운트로 React 컨테이너에 대한 라이브 소스 코드 업데이트하기

React 컨테이너의 실시간 소스 코드 업데이트 설정

 

 

바인드 마운트를 통한 개발 효율성 향상

기본 설정 방법

docker run --name goals-frontend \
  --rm -p 3000:3000 -it \
  -v /로컬경로/src:/app/src \
  goals-react

바인드 마운트의 목적

• 로컬 소스 코드와 컨테이너 내부 코드 동기화
• 코드 변경 시 실시간 반영
• 이미지 재빌드 없이 개발 가능

 

운영체제별 추가 설정

Windows에서 필요한 설정

docker run --name goals-frontend \
  --rm -p 3000:3000 -it \
  -v C:\Users\user\path\to\frontend\src:/app/src \
  -e CHOKIDAR_USEPOLLING=true \
  goals-react

• CHOKIDAR_USEPOLLING=true: 파일 변경 감지를 위한 폴링 활성화
• Windows 파일 시스템에서는 이 설정이 없으면 변경 감지가 제대로 작동하지 않음

 

Node.js 백엔드의 경우 비교

// package.json
"scripts": {
  "start": "nodemon -L server.js"
}

• -L 플래그: Legacy 감시 모드 활성화 (유사한 목적)

 

주의사항

성능 고려

• 폴링 방식은 시스템 리소스를 더 많이 사용
• 대규모 프로젝트에서는 성능 영향 가능성

마운트 범위

• /src 폴더만 마운트하면 설정 파일 변경은 반영되지 않음
• 필요에 따라 추가 폴더/파일도 마운트 고려

Node.js 버전 호환성

• 최신 Node.js 버전에서는 OpenSSL 관련 오류 발생 가능
• 필요시 -e NODE_OPTIONS=--openssl-legacy-provider 추가

 

이러한 설정으로 개발 중 코드 변경사항을 실시간으로 확인하며 효율적인 개발 환경을 구축할 수 있습니다.

 

 

참고

https://www.udemy.com/course/docker-kubernetes-2022