স্থানীয় নেটওয়ার্কের ডিভাইস থেকে কীভাবে ওয়েবপ্যাক-ডেভ-সার্ভার অ্যাক্সেস পাবেন?

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আমার স্থানীয় মেশিনে ডেভ সার্ভারটিতে অ্যাক্সেস পেতে পারি , তবে আমি আমার মোবাইল, ট্যাবলেট (তারা একই Wi-Fi নেটওয়ার্কে থাকা) থেকে আমার সার্ভারটিতে অ্যাক্সেস পেতে চাই।

আমি কীভাবে এটি সক্ষম করতে পারি? ধন্যবাদ!

Comments

হোস্টটি ০.০.০.০-তে সেট করা আছে এমনটি ইতিমধ্যে কাজ করা উচিত বলে মনে হচ্ছে।

— ফেলিক্স ক্লিং

@ ফেলিক্সকলিং তবে এর জন্য আমার আইফোনের সাফারিতে আমি কোন আইপি ঠিকানাটি ব্যবহার করব?

— ম্যালকৌরি

সার্ভার চালিত মেশিনের আইপি।

— ফেলিক্স ক্লিং

আমি শুধু সঙ্গে কাজ করার এটি পেতে পারে 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

আমার জন্য এটি খুব কাজ করছে তবে আমি একটি ফাঁকা পৃষ্ঠা পাচ্ছি। আমি যখন ট্যাবগুলি ব্রাউজ করি তখন আমি স্ক্রোল করতে পারি এবং একটি সাইটের শিরোনাম পেতে পারি। কীভাবে এটি ঠিক করবেন আপনার সম্ভবত ধারণা আছে?

— মাইসফেমি

উবুন্টু 17.10 এও কাজ করে। যদি ifconfigইনস্টল করা হয়নি, IP ঠিকানা মাধ্যমে পাওয়া যেতে পারেip addr show

— TitanFighter

এর সাথে ডেভ সার্ভারটি চালানোর জন্য --host 0.0.0.0, আমাদের এখনও কিছু কনফিগার ফাইল আপডেট করা উচিত বা আমি কেবল চালাতে npm run dev --host 0.0.0.0পারি? কারণ বর্তমানে যখন আমি কোনও পরিবর্তন না করে কমান্ডটি চালিত করি তখন এটি একটি ত্রুটি নিক্ষেপ করে। আমাদের যদি কিছু কনফিগার ফাইল আপডেট করতে হয় তবে আপনি কি আমাদের ফাইলের নাম / ডিরেক্টরিটি টেলিফোন করতে পারবেন?

— মুদ্রণপ্রেমগুলি

এনপিএম রান দেব - হোস্ট ০.০.০.০ ত্রুটিটি ছুঁড়ে দেয় যা নির্দেশ করে যে প্রোগ্রামটি মডিউলের নাম হিসাবে "0.0.0.0" সন্ধান করছে। আমি যখন আমার প্রকল্পের ইনডেক্স.জেএস ফাইলের মানটি "লোকালহোস্ট" থেকে "০.০.০.০" এ পরিবর্তন করেছি, তখন এটি কাজ করেছিল।

— ভ্যাসিলি হল

এখনও আমার জন্য ডিসেম্বর '18 এ কাজ করে। এফওয়াইআই আইপি ঠিকানার পরিবর্তে টার্মিনালটিতে আমি নিম্নলিখিতটি করি: সেন্টিমিডি + [স্পেস]> নেটওয়ার্ক ইউটিলিটি, আমার আইপি ঠিকানাটি দ্বিতীয় আইটেমের নীচে। প্রতিবার চেষ্টা করার পরেও এটি কাজ করে বলে মনে হচ্ছে।

— 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.01.0 সর্বজনীন জায়গায় বাঁধন সম্পর্কে সচেতন হন যেখানে অন্য কেউ আপনার ডিভাইসে সংযোগ করতে পারে। এটি আপনার ডেটা চুরি হতে পারে। দেব সার্ভারের জন্য আপনার যেমন ফায়ারওয়ালের দরকার হতে পারে: github.com/funbox/webpack-dev-server-firewall

— Igor Adamenko

Answer 3

এটি নিখুঁত সমাধান নাও হতে পারে তবে আমি মনে করি আপনি এটির জন্য এনগ্রোক ব্যবহার করতে পারেন । এনগ্রোক আপনাকে একটি স্থানীয় ওয়েব সার্ভার ইন্টারনেটে প্রকাশ করতে সহায়তা করতে পারে । আপনি স্থানীয় স্থানীয় সার্ভারে এনগ্রোককে নির্দেশ করতে পারেন এবং তারপরে এনগ্রোক ইউআরএল ব্যবহার করতে আপনার অ্যাপ্লিকেশনটি কনফিগার করতে পারেন।

যেমন ধরুন আপনার সার্ভারটি 8080 পোর্টে চলছে । দৌড়ের মাধ্যমে বাইরের বিশ্বে তা প্রকাশ করতে আপনি এনগ্রোক ব্যবহার করতে পারেন

./ngrok http 8080

ভালো কথাটি ngrokহ'ল এটি এক্সপোজড ইউআরএল এর আরও সুরক্ষিত https সংস্করণ সরবরাহ করে যা আপনি বিশ্বের অন্য যে কোনও ব্যক্তিকে আপনার কাজ পরীক্ষা বা দেখানোর জন্য দেন।

এছাড়াও এটি কমান্ডে প্রচুর কাস্টমাইজেশন উপলভ্য রয়েছে যেমন এক্সপোজড ইউআরএলটিতে র্যান্ডম স্ট্রিংয়ের পরিবর্তে কোনও ব্যবহারকারী বান্ধব হোস্টনাম সেট করুন এবং প্রচুর অন্যান্য জিনিস।

মোবাইলের প্রতিক্রিয়াশীলতা যাচাই করতে আপনি যদি কেবল নিজের ওয়েবসাইটটি খুলতে চান তবে আপনার ব্রাউজার সিঙ্কে যাওয়া উচিত ।

Answer 4

আমার জন্য, যা শেষ পর্যন্ত এইটিকে ওয়েবপ্যাক-ডেভ-সার্ভার কনফিগারেশনে যুক্ত করেছিল:

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

এবং তারপরে বাবেলের ওয়েবপ্যাক.কনফিগ.জেএস ফাইলটিও পরিবর্তন করা হচ্ছে:

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

এখনই আপনার কম্পিউটারের হোস্ট-নেম পান (hostname ওএসএক্সের টার্মিনালে) পান, আপনি যে পোর্টটি সংজ্ঞায়িত করেছেন তা যুক্ত করুন এবং আপনার মোবাইলে যেতে ভাল।

Ngrok.io এর তুলনায়, এই সমাধানটি আপনাকে মোবাইলে রিঅ্যাক্টের হট রিলোডিং মডিউলটি ব্যবহার করতে দেয়।

Answer 5

ফরেস্টোর উত্তরে অতিরিক্ত তথ্য যুক্ত করার জন্য আমি মন্তব্য করতে পারিনি, তবে এখানে ভবিষ্যতে (2019) একা --publicসুরক্ষার দুর্বলতার কারণে আপনাকে একটি পতাকা যুক্ত করতে হবে --host 0.0.0.0। পরীক্ষা করে দেখুন এই মন্তব্যটি আরো বিস্তারিত জানার জন্য।

একটি উত্তর হিসাবে "অন্যান্য উত্তরের জবাব দেওয়া" এড়াতে যাতে এখানে ফরেস্টোর পরামর্শ এবং অতিরিক্ত কাজগুলি আপনাকে এই কাজটি করতে হবে তা এই:

উভয় যুক্ত করুন:

--host 0.0.0.0

এবং

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

যেখানে আপনার হোস্টটি হোস্টনাম (আমার কাছে এটি (নাম) এস-ম্যাকবুক-প্রো.লোকাল)) এবং পোর্টটি আপনি যে কোনও বন্দরটি অ্যাক্সেস করার চেষ্টা করছেন তা আবার (আবার, আমার জন্য এটি 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 ল্যাপটপে কোনও ওয়েব অ্যাপ্লিকেশন শুরু করি তবে টমক্যাটের মাধ্যমে এটি পরিবেশন করি আমি আমার উইন্ডোজ ল্যাপটপের আইপি অ্যাড্রেস টাইপ করে পোর্ট নম্বরটি অনুসরণ করে সেই স্থানীয় ওয়েব অ্যাপ্লিকেশনটি অ্যাক্সেস করতে সক্ষম হয়েছি। কেন সম্ভব তা আমি সত্যিই জানি না তবে আমি কোনও স্থানীয় ওয়েব অ্যাপ খুলতে পারি না যা একটি ওয়েবপ্যাক ডিভারেভারে চলছে। আমার মোবাইল ফোনের জন্য আমি কীভাবে স্থানীয় স্থানীয় অ্যাপ্লিকেশনটি অ্যাক্সেস করার চেষ্টা করতে পারি সে সম্পর্কে কারও কি ধারণা আছে?

— এম্পারস্যান্ড 83