热重载不适用于 webpack-dev-server 和 docker [英] Hot reload not working with webpack-dev-server and docker
问题描述
使用安装了 docker 的 Ubuntu Linux.没有虚拟机.
Using Ubuntu Linux with docker installed. No VM.
我已经使用 vuejs 应用程序构建了一个 docker 镜像.要启用热重载，我使用以下命令启动 docker 容器:
I have build a docker image with a vuejs application. To enable hot reload I start the docker container with:
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 之前它们不会反映在我的浏览器中(热重载不起作用).
It starts up fine and I can access it from my host browser on localhost:8081. But when I make changes to the source files and save those changes they are not reflected in my browser before I press F5 (hot reload does not work).
下面的一些细节:
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，但没有效果.
Tried to modify the watchOptions but it has no effect.
基于以下答案，我尝试传递:CHOKIDAR_USEPOLLING=true 作为 docker run 的环境变量:
Based on below answer I have tried to pass: CHOKIDAR_USEPOLLING=true as an environment variable to 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
但它没有效果 - 仍然无法热重新加载我的更改.同样在提供的链接中，它说:
But it has not effect - still not able to hot reload my changes. Also in the provided link it says:
更新/说明:此问题仅在运行您的虚拟机内的 Docker 引擎.如果您在 Linux 上同时使用 Docker 和编码你没有这个问题.
Update/Clarification: This problem only occurs when running your Docker engine inside a VM. If you are on Linux for both Docker and for coding you do not have this problem.
所以不要认为答案适用于我的设置 - 我在我安装了 docker 的机器上运行 Ubuntu Linux.所以没有设置虚拟机.
So don't think the answer applies to my setup - I am running Ubuntu Linux on my machine where I have installed docker. So no VM setup.
另一个更新 - 基于下面关于更改端口映射的评论:
Another update - based on the comment below on changing the port mapping:
# 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 时才有效.
So if I port map to 8080:8080 instead of 8081:8080 hot reload works! Notice the application comes up in both cases when I access it on my host browser on localhost on the before mentioned ports. Its just that hot reload only works when I map the application to 8080 on my host.
但是为什么??
现在如果我这样做:
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.
Hot reload of course works. But still not sure why I cannot map internal container port 8080 to 8081 externally on the host.
顺便说一句；如果我改用 vue-cli-service serve，我根本看不到问题 - 一切都开箱即用.
Btw; I don't see the problem at all if I use vue-cli-service serve instead - everything works out of the box.
推荐答案
我根本不是 VueJS 用户，从未使用过它，但我在开发工作流程中大量使用 Docker，过去我也遇到过类似的问题.
I am not a VueJS user at all, never worked with it, but I use Docker heavily for my development workflow, and in the past I experienced a similar issue.
在我的例子中，发送到浏览器的 Javascript 试图连接 docker 容器的内部端口 8080，但是一旦映射到主机的端口是 8081，浏览器中的JS无法到达docker容器内的8080，因此热重载不起作用.
In my case the Javascript that was sent to the browser was trying to connect with the internal port of the docker container 8080, but once the mapped one for the host was 8081, the JS in the browser was not able to reach 8080 inside the docker container, therefore hot reload was not working.
所以在我看来你和我有同样的情况，因此你需要在你的 VueJS 应用程序中配置热重载来监听你想在主机中使用的同一个端口，或者只使用同一个端口两者都是因为您已经得出结论它有效.
So it seems to me that you have the same scenario as me, thus you need to configure in your VueJS app the hot reload to listen in the same port you want to use in the host, or just use the same port for both as you already concluded that it works.
这篇关于热重载不适用于 webpack-dev-server 和 docker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
