본문 바로가기

카테고리 없음

6. 리액트 도커 사용 실습

따라하며 배우는 도커와 CI환경

 

1. 개발환경 도커파일

개발환경일 경우엔 실행시 어떤 도커 파일 실행할건지 명시 필요

docker build -f Dockerfile.dev .

 

 

p.s)

이미지 빌드시 node_modules 지우고 실행

2. 실행

컨테이너의 포트매핑

docker run -p 3000:3000 이미지 이름

 

볼륨을 사용한 명령어

docker run -p 3000:3000 -v usr/src/app/node_modules -v $(pwd):/usr/src/app <이미지 아이디>

 

도커 컴포즈

앱 실행시 포트 매핑, 볼륨 등 긴 명령어를 입력하여 실행이 번거로워 컴포즈를 이용

docker-compose.yml

 

  • context: 도커 이미지 구성을 위한 파일이 있는 곳
  • dockerfile: 실행할 도커파일이 어떤것인지 지정
  • stdin_open: 리액트 앱 종료시 필요한 설정

docker-compose up 명령어로 실행

3. 테스트 코드 실행 설정

실행중인 컨테이너에서 테스트 코드 실행시

docker run -it 이미지 이름 npm run test

 

볼륨을 사용한 테스트 코드 설정

docker-compose.yml에 추가

 

docker-compose up --build 명령어 사용하여 다시 이미지를 만들어 컨테이너 실행시

테스트 코드 부분도 변경시 반영 됨

4. nginx

개발환경에서 리액트 실행시

로컬 서버가 소스코드 파일 (html, js, ...) 들을 브라우저에 전달함

 

운영환경에서 리액트 실행시

nginx 웹 서버가 빌드된 파일을 브라우저에 전달함

 

개발, 운영 서버와 동작이 다른 이유는?

  • 로컬
    • 소스 변경시 전체 앱 다시 빌드하여 변경 소스 반영. 개발에 용이
  • 운영
    • 위와 같은 기능 필요 없음
    • 빌드된 정적 파일만 전달하는 빠르고 깔끔한 웹 서버 사용

 

5. 운영환경 도커 파일 

Dockerfile

  • 1번째 빌드 스테이지, 2번째 빌드 스테이지로 구분
  • 빌드 스테이지 COPY 부분
    • --from=builder: 빌드단계에서 생성된 파일을 복사한다
    • 1번째 스테이지의 경로, nginx 동작을 위해 복사할 경로

아래 명령어로 포트매핑하여 앱 실행

docker run -p 8080:80 이미지 이름