จะเข้าถึง webpack-dev-server จากอุปกรณ์ในเครือข่ายท้องถิ่นได้อย่างไร?

มีการกำหนดค่าเซิร์ฟเวอร์ webpack dev (เป็นส่วนหนึ่งของ config ทั้งหมด):

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 ด้วยคำสั่งต่อไปนี้:

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

ฉันสามารถเข้าถึงเซิร์ฟเวอร์ dev โดยใช้http://localhost:8080บนเครื่องในพื้นที่ของฉัน แต่ฉันก็ต้องการเข้าถึงเซิร์ฟเวอร์ของฉันจากมือถือแท็บเล็ตของฉันด้วย (อยู่ในเครือข่าย Wi-Fi เดียวกัน)

ฉันจะเปิดใช้งานได้อย่างไร? ขอบคุณ!

(หากคุณใช้ Mac และเครือข่ายเหมือนของฉัน)

เรียกใช้ webpack-dev-server ด้วย--host 0.0.0.0- สิ่งนี้ช่วยให้เซิร์ฟเวอร์รับฟังคำขอจากเครือข่ายไม่ใช่แค่ localhost

ค้นหาที่อยู่คอมพิวเตอร์ของคุณบนเครือข่าย ในเทอร์มินัลให้พิมพ์ifconfigและค้นหาen1ส่วนหรือส่วนที่มีคำสั่งเช่นinet 192.168.1.111

ในอุปกรณ์มือถือของคุณบนเครือข่ายเดียวกันเยี่ยมชมhttp://192.168.1.111:8080และเพลิดเพลินกับการโหลดใหม่

คุณสามารถตั้งค่าที่อยู่ IP ของคุณได้โดยตรงในไฟล์กำหนดค่า webpack:

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

อาจไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ แต่ฉันคิดว่าคุณสามารถใช้ngrokสำหรับสิ่งนี้ได้ Ngrokสามารถช่วยให้คุณเปิดเผยเว็บเซิร์ฟเวอร์ภายในสู่อินเทอร์เน็ตได้ คุณสามารถชี้ ngrok ที่เซิร์ฟเวอร์ dev ในพื้นที่ของคุณจากนั้นกำหนดค่าแอปของคุณให้ใช้ ngrok URL

เช่นสมมติว่าเซิร์ฟเวอร์ของคุณกำลังทำงานอยู่บนพอร์ต8080 คุณสามารถใช้ ngrok เพื่อเปิดเผยสิ่งนั้นสู่โลกภายนอกผ่านการวิ่ง

./ngrok http 8080

สิ่งที่ดีngrokคือมีURL ที่เปิดเผยในเวอร์ชันhttps ที่ปลอดภัยยิ่งขึ้นซึ่งคุณมอบให้กับบุคคลอื่นในโลกเพื่อทดสอบหรือแสดงผลงานของคุณ

นอกจากนี้ยังมีการปรับแต่งมากมายในคำสั่งเช่นตั้งชื่อโฮสต์ที่เป็นมิตรกับผู้ใช้แทนที่จะเป็นสตริงแบบสุ่มใน url ที่เปิดเผยและสิ่งอื่น ๆ อีกมากมาย

ถ้าคุณเพียงต้องการที่จะเปิดเว็บไซต์ของคุณเพื่อตรวจสอบการตอบสนองของมือถือที่คุณควรไปสำหรับbrowersync

สำหรับฉันในที่สุดสิ่งที่ช่วยได้คือการเพิ่มสิ่งนี้ลงในการกำหนดค่า webpack-dev-server:

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

จากนั้นเปลี่ยนไฟล์ webpack.config.js ของ babel:

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

ตอนนี้เพียงแค่รับชื่อโฮสต์คอมพิวเตอร์ของคุณ ( hostnameบนเทอร์มินัลของ OSX) เพิ่มพอร์ตที่คุณกำหนดและคุณก็พร้อมที่จะใช้งานมือถือ

เมื่อเทียบกับ ngrok.io แล้วโซลูชันนี้จะช่วยให้คุณใช้โมดูลการรีโหลดแบบร้อนของ react บนมือถือได้

ฉันไม่สามารถแสดงความคิดเห็นเพื่อเพิ่มข้อมูลเพิ่มเติมในคำตอบของ forresto แต่ที่นี่ในอนาคต (2019) คุณจะต้องเพิ่ม--publicค่าสถานะเนื่องจากช่องโหว่ด้านความปลอดภัย--host 0.0.0.0เพียงอย่างเดียว ตรวจสอบความคิดเห็นนี้เพื่อดูรายละเอียดเพิ่มเติม

เพื่อหลีกเลี่ยง "การตอบสนองต่อคำตอบอื่น ๆ " เนื่องจากคำตอบนี่คือคำแนะนำของ forresto และรายละเอียดเพิ่มเติมที่คุณจะต้องดำเนินการนี้:

เพิ่มทั้งสองอย่าง:

--host 0.0.0.0

และ

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

โดยที่โฮสต์ของคุณคือชื่อโฮสต์ (สำหรับฉันมันคือ (ชื่อ) s-macbook-pro.local)) และพอร์ตคือพอร์ตใดก็ได้ที่คุณพยายามเข้าถึง (อีกครั้งสำหรับฉันคือ 8081)

นี่คือลักษณะของ package.json ของฉัน:

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