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

Question

कुछ webpack डेव सर्वर config नहीं है (यह पूरी config का हिस्सा है):

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 का उपयोग कर देव सर्वर तक पहुँच प्राप्त कर सकते हैं:

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); 
    }; 
    } 

मैं निम्न आदेश के साथ webpack निष्पादित मेरी स्थानीय मशीन, लेकिन मैं अपने मोबाइल, टैबलेट से अपने सर्वर तक पहुंच प्राप्त करना चाहता हूं (वे एक ही वाई-फाई नेटवर्क में हैं)। मैं इसे कैसे सक्षम कर सकता हूं? धन्यवाद!

Answer 1

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

मान लीजिए कि आपका सर्वर पोर्ट पर चल रहा है। आप

./ngrok http 8080 

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

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

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

Answer 2

(Mac पर कर रहे हैं और मेरे जैसे नेटवर्क है।) --host 0.0.0.0 साथ

भागो webpack-देव-सर्वर - इस सर्वर नेटवर्क से अनुरोध के लिए सुनने की सुविधा देता है, बस स्थानीय होस्ट नहीं।

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

कुछ के साथ एक अपने मोबाइल डिवाइस में देखने के लिए, पर जाएँ http://192.168.1.111:8080 और गर्म reloading देव आनंद का आनंद लें।

Answer 3

मेरे लिए

, क्या मदद की अंततः webpack-देव-सर्वर config को यह जोड़ने था:

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

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

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

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

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