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=true
sebagai 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:8080
bukan 8081:8080
karya ulang panas! Perhatikan bahwa aplikasi muncul dalam kedua kasus ketika saya mengaksesnya di browser host saya pada localhost
pada 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 .
-p 8080:8080 -p 8081:8081
Jawaban:
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 adalah8081
, JS di browser tidak dapat menjangkau8080
di 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.
sumber
Jika WatchOptions tidak berfungsi, Anda dapat mencoba opsi lain:
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/
sumber