web-dev-qa-db-fra.com

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 sur 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 le watchOptions mais cela n'a aucun effet.

ÉDITER:

Sur la base de la réponse ci-dessous, j'ai essayé de passer: CHOKIDAR_USEPOLLING=true comme variable d'environnement à exécuter par docker:

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. Dans le lien fourni, il est également indiqué:

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 où j'ai installé docker. Donc pas de configuration VM.

ne autre mise à jour - basé 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 vers 8080:8080 au lieu de 8081:8080 le rechargement à chaud fonctionne! Notez que l'application apparaît dans les deux cas lorsque j'y accède sur mon navigateur hôte sur localhost sur 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 vue-cli-service serve à la place - tout fonctionne hors de la boîte .

dockervue.jswebpack-dev-server
10
u123

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 était 8081, le JS du navigateur n'a pas pu atteindre 8080 à l'intérieur du 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.

2
Exadra37