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.