도커(5) : react app으로 실습

오늘은 좀 더 복잡한 docker-compose.yml 파일을 작성 해보는 실습(?) 시간

React를 이용하여 docker 실습

일단 간단하게 react-create-app을 이용하여 앱을 하나 만들어 보겠습니다.(오랜만에 react를 해서 기억이 잘...)

작업순서

1. 간단한 react 코딩
2. Dockerfile 작성
3. docker-compose.yml 파일 작성

간단한 react 코딩

작업 할 디렉토리에서 터미널창을 켠 다음 npx create-react-app ./ 명령어를 입력 한 다음 실행 착하게도 다 작성을 해줘서 따로 코딩은 필요 없을 거 같다.

Dockerfile 작성

우선 개발모드 일때랑 배포모드 일때랑 도커파일을 분리해서 작성을 하겠습니다.

• Dockerfile.dev: 개발모드
• Dockerfile: 배포모드

Dockerfile.dev 파일 작성

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

CMD ["npm","run","start"]

추가적으로 팁은 도커환경에서 앱을 실행 시킬때는 로컬환경에 있는 node_modules 파일은 지워도 된다. Dockerfile에서 npm install 시 자동적으로 node_modules가 생기기 때문에 로컬에 있는 node_modules는 삭제(빌드 COPY시 시간이 소요됨)

빌드

docker build -t wmc1415/docker_react ./ 이렇게 작성하면 에러가 발생 할것이다. Dockerfile이라는 파일은 만들지 않고 Dockerfile.dev라는 파일을 먼저 만들고 build를 했기 때문에 해결책으로 build 시 -f 옵션을 주어 해결한다.
docker build -f Dockerfile.dev -t wmc1415/docker_react ./

컨테이너 생성 및 실행

docker run -it -p 3000:3000 wmc1415/docker_react react app을 run할 때 주의점은 -it라는 옵션을 추가해줘야 됨.

docker-compose.yml 파일 작성

version: "3"

services: # 컨테이너들을 정의
  react: # 컨테이너 이름
    build:
      context: ./ # 도커파일이 위치한 위치
      dockerfile: Dockerfile.dev # 도커파일 이름
    ports: 
      - "3000:3000" # port 맵핑
    volumes: # 실시간 코드 수정을 위한 volumes 설정
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    stdin_open: true # 리액트 앱을 돌리때 필요한 옵션 , 리액트앱을 끌때 필요
    

docker-compose.yml 을 작성한후 docker-compose up 을 터미널창에 입력하여 실행시킨 후 잘 동작되는지 확인

헷갈리는 개념정리

docker-compose.yml 에서의 command는 Dockerfile의 CMD의 내용이 없다면 Dockerfile의 CMD 로서의 역할을 하기도 하고, 만약 원래 Dockerfile에 CMD 의 내용이 존재했다면, 그것을 Override한다는 것을 알 수 있습니다.

그리고 ENTRYPOINT는 CMD든 command든 관련없이 인자가 주어지던 어쩌든 무조건 실행되는 인자라고 정리할 수 있겠습니다.

출처