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=true
jako 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:8080
zamiast 8081:8080
przeł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 localhost
wyż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 serve
zamiast tego - wszystko działa od razu po wyjęciu z pudełka .
-p 8080:8080 -p 8081:8081
Odpowiedzi:
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 hosta8081
, JS w przeglądarce nie był w stanie dotrzeć8080
do 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.
źródło
Jeśli watchOptions nie działa, możesz wypróbować drugą opcję:
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/
źródło