Hot reload tidak bekerja dengan webpack-dev-server dan buruh pelabuhan

10

Menggunakan Ubuntu Linux dengan buruh pelabuhan diinstal. Tidak ada VM.

Saya telah membangun gambar buruh pelabuhan dengan aplikasi vuejs. Untuk mengaktifkan hot reload, saya memulai wadah buruh pelabuhan dengan:

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

Ini dimulai dengan baik dan saya dapat mengaksesnya dari browser host saya aktif localhost:8081. Tetapi ketika saya membuat perubahan pada file sumber dan menyimpan perubahan itu mereka tidak tercermin di browser saya sebelum saya menekan F5 (hot reload tidak berfungsi).

Beberapa detail di bawah ini:

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

    }

Sudah mencoba mengubah WatchOptions tetapi tidak berpengaruh.

EDIT:

Berdasarkan jawaban di bawah ini saya telah mencoba untuk lulus: CHOKIDAR_USEPOLLING=truesebagai variabel lingkungan untuk menjalankan buruh pelabuhan:

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

Tapi itu tidak berpengaruh - masih belum bisa memuat ulang perubahan saya. Juga di tautan yang disediakan tertulis:

Pembaruan / Klarifikasi: Masalah ini hanya terjadi ketika menjalankan mesin Docker Anda di dalam VM. Jika Anda menggunakan Linux untuk kedua Docker dan untuk coding Anda tidak memiliki masalah ini.

Jadi jangan berpikir jawabannya berlaku untuk pengaturan saya - saya menjalankan Ubuntu Linux di mesin saya di mana saya telah menginstal buruh pelabuhan. Jadi tidak ada pengaturan VM.

Pembaruan lain - berdasarkan komentar di bawah ini tentang mengubah pemetaan port:

  # 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

Jadi jika saya port peta ke, 8080:8080bukan 8081:8080karya ulang panas! Perhatikan bahwa aplikasi muncul dalam kedua kasus ketika saya mengaksesnya di browser host saya pada localhostpada port yang disebutkan sebelumnya. Hanya saja hot reload itu hanya berfungsi ketika saya memetakan aplikasi ke 8080 di host saya.

Tapi kenapa??

Sekarang jika saya lakukan:

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 tentu saja berfungsi. Tetapi masih tidak yakin mengapa saya tidak dapat memetakan port container internal 8080 ke 8081 secara eksternal pada host.

Btw; Saya tidak melihat masalah sama sekali jika saya menggunakannya vue-cli-service serve- semuanya bekerja di luar kotak .

u123
sumber
Apakah ini berfungsi di bawah VM?
Gauravsa
Apa maksud Anda seperti yang dijelaskan aplikasi berjalan di dalam wadah buruh pelabuhan.
u123
Dapat mengubah definisi port Anda menjadi-p 8080:8080 -p 8081:8081
George
Ha menentukan 'buruh pelabuhan run -it -p 8080: 8080 -e "HOST = 0.0.0.0" -v $ {PWD}: / app / -v / app / node_modules --name my-frontend my-frontend-image' works ! Jadi jelas-jelas aplikasi perlu memetakan port ke 8080 agar hot reload berfungsi. Tapi kenapa??
u123

Jawaban:

2

Saya bukan pengguna VueJS sama sekali, tidak pernah bekerja dengannya, tapi saya menggunakan Docker banyak untuk alur kerja pengembangan saya, dan di masa lalu saya mengalami masalah yang sama.

Dalam kasus saya, Javascript yang dikirim ke browser sedang mencoba untuk terhubung dengan port internal wadah buruh pelabuhan 8080, tetapi begitu yang dipetakan untuk tuan rumah adalah 8081, JS di browser tidak dapat menjangkau 8080di dalam wadah buruh pelabuhan, oleh karena itu hot reload tidak berfungsi.

Jadi menurut saya Anda memiliki skenario yang sama dengan saya, sehingga Anda perlu mengonfigurasi dalam aplikasi VueJS Anda dengan memuat ulang panas untuk mendengarkan di port yang sama yang ingin Anda gunakan di host, atau hanya menggunakan port yang sama untuk keduanya seperti Anda sudah menyimpulkan bahwa itu berhasil.

Exadra37
sumber
Ya terdengar seperti itu. Mungkin menarik dengan penjelasan - karena sekarang saya harus ingat untuk menerapkan solusi seperti yang dijelaskan. Juga seperti yang saya jelaskan bekerja di luar kotak jika saya menggunakan 'vue-cli-service serve' sebagai gantinya jadi pasti ada sesuatu yang rusak di 'webpack-dev-server' mentah.
u123
Tidak ada yang rusak di 'webpack-dev-server', Anda hanya perlu memahami cara kerja Docker. Docker seperti kotak hitam untuk live reload. Yang terpenting adalah berbicara dengan localhost, bukan buruh pelabuhan.
Exadra37
-1

Jika WatchOptions tidak berfungsi, Anda dapat mencoba opsi lain:

 environment:

  - CHOKIDAR_USEPOLLING=true

Sesuai dokumen di sini:

“Jika menonton tidak berhasil untuk Anda, cobalah opsi ini. Menonton tidak bekerja dengan NFS dan mesin di VirtualBox. "

Referensi:

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

Gauravsa
sumber
Tidak yakin tentang tempat untuk menentukan apa yang Anda sarankan, tetapi seperti yang saya pahami, harus ditetapkan sebagai variabel lingkungan. Jika saya melakukan itu untuk menjalankan docker itu tidak berpengaruh. Lihat posting saya yang diperbarui. Juga di tautan yang Anda berikan dikatakan ini hanya relevan saat dijalankan di VM.
u123