배포준비

• 운영을 위한 Dockerfile과 개발환경에서 사용할 Dockerfile.dev파일을 만들어서 관리하자.

  • // Dockerfile.dev
    FROM node:alpine
    
    WORKDIR /usr/src/app
    
    COPY package.json ./
    
    RUN npm install
    
    COPY ./ ./
    
    CMD ["npm","run","start"]
    
    // cmd
    docker build -t react-test -f Dockerfile.dev .
    

  • docker build -t name .을 하면 에러가 발생. docker build 명령어에서 Dockerfile을 찾기 때문

  • 옵션을 줘서 이미지를 빌드할때, 파일을 지정해야한다.

  • 팁 : 로컬에 node_modules가 있는데, 도커환경에서 실행할때 로컬의 node_module이 필요한게 아니다. node_module을 copy할 필요가 없다.

  • 리액트 앱 실행하기 : docker run -it -p 3000:3000 react-test => 예전에는 -it옵션이 없어도 됬는데, 최근에는 -it옵션이 반드시 필요하다.

• docker volume이용하기

  • $ docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app react-test
    

  • 위 명령어는 너무나도 번거롭다. docker-compose를 이용하자.

  • version: "3"
    
    services:
      react:
        build:
          context: .
          dockerfile: Dockerfile.dev
        ports:
        - 3000:3000
        volumes:
        - /usr/src/app/node_modules
        - ./:/usr/src/app
        stdin_open: true
    
    

  • build : 현 디렉토리에 있는 Dockerfile사용

  • context : 도커 이미지를 구성하기 위한 파일과 폴더들의 위치

  • dockerfile : 어떤 도커파일을 쓸지

  • volumns : 로컬머신에 있는 파일들 맵핑

  • stdin_open : 리액트 앱을 끌때 필요(버그수정)

• 테스트도 소스코드 변경되면 바로 반영시킬 수 있다. Test를 위한 컨테이너를 만들자.

  • version: "3"
    
    services:
      react:
        build:
          context: .
          dockerfile: Dockerfile.dev
        ports:
        - 3000:3000
        volumes:
        - /usr/src/app/node_modules
        - ./:/usr/src/app
        stdin_open: true
      test:
        build:
          context: .
          dockerfile: Dockerfile.dev
        volumes:
          - /usr/src/app/node_modules
          - ./:/usr/src/app
        command: ["npm", "run","test"]
    

  • docker-compose up –build : 리액트의 컨테이너와 테스트 부분 컨테이너가 동시에 실행된다.

운영환경에서 nginx

• 개발서버는 소스를 변경하면 자동으로 앱 전체를 빌드해서 변경 소스 코드를 반영한다. 반면 운영환경에서는 소스를 변경할때, 다시 반영해줄 필요가 없다.
• 개발환경 도커와 운영환경 도커 파일의 차이는 CMD에서 npm run start, npm run build의 차이다. npm run build를 통해 빌드파일을 만들고, 빌드파일을 활용하여 웹브라우저의 요청에 따라 필요한 파일들을 nginx에서 제공한다.

FROM node:alpine as builder

WORKDIR '/usr/src/app'

COPY package.json .
RUN npm install
COPY ./ ./
RUN npm run build

FROM nginx

COPY --from=builder /usr/src/app/build /usr/share/nginx/html

• From부터 다음 From전까지 builder stage.
• COPY –from=builder는 빌드스테이지로부터 복사한다는 의미
• as를 통해 builder stage라고 명시
• run stage : nginx가동 => 빌드파일 제공.
• nginx는 80이 기본포트
• 빌드파일을 /usr/share/nginx/html 디렉토리로 넣어야 기본적으로 동작한다.
  • /usr/share/nginx/html인 이유는 Nginx가 알아서 클라이언트 요청이 들어올때 알맞은 정적파일을 제공해준다. 설정을 통해 장소를 바꿀 수도 있다.
  • dockerhub nginx 설명 참조