인프런 시작하면서 모르는 거 정리 2

이슈1. 리액트 핫로딩 작동

세상에 세상에.. 세상에는 똑똑한 사람들이 정말 많다..

실습을 따라하면서 실시간 반영이 되지 않아 울고싶었다.

혹시나 싶어서 답변 창을 열어봤는데 같은 질문을 하신 분이 있었고, 그 분은 스스로 답을 찾으셨다.

리액트라는 라이브러리도 처음 써보는데 신기하다.

결론은? 리액트 핫로딩(아마 실시간 반영을 의미하는 듯 하다)을 사용하기 위해서 도커를 실행할 때 추가적인 옵션을 넣어주어야 한다.

-e CHOKIDAR_USEPOLLING=true

이것을 넣어서 코드를 완성해주면 아래와 같다.

docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v ${pwd}:/usr/src/app -e CHOKIDAR_USEPOLLING=true jeong5680/docker-react-app

* -v /usr/src/app/node_modules : 볼륨을 주는 것, /usr/src/app/node_modules는 아무것도 참조하지 말자는 뜻

* -v ${pwd}:/usr/src/app : 볼륨을 주는 것, /usr/src/app이 ${pwd} 현재 디렉토리의 내용물을 참조하게 하자는 뜻

* chokidar 모듈은 WebPack과 Babel이 파일들의 모니터링을 하기 위해 사용하는 모듈로 create-react-app에도 포함되어있는 모듈입니다. (밑줄 부분은 아직 무슨 말인지 모르겠당)

* Dockerfile 안에 ENV로 CHOKIDAR_USEPOLLING=true를 넣어줘도 동작한다고 한다.

* 인프런 강의 중, 안창근 사용자님의 답변을 저의 공부를 위해 정리한 것입니다.

 

이슈2. docker-compose.yml 파일을 만들 때도 위와 같은 문제다.

이 때는 environment를 설정해야 하므로 다음과 같이 코드를 설정해주자.

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