Hot Reload funktioniert nicht mit Webpack-Dev-Server und Docker

Verwenden von Ubuntu Linux mit installiertem Docker. Keine VM.

Ich habe ein Docker-Image mit einer vuejs-Anwendung erstellt. Um das Hot-Reload zu aktivieren, starte ich den Docker-Container mit:

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

Es startet einwandfrei und ich kann von meinem Host-Browser aus darauf zugreifen localhost:8081. Wenn ich jedoch Änderungen an den Quelldateien vornehme und diese Änderungen speichere, werden sie nicht in meinem Browser angezeigt, bevor ich F5 drücke (Hot Reload funktioniert nicht).

Einige Details unten:

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

    }

Es wurde versucht, die watchOptions zu ändern , dies hat jedoch keine Auswirkung.

BEARBEITEN:

Basierend auf der folgenden Antwort habe ich versucht zu übergeben: CHOKIDAR_USEPOLLING=trueals Umgebungsvariable an Docker ausführen:

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

Aber es hat keine Auswirkung - immer noch nicht in der Lage, meine Änderungen im laufenden Betrieb neu zu laden. Auch im bereitgestellten Link steht:

Update / Erläuterung: Dieses Problem tritt nur auf, wenn Sie Ihre Docker-Engine in einer VM ausführen. Wenn Sie sowohl für Docker als auch für die Codierung unter Linux arbeiten, tritt dieses Problem nicht auf.

Denken Sie also nicht, dass die Antwort auf mein Setup zutrifft - ich verwende Ubuntu Linux auf meinem Computer, auf dem ich Docker installiert habe. Also kein VM-Setup.

Ein weiteres Update - basierend auf dem Kommentar unten zum Ändern der Portzuordnung:

  # 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

Also, wenn ich Karte portiere, 8080:8080anstatt 8081:8080Hot Reload funktioniert! Beachten Sie, dass die Anwendung in beiden Fällen aufgerufen wird, wenn ich auf meinem Host-Browser localhostan den zuvor genannten Ports darauf zugreife . Es ist nur so, dass Hot Reload nur funktioniert, wenn ich die Anwendung auf meinem Host 8080 zuordne.

Aber warum??

Wenn ich das tue:

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

Hot Reload funktioniert natürlich. Aber immer noch nicht sicher, warum ich den internen Container-Port 8080 nicht extern auf dem Host auf 8081 abbilden kann.

Übrigens; Ich sehe das Problem überhaupt nicht, wenn ich es vue-cli-service servestattdessen benutze - alles funktioniert sofort .

Ich bin überhaupt kein VueJS-Benutzer, habe nie damit gearbeitet, aber ich verwende Docker häufig für meinen Entwicklungsworkflow, und in der Vergangenheit hatte ich ein ähnliches Problem.

In meinem Fall versuchte das an den Browser gesendete Javascript, eine Verbindung mit dem internen Port des Docker-Containers herzustellen 8080, aber sobald der zugeordnete Port für den Host vorhanden war 8081, konnte der JS im Browser nicht 8080in den Docker-Container greifen Hot Reload funktionierte nicht.

Mir scheint, Sie haben das gleiche Szenario wie ich. Daher müssen Sie in Ihrer VueJS-App das Hot-Reload konfigurieren, um denselben Port abzuhören, den Sie auf dem Host verwenden möchten, oder nur denselben Port für beide wie Sie bereits festgestellt, dass es funktioniert.

Wenn watchOptions nicht funktioniert, können Sie die andere Option ausprobieren:

 environment:

  - CHOKIDAR_USEPOLLING=true

Wie hier beschrieben:

„Wenn das Anschauen bei Ihnen nicht funktioniert, probieren Sie diese Option aus. Das Beobachten funktioniert nicht mit NFS und Computern in VirtualBox. “

Referenz:

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