वेबपैक देव सर्वर को पोर्ट 80 पर और 0.0.0.0 पर सार्वजनिक रूप से सुलभ बनाने के लिए कैसे करें?

Question

मैं पूरी करने के लिए नया हूँ NodeJS / reactjs दुनिया इतनी क्षमा याचना करता है, तो मेरे सवाल लगता है मूर्ख। इसलिए मैं reactabular.js के साथ खेल रहा हूँ ।

जब भी मैं ऐसा करता हूं npm startहमेशा चलता रहता है localhost:8080।

मैं 0.0.0.0:8080इसे सार्वजनिक रूप से सुलभ बनाने के लिए इसे चलाने के लिए कैसे बदलूं ? मैं उपरोक्त रेपो में स्रोत कोड को पढ़ने की कोशिश कर रहा हूं, लेकिन उस फ़ाइल को खोजने में विफल रहा जो यह सेटिंग करती है।

इसके अलावा, यह जोड़ने के लिए - 80अगर यह संभव है तो मैं इसे पोर्ट पर कैसे चलाऊं?

Answer 1

मेरे लिए कुछ इस तरह से काम किया। मैं अनुमान लगा रहा हूं कि यह आपके लिए काम करना चाहिए।

इसका उपयोग करके webpack-dev चलाएं

webpack-dev-server --host 0.0.0.0 --port 80

और इसे webpack.config.js में सेट करें

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

नोट यदि आप हॉट लोडिंग का उपयोग कर रहे हैं, तो आपको यह करना होगा।

इसका उपयोग करके webpack-dev चलाएं

webpack-dev-server --host 0.0.0.0 --port 80

और इसे webpack.config.js में सेट करें

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]

Comments

नमस्ते, मैं इस के लिए नया हूँ, लेकिन अपने ग्राहक स्क्रिप्ट के लिए redux का उपयोग करना चाहूंगा। समस्या यह है कि आवेदन एक .net अनुप्रयोग है जो सामग्री और जोंस एंडपॉइंट की सेवा देता है। इसलिए विकास के दौरान ऐसा करने के लिए मुझे <script src="http://localhost:8080/webpack-dev-server.js"></script>पेज को जोड़ने और कुछ क्रॉस डोमेन को अनुमति देने की आवश्यकता है? ये उपकरण दिलचस्प लगते हैं, लेकिन लगता है कि आपका सर्वर नोड है या मैं कुछ याद कर रहा हूं?

— एचएमआर

शायद यह मेरी मदद करेगा: webpack.github.io/docs/webpack-dev-server.html#proxy मैं जावास्क्रिप्ट फ़ाइलों के लिए अनुरोधों को छोड़कर हर चीज के लिए प्रॉक्सी का उपयोग करने के बारे में सोचूंगा और वेबपैक सर्वर, हॉटलोडर और रेडक्स टाइमरवेल द्वारा किए गए कुछ अनुरोध। हां /data:image ..., ... .jsऔर/sockjs-node...

— एचएमआर

यदि आपको अमान्य होस्ट हैडर मिलता है, तो आपको webpack.serve.config.js में true पर disableHostCheck सेट करने की आवश्यकता हो सकती है। Github.com/webpack/webpack-dev-server/issues/882 देखें । आपकी स्थिति के आधार पर, यह एक सुरक्षा छेद हो सकता है इसलिए सावधान रहें।

— ब्रायन डिटर्लिंग

Answer 2

यह है कि मैं यह कैसे किया और यह बहुत अच्छी तरह से काम करने लगता है।

आप webpack.config.js फ़ाइल में निम्नलिखित जोड़ते हैं:

devServer: {
    inline:true,
    port: 8008
  },

स्पष्ट रूप से आप किसी भी पोर्ट का उपयोग कर सकते हैं जो दूसरे के साथ विवाद नहीं कर रहा है। मैं संघर्ष मुद्दे का उल्लेख केवल इसलिए करता हूं क्योंकि मैंने लगभग 4 घंटे बिताए हैं। एक समस्या से लड़ने के लिए केवल यह जानना कि मेरी सेवाएं एक ही बंदरगाह पर चल रही थीं।

Comments

मुझे लगता है कि यह विन्यास फाइल के एंट्री सेक्शन में होस्ट और पोर्ट को निर्दिष्ट करने के बजाय है?

— जोटीडे

क्या आप दस्तावेज़ में लिंक जोड़ सकते हैं ?

— पानी

सीधे शब्दों में इनलाइन जोड़ना: मेरे लिए सच काम किया। BTW वेबपैक फ़ाइल जो मैंने संपादित की वह थी 'webpack.dev.conf.js (मार्च 2018 के अनुसार)।

— सीन ओ

Answer 3

वेबपैक कॉन्फ़िगर करें (webpack.config.js में):

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}

Comments

इसके लिए काम नहीं कर रहा है। devServer: {इनलाइन: ट्रू, होस्ट: '0.0.0.0', पोर्ट: 8088},

— एनके चौधरी

मेरे लिए इसका काम जब मैं (webpack.config) का उपयोग करता हूं: devServer: {host: 'xx.xx.xx.xxx', port: 8089},

— Dijo

इसने मेरे लिए एक बहुत ही करीबी संबंधित समस्या हल कर दी, जबकि वह उडेमी पर Redux पाठ्यक्रम के साथ आधुनिक प्रतिक्रिया का पालन करने की कोशिश कर रही थी । मैं Windows पर मेरे विकास पर्यावरण चल रहा हूँ एक में Vagrant आभासी बॉक्स। पाठ्यक्रम विकास के माहौल को स्थापित करने के बारे में बिल्कुल कोई मार्गदर्शन प्रदान नहीं करता है।

— विंस

हाँ, इसने एक मुद्दे को संबोधित किया था जो मुझे Cloud9 उदाहरण पर वेबपैक चल रहा था। धन्यवाद!

— मैन्क्विक

मैं उपरोक्त स्निपेट का उपयोग करके पोर्ट नंबर को बदलने में सक्षम था लेकिन मेजबान अभी भी नहीं बदला। मैंने होस्ट को 0.0.0.0 बनाने की कोशिश की, ताकि मैं साइट को आईपी-एड्रेस से एक्सेस कर सकूं लेकिन यह काम नहीं किया। इसे प्राप्त करने में कोई मदद?

— रिटो

Answer 4

मैं जावास्क्रिप्ट विकास और रिएक्टजेएस के लिए नया हूं। मैं एक जवाब खोजने में असमर्थ था, जो मेरे लिए काम करता है, जब तक कि प्रतिक्रिया-लिपियों के कोड को देखकर इसका पता नहीं लगा लिया जाए। ReactJS 15.4.1+ प्रतिक्रिया-लिपियों का उपयोग करके आप पर्यावरण चर का उपयोग करके एक कस्टम होस्ट और / या पोर्ट के साथ शुरू कर सकते हैं:

HOST='0.0.0.0' PORT=8080 npm start

उम्मीद है कि इससे मेरे जैसे नए लोगों को मदद मिलेगी।

Answer 5

मेरे लिए काम करने के बाद -

1) इसमें Package.jsonजोड़ें:

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2) webpack.config.jsइसे कॉन्फ़िगर वस्तु के तहत जोड़ें जो आप निर्यात करते हैं:

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3) अब टर्मिनल प्रकार पर: npm run dev

4) # 3 संकलन के बाद और अपने ब्राउजर के पते पर कुंजी के रूप में तैयार करें http://GACDTL001SS369k:8080/

आपका ऐप उम्मीद करता है कि अब बाहरी URL के साथ काम कर रहा होगा जिसे अन्य उसी नेटवर्क पर एक्सेस कर सकते हैं।

PS: GACDTL001SS369kमेरा कंप्यूटर नाम था, इसलिए जो कुछ भी आपकी मशीन पर है, उसे बदल दें।

Answer 6

यदि आप 'create-react-app' के साथ बनाए गए रिएक्ट एप्लिकेशन में हैं, तो अपने पास जाएं package.jsonऔर बदलें

"start": "react-scripts start",

... ( यूनिक्स )

"start": "PORT=80 react-scripts start",

या ... ( जीत )

"start": "set PORT=3005 && react-scripts start"

Comments

या नोड_मॉड्यूल / प्रतिक्रिया-स्क्रिप्ट / स्क्रिप्ट / start.js संपादित करें और DEFAULT_PORT और HOST बदलें। जब एनपीएम अपडेट पर नई वर्जन की फाइलें अपडेट होती हैं, तो बस ओवरराइटिंग पर फाइल को सुरक्षित रखें।

— रोजेलियो ट्रिविनो

Answer 7

JSON कॉन्फ़िग फ़ाइल में मेरे लिए काम करने के बाद:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

Answer 8

मैंने कुछ अन्य उत्तरों के साथ संघर्ष किया। (मेरा सेटअप यह है: मैं npm run devवेबपैक ३.१२.० के साथ चल रहा हूं vue init webpack। विंडोज के तहत २pack.०४ वर्चुअलबॉक्स पर मेरे प्रोजेक्ट का उपयोग करने के बाद । मेरे पास होस्ट के लिए ३००० पोर्ट फॉरवर्ड करने के लिए योनि कॉन्फ़िगर है।)

• दुर्भाग्य से डाल npm run dev --host 0.0.0.0 --port 3000काम नहीं किया --- यह अभी भी लोकलहोस्ट पर चला: 8080।
• इसके अलावा, फ़ाइल webpack.config.jsमौजूद नहीं थी और इसे बनाने से कोई मदद नहीं मिली।
• फिर मैंने पाया कि कॉन्फ़िगरेशन फ़ाइलें अब build/webpack.dev.conf.js( build/webpack.base.conf.jsऔर build/webpack.prod.conf.js) में स्थित हैं । हालाँकि, इन फ़ाइलों को संशोधित करने के लिए यह एक अच्छा विचार नहीं था, क्योंकि वे वास्तव में HOST और PORT से पढ़ते हैं process.env।

इसलिए मैंने प्रक्रिया को सेट करने के तरीके के बारे में खोज की । वीवी चर और कमांड चलाकर सफलता हासिल की:

HOST=0.0.0.0 PORT=3000 npm run dev

ऐसा करने के बाद, मुझे अंततः "आपका आवेदन यहां चल रहा है: http://0.0.0.0:3000 " और मैं अंत में इसे localhost:3000होस्ट मशीन से ब्राउज़ करके देख सकता हूं ।

संपादित करें: यह करने के लिए एक और तरीका मिला देव मेजबान और पोर्ट को संपादित करके config/index.js।

Answer 9

मेरे लिए: सुनने के होस्ट को बदलने से काम हुआ:

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

इसे बदल दिया गया था:

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

और सर्वर 0.0.0.0 पर सुनना शुरू कर दिया

Answer 10

मैंने ऊपर दिए गए समाधानों की कोशिश की, लेकिन कोई भाग्य नहीं था। मैंने इस लाइन को अपने प्रोजेक्ट के पैकेज में देखा। json:

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

},

मैंने bin/webpack-dev-server.jsइस लाइन को देखा और पाया:

.describe("port", "The port").default("port", 8080)

मैंने बंदरगाह को 3000 में बदल दिया। एक क्रूर बल दृष्टिकोण के एक बिट, लेकिन यह मेरे लिए काम किया।

Answer 11

Package.json में "प्रारंभ" मान को निम्नानुसार बदलते हैं

नोट: भागो $ sudo npm प्रारंभ , आपको पोर्ट 80 पर प्रतिक्रिया स्क्रिप्ट चलाने के लिए sudo का उपयोग करने की आवश्यकता है

Answer 12

मेरे लिए, इस कोड ने काम किया। बस इसे अपनी package.jsonफ़ाइल में जोड़ें :

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

और स्क्रिप्ट "बिल्ड" को चलाकर चलाएं npm run build

Answer 13

मैंने आसानी से दूसरे पोर्ट का उपयोग करने के लिए यह कोशिश की:

PORT=80 npm run dev