Hotpack, webpack-dev-server ve docker ile çalışmıyor

Docker kurulu halde Ubuntu Linux kullanma. VM yok.

Bir vuejs uygulaması ile bir liman işçisi görüntü inşa var. Etkin yeniden yüklemeyi etkinleştirmek için docker kapsayıcısını aşağıdakilerle başlatırım:

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

İyi başlıyor ve ana bilgisayarımın tarayıcısından erişebiliyorum localhost:8081. Ancak kaynak dosyalarda değişiklik yaptığımda ve bu değişiklikleri kaydettiğimde, F5'e basmadan önce tarayıcımda yansıtılmıyorlar (sıcak yeniden yükleme çalışmıyor).

Aşağıda bazı ayrıntılar:

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

    }

WatchOptions üzerinde değişiklik yapmaya çalıştı ancak hiçbir etkisi yok.

DÜZENLE:

Aşağıdaki cevaba dayanarak geçmeye çalıştım: CHOKIDAR_USEPOLLING=truedocker çalıştırmak için bir ortam değişkeni olarak:

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

Ama etkisi yok - yine de değişikliklerimi sıcak olarak yükleyemiyorum. Ayrıca sağlanan bağlantıda şöyle diyor:

Güncelleme / Açıklama: Bu sorun yalnızca Docker motorunuzu bir VM içinde çalıştırırken oluşur. Hem Docker hem de kodlama için Linux'taysanız bu sorunla karşılaşmazsınız.

Bu yüzden cevabın kurulumum için geçerli olduğunu düşünmeyin - Ubuntu Linux'u docker'ı kurduğum makinede çalıştırıyorum. Yani VM kurulumu yok.

Başka bir güncelleme - bağlantı noktası eşlemesini değiştirme hakkındaki aşağıdaki yoruma dayanarak:

  # 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

Yani ben bağlantı noktası harita 8080:8080yerine 8081:8080sıcak yeniden yükleme çalışır! Daha localhostönce belirtilen bağlantı noktalarında ana bilgisayar tarayıcımda eriştiğimde uygulamanın her iki durumda da geldiğine dikkat edin . Sadece o sıcak yeniden yükleme sadece benim ev sahibi 8080 için uygulama harita çalışır.

Ama neden??

Şimdi yaparsam:

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

Sıcak yeniden yükleme tabii ki çalışır. Ama neden 8080 ile 8081 arasındaki dahili konteyner bağlantı noktasını ana bilgisayarda harici olarak eşleyemiyorum.

btw; Bunun vue-cli-service serveyerine kullanırsam sorunu hiç görmüyorum - her şey kutudan çıkıyor .

docker vue.js webpack-dev-server

— U123
kaynak

Bu VM altında mı çalışıyor?

— Gauravsa

Açıklandığı gibi, uygulama bir docker kapsayıcısının içinde çalışıyor demektir.

— u123

Bağlantı noktası tanımınızı-p 8080:8080 -p 8081:8081

— George

'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' ! Görünüşe göre uygulamanın sıcak yeniden yüklemenin çalışması için 8080'e eşlenen bağlantı noktasına ihtiyacı var. Ama neden??

— u123

Yanıtlar:

Hiç bir VueJS kullanıcısı değilim, onunla hiç çalışmadım, ancak Docker'ı geliştirme iş akışım için yoğun bir şekilde kullanıyorum ve geçmişte benzer bir sorunla karşılaştım.

Benim durumumda tarayıcıya gönderilen Javascript, docker konteynerinin dahili bağlantı noktasına bağlanmaya çalışıyordu 8080, ancak ana bilgisayar için eşlenen bir kez olduğunda 8081, tarayıcıdaki JS 8080docker konteynerinin içine erişemedi , bu nedenle sıcak yeniden yükleme çalışma değildi.

Bana öyle geliyor ki, benimle aynı senaryoya sahipsiniz, bu nedenle VueJS uygulamanızda, ana bilgisayarda kullanmak istediğiniz aynı bağlantı noktasını dinlemek için sıcak yeniden yüklemeyi yapılandırmanız veya her ikisi için de aynı bağlantı noktasını kullanmanız gerekir. zaten işe yaradığı sonucuna vardı.

— Exadra37
kaynak

Evet kulağa hoş geliyor. Yine de bir açıklama ile ilginç olabilir - çünkü şu anda geçici çözümü açıklandığı gibi uygulamayı hatırlamak gerekir. Ayrıca açıkladığım gibi 'vue-cli-service serve' kullanırsam kutunun dışında çalışır, bu yüzden ham 'webpack-dev-server'da kırılmış bir şey olmalı.

— u123

'Webpack-dev-server' içinde hiçbir şey kırılmaz, Docker'ın nasıl çalıştığını anlamanız yeterlidir. Docker, canlı yeniden yükleme için kara kutu gibidir. Her şey için onun liman işçisiyle değil, localhost ile konuşması önemlidir.

— Exadra37

-1

WatchOptions çalışmazsa, diğer seçeneği deneyebilirsiniz:

 environment:

  - CHOKIDAR_USEPOLLING=true

Burada dokümanlara göre:

“İzlemek işe yaramazsa, bu seçeneği deneyin. İzleme, VirtualBox'taki NFS ve makinelerle çalışmaz. ”

Referans:

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

— Gauravsa
kaynak

Ne önereceğinizi nereden belirleyeceğinizden emin değilim ama anladığım kadarıyla bir ortam değişkeni olarak ayarlanması gerekiyor. Eğer docker çalıştırmak için bunu yaparsanız, hiçbir etkisi yoktur. Güncellenmiş yayınımı görün. Ayrıca sağladığınız bağlantıda bunun yalnızca bir sanal makinede çalışırken geçerli olduğu belirtiliyor.

— u123