Bagaimana cara mendapatkan akses ke webpack-dev-server dari perangkat di jaringan lokal?

Ada beberapa konfigurasi server dev webpack (itu bagian dari konfigurasi keseluruhan):

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

Saya menjalankan webpack dengan perintah berikut:

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

Saya bisa mendapatkan akses ke server dev menggunakan http://localhost:8080di mesin lokal saya, tetapi saya juga ingin mendapatkan akses ke server saya dari ponsel, tablet saya (mereka berada di jaringan Wi-Fi yang sama).

Bagaimana cara mengaktifkannya? Terima kasih!

(Jika Anda menggunakan Mac dan jaringan seperti milik saya.)

Jalankan webpack-dev-server dengan --host 0.0.0.0- ini memungkinkan server mendengarkan permintaan dari jaringan, bukan hanya localhost.

Temukan alamat komputer Anda di jaringan. Di terminal, ketik ifconfigdan cari en1bagian atau bagian dengan sesuatu sepertiinet 192.168.1.111

Di perangkat seluler Anda di jaringan yang sama, kunjungi http://192.168.1.111:8080dan nikmati dev bliss hot reload.

Anda dapat mengatur alamat ip Anda langsung di file konfigurasi webpack:

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

Ini mungkin bukan solusi yang tepat tapi saya rasa Anda bisa menggunakan ngrok untuk ini. Ngrok dapat membantu Anda mengekspos server web lokal ke internet. Anda dapat mengarahkan ngrok ke server dev lokal Anda dan kemudian mengkonfigurasi aplikasi Anda untuk menggunakan URL ngrok.

misalnya Misalkan server Anda berjalan pada port 8080 . Anda dapat menggunakan ngrok untuk mengeksposnya ke dunia luar melalui berlari

./ngrok http 8080

Hal ngrokbaiknya adalah ia menyediakan versi https yang lebih aman dari url terekspos yang Anda berikan kepada orang lain di dunia untuk menguji atau menunjukkan pekerjaan Anda.

Juga memiliki banyak penyesuaian yang tersedia dalam perintah seperti mengatur nama host yang ramah pengguna alih-alih string acak di url yang terbuka dan banyak hal lainnya.

Jika Anda hanya ingin membuka situs web Anda untuk memeriksa daya tanggap seluler, Anda harus menggunakan sinkronisasi browser .

Bagi saya, yang membantu akhirnya adalah menambahkan ini ke konfigurasi webpack-dev-server:

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

dan kemudian juga mengubah file webpack.config.js babel:

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

Sekarang dapatkan nama host komputer Anda ( hostnamedi terminal OSX), tambahkan port yang Anda tentukan, dan Anda siap menggunakan perangkat seluler.

Dibandingkan dengan ngrok.io, solusi ini juga memungkinkan Anda menggunakan modul pemuatan ulang panas react di ponsel.

Saya tidak dapat berkomentar untuk menambahkan informasi tambahan ke jawaban forresto, tetapi di sini di masa mendatang (2019) Anda harus menambahkan --publicbendera karena kerentanan keamanan --host 0.0.0.0sendirian. Lihat komentar ini untuk lebih jelasnya.

Untuk menghindari "menanggapi jawaban lain" sebagai jawaban, berikut saran forresto ditambah detail tambahan yang Anda perlukan agar ini berfungsi:

Tambahkan keduanya:

--host 0.0.0.0

dan

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

di mana host-Anda adalah nama host (bagi saya itu adalah (nama) s-macbook-pro.local)) dan port adalah port apa pun yang Anda coba akses (sekali lagi, bagi saya itu 8081).

Jadi, inilah tampilan package.json saya:

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