स्थानीय नेटवर्क में उपकरणों से वेबपैक-देव-सर्वर तक पहुंच कैसे प्राप्त करें?

Question

कुछ वेबपैक देव सर्वर कॉन्फिग है (यह पूरे कॉन्फिग का हिस्सा है):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

मैं निम्नलिखित कमांड के साथ वेबपैक निष्पादित करता हूं:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

मैं http://localhost:8080अपने स्थानीय मशीन का उपयोग करके देव सर्वर तक पहुंच प्राप्त कर सकता हूं, लेकिन मैं अपने मोबाइल, टैबलेट (वे उसी वाई-फाई नेटवर्क में हैं) से अपने सर्वर तक पहुंच प्राप्त करना चाहते हैं।

मैं इसे कैसे सक्षम कर सकता हूं? धन्यवाद!

Comments

ऐसा लगता है कि पहले से ही काम करना चाहिए, यह देखते हुए कि मेजबान 0.0.0.0 पर सेट है।

— फेलिक्स क्लिंग

@FelixKling लेकिन इसके लिए मुझे अपने iPhone की Safari में किस IP पते का उपयोग करना चाहिए?

— मलकोरी

मशीन का आईपी जहां सर्वर चलता है।

— फेलिक्स क्लिंग

मैं केवल इसे webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIpदेखने के साथ काम करने के लिए मिल सकता हूं github.com/webpack/webpack-dev-server/issues/882

— Nickofthyme

Answer 1

(यदि आप मैक पर हैं और मेरा जैसा नेटवर्क है।)

वेबपैक-डेव सर्वर चलाएं --host 0.0.0.0- इससे सर्वर नेटवर्क से अनुरोधों को सुन सकता है, न कि केवल लोकलहोस्ट।

नेटवर्क पर अपने कंप्यूटर का पता खोजें। टर्मिनल, प्रकार में ifconfigऔर के लिए देखो en1अनुभाग या की तरह कुछ के साथ एकinet 192.168.1.111

एक ही नेटवर्क पर अपने मोबाइल डिवाइस में, http://192.168.1.111:8080हॉट रीलोडिंग देव आनंद पर जाएँ और आनंद लें।

Comments

मेरे लिए यह बहुत काम कर रहा है, लेकिन मुझे एक खाली पेज मिल रहा है। जब मैं टैब के माध्यम से ब्राउज़ करता हूं, तो मैं स्क्रॉल कर सकता हूं और साइट का शीर्षक रख सकता हूं। क्या आपको शायद अंदाजा है कि इसे कैसे ठीक किया जाए?

— moesphemie

इसके अलावा उबंटू 17.10 पर काम करता है। यदि ifconfigस्थापित नहीं है, तो आईपी पते के माध्यम से पाया जा सकता हैip addr show

— टाइटनफाइटर

देव सर्वर को चलाने के लिए --host 0.0.0.0, क्या हमें अभी भी कुछ कॉन्फिग फाइल को अपडेट करना चाहिए या मैं बस चला सकता हूं npm run dev --host 0.0.0.0? क्योंकि वर्तमान में जब मैं कुछ भी बदले बिना कमांड चलाता हूं तो यह एक एरर फेंक देता है। अगर हमें कुछ कॉन्फिग फाइल अपडेट करनी है, तो क्या आप हमें फाइल का नाम / डायरेक्टरी बता सकते हैं?

— PrintlnParams

npm रन dev --host 0.0.0.0 त्रुटि को इंगित करता है जो मॉड्यूल नाम के रूप में प्रोग्राम "0.0.0.0" की तलाश में है। जब मैंने अपने प्रोजेक्ट के index.js फ़ाइल के अंदर का मान "लोकलहोस्ट" से "0.0.0.0" में बदल दिया, तब इसने काम किया।

— वसीली हॉल

अभी भी मेरे लिए दिसम्बर 18 में काम कर रहा हूँ। FYI करने के बजाय टर्मिनल में IP एड्रेस की तलाश में मैं निम्नलिखित कार्य करता हूं: cmd + [space]> नेटवर्क यूटिलिटी, मेरा IP एड्रेस दूसरा आइटम डाउन है। मुझे लगता है कि हर बार काम करने की कोशिश करता हूं।

— jared

Answer 2

आप अपने आईपी पते को सीधे वेबपैक विन्यास फाइल में सेट कर सकते हैं:

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

Comments

यह मेरे लिए काम करता है, मान 0.0.0.0 है जो काम करता है।

— वसीली हॉल

विंडोज़ पर इसने मेरे लिए काम किया वाईफाई के साथ मैंने होस्ट कियाipconfig > IPv4 Address

— URL87

यह, अब तक, सबसे अच्छा है, मैं कहता हूं, केवल जवाब देने की हिम्मत करो। ऐसा क्यों नहीं चिह्नित किया गया है ?!

— कमल

यदि आप भी open: trueध्वज का उपयोग करना चाहते हैं , तो आप भी सेट कर सकते हैं openPage: 'http://localhost:8080'और आपका ब्राउज़र ठीक से फिर से लॉन्च होगा, बजाय स्वचालित रूप से 0.0.0.0:8080 लोड करने और विफल होने का प्रयास करने के लिए।

— मार्क

यह काम करता है, लेकिन सार्वजनिक स्थानों पर 0.0.0.0 को बांधने के बारे में जागरूक रहें जहां कोई और आपके डिवाइस से जुड़ सकता है। इससे आपका डेटा चोरी हो सकता है। आपको इस तरह से देव सर्वर के लिए फ़ायरवॉल की आवश्यकता हो सकती है: github.com/funbox/webpack-dev-server-firewall

— इगोर एडमेंको

Answer 3

यह सही समाधान नहीं हो सकता है, लेकिन मुझे लगता है कि आप इसके लिए ngrok का उपयोग कर सकते हैं । Ngrok आपको एक स्थानीय वेब सर्वर को इंटरनेट पर उजागर करने में मदद कर सकता है । आप अपने स्थानीय देव सर्वर पर ngrok को इंगित कर सकते हैं और फिर ngrok URL का उपयोग करने के लिए अपने ऐप को कॉन्फ़िगर कर सकते हैं।

उदाहरण के लिए मान लीजिए कि आपका सर्वर पोर्ट 8080 पर चल रहा है । आप चलाने के माध्यम से बाहरी दुनिया को बेनकाब करने के लिए ngrok का उपयोग कर सकते हैं

./ngrok http 8080

अच्छी बात ngrokयह है कि यह उजागर url का एक अधिक सुरक्षित https संस्करण प्रदान करता है जिसे आप दुनिया के किसी अन्य व्यक्ति को अपना काम परखने या दिखाने के लिए देते हैं।

इसके अलावा कमांड में बहुत सारे अनुकूलन उपलब्ध हैं जैसे कि उजागर यूआरएल में यादृच्छिक स्ट्रिंग के बजाय एक उपयोगकर्ता के अनुकूल होस्टनाम सेट करें और बहुत सी अन्य चीज़।

यदि आप सिर्फ मोबाइल जवाबदेही की जांच के लिए अपनी वेबसाइट खोलना चाहते हैं, तो आपको ब्राउजरसिंक के लिए जाना चाहिए ।

Answer 4

मेरे लिए, अंततः वेबपैक-देव-सर्वर कॉन्फिगर में इसे जोड़ने में क्या मदद मिली:

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

और फिर भी babel के webpack.config.js फ़ाइल को बदलना:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

अब बस अपना कंप्यूटर होस्टनाम ( hostnameOSX के टर्मिनल पर) प्राप्त करें, आपके द्वारा परिभाषित पोर्ट जोड़ें, और आप मोबाइल पर जाने के लिए अच्छे हैं।

Ngrok.io की तुलना में, यह समाधान आपको मोबाइल पर प्रतिक्रिया के गर्म लोडिंग मॉड्यूल का उपयोग करने देगा।

Answer 5

फॉरेस्टो के जवाब में अतिरिक्त जानकारी जोड़ने के लिए मैं टिप्पणी नहीं कर सकता, लेकिन यहां भविष्य में (2019) आपको अकेले --publicसुरक्षा सुरक्षा भेद्यता के कारण झंडा जोड़ने की आवश्यकता होगी --host 0.0.0.0। की जाँच करें इस टिप्पणी अधिक जानकारी के लिए।

एक उत्तर के रूप में "अन्य उत्तरों का जवाब देने" से बचने के लिए यहां फॉरेस्टो की सलाह के अलावा इस काम को करने के लिए अतिरिक्त विवरणों की आवश्यकता होगी:

दोनों को जोड़ें:

--host 0.0.0.0

तथा

--public <your-host>:<port>

जहाँ आपका होस्ट होस्टनाम है (मेरे लिए यह (नाम) s-macbook-pro.local)) और पोर्ट जो भी पोर्ट आप एक्सेस करने की कोशिश कर रहे हैं (फिर, मेरे लिए यह 8081 है)।

तो यहाँ मेरा पैकेज क्या है। इस तरह दिखता है:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },

Comments

दुर्भाग्य से यह मेरे लिए काम नहीं किया। मैं विंडोज़ 10 पर हूँ और मैं अपने मोबाइल फोन के साथ अपने वेब वेब पर नहीं पहुँच सकता। मोबाइल ब्राउज़र बस मुझे टाइमआउट त्रुटि देता है। जब मैं समान विंडोज़ 10 लैपटॉप पर एक वेब ऐप शुरू करता हूं, लेकिन इसे एक टॉमकट के माध्यम से सेवा करता हूं तो मैं पोर्ट नंबर के बाद अपने विंडोज़ लैपटॉप के आईपी एड्रेस टाइप करके उस स्थानीय वेब ऐप का उपयोग कर सकता हूं। मैं वास्तव में नहीं जानता कि ऐसा क्यों संभव है, लेकिन मैं एक स्थानीय वेबप को नहीं खोल सकता, जो वेबपैक डिवोर्स पर चल रहा हो। क्या किसी के पास इस बारे में कोई विचार है कि मैं अपने मोबाइल के लिए अपने स्थानीय वेबएप को एक्सेस करने के लिए और क्या प्रयास कर सकता हूं?

— ampersand83