热重装不适用于webpack-dev-server和docker

使用已安装docker的Ubuntu Linux。没有虚拟机。

我已经用vuejs应用程序构建了一个docker镜像。要启用热重载,我使用以下命令启动docker容器:

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的环境变量:

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

但是它没有效果-仍然无法热装我的更改。还在提供的链接中显示:

  

更新/说明:仅当您运行   VM内部的Docker引擎。如果您同时使用Linux和Docker   编码您没有这个问题。

所以不要认为答案适用于我的设置-我在安装了docker的计算机上运行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。

顺便说一句;如果我改用vue-cli-service serve,就根本看不到问题了-一切开箱即用

luopeng188020 回答:热重装不适用于webpack-dev-server和docker

我根本不是VueJS用户,从未使用过它,但是我在开发工作流程中大量使用Docker,过去我遇到过类似的问题。

在我的情况下,发送到浏览器的Javascript试图与docker容器8080的内部端口连接,但是一旦为主机映射的Javascript是8081,则JS浏览器无法访问docker容器内的8080,因此热重装无法正常工作。

在我看来,您的情况与我相同,因此您需要在VueJS应用中配置热重载以侦听您要在主机中使用的相同端口,或仅使用相同的端口就像您已经得出的结论一样。

,

很久以前就有人问过了,但我遇到了同样的问题,然后注意到 sockPort 配置对象中有一个 devServer 可以让您设置 websocket 连接使用的端口以与用于实时/热重载目的的服务器。

我所做的是通过环境变量设置这个选项,当从容器外部访问开发服务器时它工作得很好。

,

如果watchOptions不起作用,您可以尝试其他选择:

 environment:

  - CHOKIDAR_USEPOLLING=true

根据此处的文档

“如果观看不适合您,请尝试此选项。观看不适用于VirtualBox中的NFS和计算机。”

参考:

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

本文链接:https://www.f2er.com/3100935.html

大家都在问