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

10

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 .

u123
quelle
Funktioniert das unter VM?
Gauravsa
Was meinst du damit, wie beschrieben, dass die App in einem Docker-Container ausgeführt wird?
U123
Kann Ihre Port-Definition auf-p 8080:8080 -p 8081:8081
George
Die Angabe von 'Docker run -it -p 8080: 8080 -e "HOST = 0.0.0.0" -v $ {PWD}: / app / -v / app / knotenmodule --name my-frontend my-frontend-image' funktioniert ! Daher muss die Anwendung anscheinend auf 8080 portiert werden, damit das Hot-Reload funktioniert. Aber warum??
U123

Antworten:

2

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.

Exadra37
quelle
Ja, hört sich so an. Könnte jedoch mit einer Erklärung interessant sein - da ich jetzt daran denken muss, meine Problemumgehung wie beschrieben anzuwenden. Auch wie ich beschrieben habe, funktioniert es sofort, wenn ich stattdessen 'vue-cli-service serve' verwende. Es muss also etwas sein, das im rohen 'webpack-dev-server' kaputt ist.
U123
In 'webpack-dev-server' ist nichts kaputt, Sie müssen nur verstehen, wie Docker funktioniert. Docker ist wie eine Black Box für das Live-Reload. Bei allem ist es wichtig, mit localhost zu sprechen, nicht mit Docker.
Exadra37
-1

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/

Gauravsa
quelle
Ich bin mir nicht sicher, wo ich angeben soll, was Sie vorschlagen, aber meines Wissens muss es als Umgebungsvariable festgelegt werden. Wenn ich das mache, um Docker auszuführen, hat es keine Auswirkung. Siehe meinen aktualisierten Beitrag. In dem von Ihnen angegebenen Link heißt es auch, dass dies nur relevant ist, wenn es in einer VM ausgeführt wird.
U123