AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

도커로 Node.js + React 앱 컨테이너화: 환경 불일치 문제 해결

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

DevOps

대상자

  • 대상자: Node.js/React 개발자, DevOps 엔지니어, 팀원 온보딩 담당자
  • 난이도: 중급 (Docker 기본 지식 필요)

핵심 요약

  • 핵심 개념: Dockerfiledocker-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_URLNODE_ENV 설정
  • depends_on 명령으로 서비스 의존성 관리

4. 최적화 및 보안 강화

  • 핫 리로드: volumes로 소스 코드 실시간 반영
  • 이미지 축소: apk addrm -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 명령으로 보안 강화

  • 최종 결과: 환경 불일치 문제 해결 및 배포 신뢰성 확보