webpack-dev-server 및 docker에서 핫 리로드가 작동하지 않습니다.


10

docker가 설치된 Ubuntu Linux 사용 VM이 없습니다.

vuejs 응용 프로그램으로 도커 이미지를 작성했습니다. 핫 리로드를 활성화하려면 다음과 같이 docker container를 시작하십시오.

docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

제대로 시작되고의 호스트 브라우저에서 액세스 할 수 있습니다 localhost:8081. 그러나 소스 파일을 변경하고 변경 사항을 저장하면 F5를 누르기 전에 브라우저에 반영되지 않습니다 (핫로드가 작동하지 않습니다).

일부 세부 사항은 다음과 같습니다.

package.json

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",

build / webpack.dev.conf.js

  devServer: {
    clientLogLevel: 'warning',
    ...
    hot: true,
    ...
    watchOptions: {
      //poll: config.dev.poll,
      //aggregateTimeout: 500, // delay before reloading
      poll: 100 // enable polling since fsevents are not supported in docker

    }

watchOptions 를 수정하려고 시도 했지만 효과가 없습니다.

편집하다:

아래 답변에 CHOKIDAR_USEPOLLING=true따라 도커 실행에 환경 변수로 전달하려고했습니다 .

docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -e "CHOKIDAR_USEPOLLING=true" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

그러나 효과가 없습니다. 여전히 변경 사항을 핫 리로드 할 수 없습니다. 또한 제공된 링크에서 다음과 같이 말합니다.

업데이트 / 설명 :이 문제는 Docker 엔진을 VM 내에서 실행할 때만 발생합니다. Docker와 코딩을 위해 Linux를 사용하는 경우이 문제가 없습니다.

따라서 대답이 내 설정에 적용되지 않는다고 생각합니다.도 커가 설치된 컴퓨터에서 Ubuntu Linux를 실행하고 있습니다. 따라서 VM 설정이 없습니다.

포트 매핑 변경에 대한 아래 설명을 기반으로하는 또 다른 업데이트 :

  # Hot reload works!
  docker run -it -p 8080:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

  # Hot reload fails!  
  #docker run -it -p 8081:8080 -e "HOST=0.0.0.0" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

따라서 핫 리로드 8080:8080대신 포트를 매핑하면 8081:8080작동합니다! localhost앞서 언급 한 포트의 호스트 브라우저에서 액세스하면 두 경우 모두 응용 프로그램이 나타납니다 . 핫 리로드는 호스트에서 응용 프로그램을 8080에 매핑 할 때만 작동합니다.

그런데 왜 ??

이제 내가하면 :

PORT='8081'
docker run -it -p "${PORT}:${PORT}" -e "HOST=0.0.0.0" -e "PORT=${PORT}" -v ${PWD}:/app/ -v /app/node_modules --name my-frontend my-frontend-image

물론 재 장전이 작동합니다. 그러나 왜 내부 컨테이너 포트 8080을 호스트의 외부에 8081에 매핑 할 수 없는지 여전히 확실하지 않습니다.

Btw; vue-cli-service serve대신 사용하면 문제가 전혀 보이지 않습니다. 모든 것이 기본적으로 작동 합니다 .


VM에서 작동합니까?
— Gauravsa

앱이 도커 컨테이너 내에서 실행되고 있음을 의미합니다.
— u123

포트 정의를 다음으로 변경할 수 있습니다-p 8080:8080 -p 8081:8081
— George

'docker run -it -p 8080 : 8080 -e "HOST = 0.0.0.0"-v $ {PWD} : / app / -v / app / node_modules --name my-frontend my-frontend-image'를 지정하면 작동합니다. ! 따라서 핫 리로드가 작동하려면 응용 프로그램을 8080에 포트 매핑해야합니다. 그러나 왜 ??
— u123

답변:


2

나는 VueJS 사용자가 아니며 결코 작업하지 않았지만 개발 워크 플로우에 Docker를 많이 사용했으며 과거에는 비슷한 문제가 발생했습니다.

필자의 경우 브라우저로 전송 된 Javascript는 도커 컨테이너의 내부 포트와 연결하려고 8080했지만 호스트에 매핑 된 포트가 일단되면 8081브라우저의 JS 8080가 도커 컨테이너 내부 에 도달 할 수 없었습니다. 핫 리로드가 작동하지 않았습니다.

따라서 나와 같은 시나리오가있는 것 같습니다. 따라서 VueJS 앱에서 핫 리로드를 구성하여 호스트에서 사용하려는 동일한 포트에서 수신 대기하거나 동일한 포트를 사용하십시오. 이미 작동한다고 결론지었습니다.


그래, 그런 것 같아 그래도 설명이 흥미로울 수 있습니다. 지금부터 설명 된대로 해결 방법을 적용해야합니다. 또한 내가 설명한 것처럼 'vue-cli-service serve'를 대신 사용하면 기본 'webpack-dev-server'에서 깨진 것이어야합니다.
— u123

'webpack-dev-server'에서 아무것도 깨지지 않았습니다 .Docker의 작동 방식을 이해하면됩니다. Docker는 실시간 재 장전을위한 블랙 박스와 같습니다. 도 커가 아닌 로컬 호스트와 대화하는 것이 중요합니다.
— Exadra37

-1

watchOptions가 작동하지 않으면 다른 옵션을 사용해보십시오.

 environment:

  - CHOKIDAR_USEPOLLING=true

문서에 따라 여기 :

“보고 있어도 효과가 없다면이 옵션을 사용해보십시오. VirtualBox의 NFS 및 컴퓨터에서는 감시 기능이 작동하지 않습니다. "

참고:

https://daten-und-bass.io/blog/enabling-hot-reloading-with-vuejs-and-vue-cli-in-docker/


제안하는 것을 지정할 위치를 모르지만 환경 변수로 설정해야한다는 것을 이해합니다. 도커를 실행하면 효과가 없습니다. 내 업데이트 된 게시물을 참조하십시오. 또한 당신이 제공하는 링크에서 이것은 VM에서 실행될 때만 관련이 있다고 말합니다.
— u123
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.