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


10

使用已安装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- 开箱即用


这在VM下工作吗?
Gauravsa

如前所述,您的意思是该应用程序正在docker容器中运行。
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

Answers:


2

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

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

因此在我看来,您和我的场景相同,因此您需要在VueJS应用中配置热重载以侦听您要在主机中使用的同一端口,或者仅为您使用相同的端口已经得出结论,它可行。


是的,听起来像是。不过,通过解释可能会很有趣-因为现在我需要记住按照描述的方法来应用我的解决方法。同样,正如我所描述的,如果我使用“ vue-cli-service serve”,它可以直接使用,因此必须在原始的“ webpack-dev-server”中被破坏。
u123

“ webpack-dev-server”没有任何问题,您只需要了解Docker的工作方式即可。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/


不知道在哪里指定您的建议,但据我了解,它需要设置为环境变量。如果我这样做对docker run无效。看到我更新的帖子。同样在您提供的链接中,它说这仅在VM中运行时相关。
u123
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.