हॉट रीलोड वेबपैक-देव-सर्वर और डॉकटर के साथ काम नहीं कर रहा है

Question

डॉकटर स्थापित के साथ उबंटू लिनक्स का उपयोग करना। कोई वी.एम.

मैं एक vuejs आवेदन के साथ एक docker छवि का निर्माण किया है। हॉट रीलोड को सक्षम करने के लिए मैं डॉकटर कंटेनर शुरू करता हूं:

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

यह ठीक शुरू होता है और मैं इसे अपने होस्ट ब्राउज़र से एक्सेस कर सकता हूं localhost:8081। लेकिन जब मैं स्रोत फ़ाइलों में परिवर्तन करता हूं और उन बदलावों को सहेजता हूं जो वे मेरे ब्राउज़र में प्रतिबिंबित नहीं होते हैं तो इससे पहले कि मैं F5 दबाता हूं (हॉट रीलोड काम नहीं करता है)।

नीचे कुछ विवरण:

package.json

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",

निर्माण / 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

    }

वॉचऑफ को संशोधित करने की कोशिश की गई लेकिन इसका कोई असर नहीं हुआ।

संपादित करें:

नीचे दिए गए उत्तर के आधार पर मैंने पास करने की कोशिश की है: CHOKIDAR_USEPOLLING=trueएक पर्यावरण चर के रूप में डॉक चलाने के लिए:

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

लेकिन इसका असर नहीं हुआ - फिर भी मेरे बदलावों को गर्म करने में सक्षम नहीं। इसके अलावा दिए गए लिंक में यह कहता है:

अपडेट / क्लेरीफिकेशन: यह समस्या केवल तब होती है जब आपके डॉक इंजन को वीएम के अंदर चलाया जाता है। यदि आप डॉकर और कोडिंग दोनों के लिए लिनक्स पर हैं, तो आपको यह समस्या नहीं है।

ऐसा मत सोचो कि उत्तर मेरे सेटअप पर लागू होता है - मैं अपनी मशीन पर उबंटू लिनक्स चला रहा हूं जहां मैंने डॉकटर स्थापित किया है। तो कोई VM सेटअप।

एक और अपडेट - पोर्ट मैपिंग बदलने पर नीचे टिप्पणी के आधार पर:

  # 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

इसलिए अगर मैं गर्म पुनः लोड कार्यों के 8080:8080बजाय मानचित्र को पोर्ट करता हूं 8081:8080! ध्यान दें कि आवेदन दोनों मामलों में आता है जब मैं localhostपहले उल्लेखित बंदरगाहों पर अपने होस्ट ब्राउज़र पर इसे एक्सेस करता हूं । यह सिर्फ इतना है कि गर्म पुनः लोड केवल तभी काम करता है जब मैं अपने होस्ट पर 8080 के लिए एप्लिकेशन मैप करता हूं।

लेकिन क्यों??

अब अगर मैं:

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

पाठ्यक्रम के गर्म पुनः लोड काम करता है। लेकिन अभी भी यकीन नहीं है कि मैं आंतरिक कंटेनर पोर्ट 8080 से 8081 होस्ट पर बाहरी रूप से क्यों नहीं मैप कर सकता हूं।

btw; मुझे समस्या बिल्कुल नहीं दिखती अगर मैं vue-cli-service serveइसके बजाय उपयोग करता हूं - सब कुछ बॉक्स से बाहर काम करता है ।

Comments

क्या यह वीएम के तहत काम कर रहा है?

— गौरव

आप क्या कहते हैं इसका मतलब है कि ऐप एक डॉकटर कंटेनर के अंदर चल रहा है।

— u123

अपने पोर्ट की परिभाषा को बदल सकते हैं-p 8080:8080 -p 8081:8081

— जॉर्ज

हा निर्दिष्ट 'docker रन -it -p 8080: 8080 -e "HOST = 0.0.0.0" -v $ {PWD}: / app / -v / app / node_modules --name my-frontend my-frontend-image' कार्य ! इसलिए काम के लिए गर्म पुनः लोड करने के लिए एप्लिकेशन को 8080 से पोर्ट मैप करने की आवश्यकता है। लेकिन क्यों??

— u123 20:59

Answer 1

मैं बिल्कुल भी एक VueJS उपयोगकर्ता नहीं हूं, इसके साथ कभी काम नहीं किया, लेकिन मैं अपने विकास वर्कफ़्लो के लिए डॉकटर का भारी उपयोग करता हूं, और अतीत में मुझे एक समान समस्या का अनुभव हुआ।

मेरे मामले में, ब्राउज़र को भेजा गया जावास्क्रिप्ट डॉकटर कंटेनर के आंतरिक पोर्ट से जुड़ने की कोशिश कर रहा था 8080, लेकिन एक बार होस्ट के लिए मैप किया गया था 8081, ब्राउज़र में जेएस 8080डॉकटर कंटेनर के अंदर नहीं पहुंच पा रहा था , इसलिए हॉट रीलोड काम नहीं कर रहा था।

तो मुझे ऐसा लगता है कि आपके पास भी मेरे जैसा ही परिदृश्य है, इस प्रकार आपको अपने VueJS ऐप को कॉन्फ़िगर करने की आवश्यकता है ताकि जिस होस्ट में आप उपयोग करना चाहते हैं, उसी पोर्ट में सुनने के लिए हॉट रील लोड करें, या आप दोनों के लिए एक ही पोर्ट का उपयोग करें पहले से ही निष्कर्ष निकाला है कि यह काम करता है।

Comments

हाँ लगता है। एक स्पष्टीकरण के साथ दिलचस्प हो सकता है - हालांकि अभी मुझे वर्णित के रूप में अपने वर्कअराउंड को लागू करने के लिए याद रखने की आवश्यकता है। जैसा कि मैंने वर्णन किया है कि यह बॉक्स से बाहर काम करता है अगर मैं इसके बजाय 'vue-cli-service सर्व' का उपयोग करता हूं तो ऐसा होना चाहिए जो कच्चे 'webpack-dev-server' में टूट गया हो।

— अपराह्न १२:३१

'वेबपैक-देव-सर्वर' में कुछ भी नहीं टूटा है, आपको बस यह समझने की जरूरत है कि डॉकर कैसे काम करता है। Docker लाइव रीलोड के लिए एक ब्लैक बॉक्स की तरह है। सभी के लिए यह स्थानीयहोस्ट के साथ अपनी बात रखता है, डॉकटर नहीं।

— Exadra37

Answer 2

अगर watchOptions काम नहीं करता है, तो आप दूसरे विकल्प आज़मा सकते हैं:

 environment:

  - CHOKIDAR_USEPOLLING=true

यहाँ डॉक्स के अनुसार:

“अगर देखना आपके लिए काम नहीं करता है, तो इस विकल्प को आज़माएं। वर्चुअलबॉक्स में NFS और मशीनों के साथ देखना काम नहीं करता है। ”

संदर्भ:

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

Comments

यह सुनिश्चित करने के बारे में सुनिश्चित नहीं करें कि आप क्या सुझाते हैं, लेकिन जैसा कि मैं समझता हूं कि इसे पर्यावरण चर के रूप में सेट करने की आवश्यकता है। अगर मैं ऐसा करता हूं तो इसे चलाने का कोई प्रभाव नहीं है। मेरी अपडेट की गई पोस्ट देखें। इसके अलावा आप जो लिंक प्रदान करते हैं वह कहता है कि यह केवल एक वीएम में चलने पर ही प्रासंगिक है।

— --१२