도커로 Node.js + React 앱 컨테이너화: 환경 불일치 문제 해결
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
DevOps
대상자
- 대상자: Node.js/React 개발자, DevOps 엔지니어, 팀원 온보딩 담당자
- 난이도: 중급 (Docker 기본 지식 필요)
핵심 요약
- 핵심 개념:
Dockerfile
과docker-compose.yml
을 통해 환경 일관성 및 배포 신뢰성 확보 - 핵심 기술:
npm ci
(결정적 설치) >npm install
(의존성 불확실성 제거)- 멀티스테이지 빌드 (프론트엔드: Node.js → NGINX + 정적 파일)
docker compose up
명령으로 로컬/배포 환경 동일화- 보안 강화:
USER node
명령으로 루트 사용자 권한 제거
섹션별 세부 요약
1. 백엔드 Dockerfile 구성
FROM node:20-alpine
기반으로 빌드npm ci --only=production
으로 의존성 설치EXPOSE 5000
명령으로 서버 포트 노출CMD ["node", "server.js"]
으로 실행 명령 정의
2. 프론트엔드 Dockerfile 구성
- 멀티스테이지 빌드:
- 빌더 단계: npm run build
로 정적 파일 생성
- 최종 이미지: nginx:alpine
기반으로 정적 파일 배포
COPY --from=builder
명령으로 빌드 결과 복사nginx.conf
파일로 서버 설정 정의
3. docker-compose.yml 구성
- 서비스 정의:
- frontend
서비스: 3000:80
포트 매핑
- backend
서비스: 5000:5000
포트 매핑
- 환경 변수:
DATABASE_URL
및NODE_ENV
설정 depends_on
명령으로 서비스 의존성 관리
4. 최적화 및 보안 강화
- 핫 리로드:
volumes
로 소스 코드 실시간 반영 - 이미지 축소:
apk add
및rm -rf /var/cache/apk/*
로 임시 파일 제거 - 보안 강화:
USER node
명령으로 루트 권한 제거
5. 주의사항 및 실수 예방
- 캐시 문제:
package.json
복사 순서로 인한 빌드 지연 - 환경 혼동:
devDependencies
누락으로 인한 프로덕션 오류 - 포트 충돌: 호스트 포트 80/5000 중복 시
docker-compose up
실패
결론
- 핵심 팁:
docker compose up --build
로 로컬/배포 환경 동일화 - 실무 적용:
- Dockerfile
생성 → docker-compose.yml
구성 → docker compose up
실행
- 멀티스테이지 빌드로 이미지 크기 최소화
- USER node
명령으로 보안 강화
- 최종 결과: 환경 불일치 문제 해결 및 배포 신뢰성 확보