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


10

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 .


Est-ce que cela fonctionne sous VM?
Gauravsa

Que voulez-vous dire comme décrit, l'application s'exécute à l'intérieur d'un conteneur Docker.
u123

Peut changer votre définition de port en -p 8080:8080 -p 8081:8081
George

Ha spécifiant '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' works ! Donc, apparemment, l'application doit être mappée sur 8080 pour que le rechargement à chaud fonctionne. Mais pourquoi??
u123

Réponses:


2

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.


Ouais ça sonne comme ça. Cela pourrait être intéressant avec une explication - car pour l'instant je dois me rappeler d'appliquer ma solution de contournement comme décrit. De plus, comme je l'ai décrit, cela fonctionne hors de la boîte si j'utilise à la place «vue-cli-service serve», il doit donc être quelque chose qui est cassé dans «webpack-dev-server» brut.
u123

Rien n'est cassé dans 'webpack-dev-server', il vous suffit de comprendre comment fonctionne Docker. Docker est comme une boîte noire pour le rechargement en direct. Pour tout ce qui compte c'est de parler avec localhost, pas docker.
Exadra37

-1

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/


Je ne sais pas où spécifier ce que vous proposez, mais si je comprends bien, il doit être défini comme une variable d'environnement. Si je fais cela pour docker, cela n'a aucun effet. Voir mon article mis à jour. Le lien que vous fournissez indique également que cela n'est pertinent que lors de l'exécution dans une machine virtuelle.
u123
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.