Hot Reload nie działa z webpack-dev-server i docker

10

Używanie systemu Ubuntu Linux z zainstalowanym dokerem. Bez maszyny wirtualnej.

Zbudowałem obraz dokera z aplikacją vuejs. Aby włączyć ponowne ładowanie na gorąco, uruchamiam kontener dokerów z:

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

Zaczyna się dobrze i mogę uzyskać do niego dostęp z mojej przeglądarki na localhost:8081. Ale kiedy wprowadzam zmiany w plikach źródłowych i zapisuję te zmiany, nie są one odzwierciedlane w mojej przeglądarce przed naciśnięciem F5 (ponowne ładowanie na gorąco nie działa).

Niektóre szczegóły poniżej:

pakiet.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

    }

Próbowałem zmodyfikować watchOptions, ale nie działa.

EDYTOWAĆ:

Na podstawie poniższej odpowiedzi próbowałem przekazać: CHOKIDAR_USEPOLLING=truejako zmienną środowiskową do uruchomienia okna dokowanego:

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

Ale to nie działa - wciąż nie mogę wczytać na gorąco moich zmian. Również w podanym linku jest napisane:

Aktualizacja / wyjaśnienie: ten problem występuje tylko podczas uruchamiania silnika Docker wewnątrz maszyny wirtualnej. Jeśli korzystasz z systemu Linux zarówno dla Dockera, jak i dla kodowania, nie masz tego problemu.

Więc nie sądzę, że odpowiedź dotyczy mojej konfiguracji - używam Ubuntu Linux na moim komputerze, na którym zainstalowałem dokera. Więc nie ma konfiguracji VM.

Kolejna aktualizacja - na podstawie poniższego komentarza dotyczącego zmiany mapowania portów:

  # 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

Więc jeśli przeniesie mapę do 8080:8080zamiast 8081:8080przeładowania na gorąco, działa! Zauważ, że aplikacja pojawia się w obu przypadkach, gdy uzyskuję do niej dostęp w przeglądarce hosta na localhostwyżej wymienionych portach. Po prostu ponowne ładowanie na gorąco działa tylko wtedy, gdy mapuję aplikację na 8080 na moim hoście.

Ale dlaczego??

Teraz jeśli zrobię:

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

Gorące przeładowanie oczywiście działa. Ale nadal nie jestem pewien, dlaczego nie mogę zmapować wewnętrznego portu kontenera 8080 na 8081 zewnętrznie na hoście.

Btw; Nie widzę problemu, jeśli użyję vue-cli-service servezamiast tego - wszystko działa od razu po wyjęciu z pudełka .

u123
źródło
Czy to działa pod VM?
Gauravsa,
Co masz na myśli, jak opisano, aplikacja działa w kontenerze dokera.
u123
Można zmienić definicję portu na-p 8080:8080 -p 8081:8081
George,
Ha, określając działanie „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 'działa ! Dlatego aplikacja musi być mapowana na 8080, aby przeładowanie na gorąco działało. Ale dlaczego??
u123

Odpowiedzi:

2

W ogóle nie jestem użytkownikiem VueJS, nigdy z nim nie pracowałem, ale używam Dockera do pracy nad programowaniem, aw przeszłości miałem podobny problem.

W moim przypadku JavaScript, który został wysłany do przeglądarki, próbował połączyć się z wewnętrznym portem kontenera dokującego 8080, ale kiedy już był mapowany dla hosta 8081, JS w przeglądarce nie był w stanie dotrzeć 8080do kontenera dokującego, dlatego Hot Reload nie działało.

Wydaje mi się więc, że masz taki sam scenariusz jak ja, dlatego musisz skonfigurować w aplikacji VueJS hot reload, aby nasłuchiwać w tym samym porcie, którego chcesz używać na hoście, lub po prostu użyć tego samego portu dla obu już doszedłem do wniosku, że to działa.

Exadra37
źródło
Tak, to brzmi jak to. Może to być interesujące z wyjaśnieniem - ponieważ w tej chwili muszę pamiętać, aby zastosować moje obejście zgodnie z opisem. Również, jak opisałem, działa to od razu po wyjęciu z pudełka, jeśli zamiast tego użyję „vue-cli-service serv”, więc musi to być coś, co jest zepsute w surowym „webpack-dev-server”.
u123
W „webpack-dev-server” nic nie jest zepsute, wystarczy zrozumieć, jak działa Docker. Docker jest jak czarna skrzynka do przeładowania na żywo. Najważniejsze jest rozmawianie z localhost, a nie dokerem.
Exadra37,
-1

Jeśli watchOptions nie działa, możesz wypróbować drugą opcję:

 environment:

  - CHOKIDAR_USEPOLLING=true

Zgodnie z dokumentami tutaj:

„Jeśli oglądanie nie działa, wypróbuj tę opcję. Oglądanie nie działa z NFS i komputerami w VirtualBox. ”

Odniesienie:

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

Gauravsa
źródło
Nie jestem pewien, gdzie określić, co sugerujesz, ale jak rozumiem, należy ustawić go jako zmienną środowiskową. Jeśli zrobię to, aby uruchomić dokera, nie ma to żadnego efektu. Zobacz mój zaktualizowany post. Również w podanym linku znajduje się informacja, że ​​jest to istotne tylko podczas działania na maszynie wirtualnej.
u123