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
대신 사용하면 문제가 전혀 보이지 않습니다. 모든 것이 기본적으로 작동 합니다 .
-p 8080:8080 -p 8081:8081