Docker 로 react 실행및 자동변경 가능하게하는법

 

 

커스텀 네임 dockerfile

# dev 용


FROM node:alpine
#컨테이너의 /app 경로에
WORKDIR '/app'  

#package.json 을 복사후
COPY package.json .
#npm install 을 실행후
RUN npm install
#나머지 파일드를 복사후
COPY . .
#npm run start 실행
CMD ["npm","run","start"]

ㅇ

dev 버전으로만 사용할 Dockerfile 을 사용하기위해 Dockerfile 이아닌 Dockerfile.dev 이라는 이름을 쓰려한다.

보통 해당 경로에서 Docker build . 을 사용하는데 이런경우

Docker build -f Dockerfile.dev .

명령어를 사용하면된다.

 

React 개발의경우 수많은 node modules 가 있기때문에 모두다 카피하게된다.

Sending build context to Docker daemon  193.3MB
Step 1/6 : FROM node:alpine
 ---> 483343d6c5f5
Step 2/6 : WORKDIR '/app'
 ---> Using cache
 ---> 1d63fd9533c7
Step 3/6 : COPY package.json .
 ---> 9276db72e695
Step 4/6 : RUN npm install

 

이미 node_modules 는 복사됬으므로 이후에 node_modules 를 삭제후 빌드하면 빨리빌드할수있다.

docker로 리액트를 실행하려면 일반적인 docker run CONTAINER ID 가 아닌

docker run -it -p PORT:PORT(React) CONTAINER ID 를 사용한다.

 

 

docker voulme

만약 리액트 코드를 바꿧을때 docker run 의경우 컨테이너의 내용이 변하지 않으므로 변경이 반영되지 않느다.

다시 빌드하고 런해야한다.

docker volume 을 사용하면 가능해진다.

voulme 을 사용하기 위해서는 

docker run -it -p PORT:PORT(React) -v /app/node_modules -v $(pwd):/app CONTAINER ID 를 사용한다.

 

-v 에서 콜론(:) 를 사용하면 :뒤에있는걸 사용할때 :앞에있는것을 참조하라 라는 뜻이다. (매핑)

즉 (컨테이너안의) /app 을 찾을때 (컨테이너밖의) pwd(지금터미널위치) 를 참조한다

 

ganghwiui-MacBook:frontend hwi$ docker run -it -p 3000:3000 -v /app/node_modules -v $(pwd):/app b1ddf66bd379

 

 

이렇게 빌드해주면 리액트 코드를 변경시 자동으로 리액트 앱을 변경할수있다.

 

docker-compose 는 도커를 실행할때 편의를 위해 사용한다.

위의 명령어처럼 실행하면서 옵션들을 지정해주지않고

docker-compose 파일에 다 써놓으면된다.

version: '3'
services: 
    web :
        build: 
            context: .
            dockerfile: Dockerfile.dev
        ports: 
            - "3000:3000"
        volumes: 
            - /app/node_modules
            # 컨테이너밖: 컨테이너안
            - .:/app

        stdin_open: true

포트,볼륨 지정을 여기서 다해주며 dockerfile도 지정해준다. docker-compose로 실행하려면 "docker-compose up" 하면 된다.

 

npm run test 의 경우 앱을 테스트할때 사용한다. docker 를 사용해 test 하려면 docker를 실행한뒤

다른 터미널에 들어가 docker exec -it CONTAINER ID npm run test 이런식으로 추가 명령어를 해주는방식으로 가능하다.

하지만 이런 방법 보다는 docker-compose 파일에 새로운 서비스를 추가함으로써 두개 컨테이너를 동시에 돌릴수있다.

version: '3'
services: 
    web :
        build: 
            context: .
            dockerfile: Dockerfile.dev
        ports: 
            - "3000:3000"
        volumes: 
            - /app/node_modules
            # 컨테이너밖: 컨테이너안
            - .:/app

        stdin_open: true
    tests:
        build:
            context: .
            dockerfile: Dockerfile.dev
        volumes: 
            - /app/node_modules
            - .:/app
        command: ["npm","run","test"]

테스트는 포트가 따로 필요없으니 제외하고 추가 커맨드를 넣어 주면 된다.

볼륨을 지정해줬으니 테스트 코드가 변경되어도 자동으로 테스트 해준다.