Le rechargement à chaud ne fonctionne pas avec webpack-dev-server et docker

Utilisation d'Ubuntu Linux avec docker installé. Pas de VM.

J'ai construit une image docker avec une application vuejs. Pour activer le rechargement à chaud, je démarre le conteneur Docker avec:

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

Il démarre correctement et je peux y accéder à partir de mon navigateur hôte localhost:8081. Mais lorsque j'apporte des modifications aux fichiers source et que j'enregistre ces modifications, elles ne sont pas reflétées dans mon navigateur avant d'appuyer sur F5 (le rechargement à chaud ne fonctionne pas).

Quelques détails ci-dessous:

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

    }

J'ai essayé de modifier les watchOptions mais cela n'a aucun effet.

ÉDITER:

Sur la base de la réponse ci-dessous, j'ai essayé de passer: en CHOKIDAR_USEPOLLING=truetant que variable d'environnement à 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

Mais cela n'a pas d'effet - toujours pas en mesure de recharger à chaud mes modifications. Également dans le lien fourni, il est dit:

Mise à jour / clarification: ce problème se produit uniquement lors de l'exécution de votre moteur Docker dans une machine virtuelle. Si vous êtes sous Linux pour Docker et pour le codage, vous n'avez pas ce problème.

Ne pensez donc pas que la réponse s'applique à ma configuration - j'utilise Ubuntu Linux sur ma machine sur laquelle j'ai installé docker. Donc, aucune configuration de machine virtuelle.

Une autre mise à jour - basée sur le commentaire ci-dessous sur la modification du mappage de port:

  # 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

Donc, si je transfère la carte au 8080:8080lieu de 8081:8080recharger à chaud, ça marche! Notez que l'application apparaît dans les deux cas lorsque j'y accède sur mon navigateur hôte localhostsur les ports mentionnés ci-dessus. C'est juste que le rechargement à chaud ne fonctionne que lorsque je mappe l'application sur 8080 sur mon hôte.

Mais pourquoi??

Maintenant, si je le fais:

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

Le rechargement à chaud fonctionne bien sûr. Mais je ne sais toujours pas pourquoi je ne peux pas mapper le port de conteneur interne 8080 à 8081 en externe sur l'hôte.

Btw; Je ne vois pas du tout le problème si j'utilise à la vue-cli-service serveplace - tout fonctionne hors de la boîte .

Je ne suis pas du tout un utilisateur de VueJS, je n'ai jamais travaillé avec, mais j'utilise beaucoup Docker pour mon flux de travail de développement, et dans le passé, j'ai rencontré un problème similaire.

Dans mon cas, le Javascript envoyé au navigateur essayait de se connecter avec le port interne du conteneur Docker 8080, mais une fois celui mappé pour l'hôte 8081, le JS dans le navigateur n'était pas en mesure d'atteindre l' 8080intérieur du conteneur Docker, donc le rechargement à chaud ne fonctionnait pas.

Il me semble donc que vous avez le même scénario que moi, vous devez donc configurer dans votre application VueJS le rechargement à chaud pour écouter dans le même port que vous souhaitez utiliser dans l'hôte, ou simplement utiliser le même port pour les deux que vous déjà conclu que cela fonctionne.

Si watchOptions ne fonctionne pas, vous pouvez essayer l'autre option:

 environment:

  - CHOKIDAR_USEPOLLING=true

Selon les documents ici:

«Si regarder ne fonctionne pas pour vous, essayez cette option. La surveillance ne fonctionne pas avec NFS et les machines dans VirtualBox. »

Référence:

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