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


112

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!


Sepertinya itu seharusnya sudah berfungsi, mengingat tuan rumah disetel ke 0.0.0.0.
Felix Kling

@FelixKling tapi alamat ip apa yang harus saya gunakan di Safari iPhone saya untuk itu?
malcoauri

IP mesin tempat server dijalankan.
Felix Kling

2
Saya hanya bisa membuatnya berfungsi dengan webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIpmelihat github.com/webpack/webpack-dev-server/issues/882
Nickofthyme

Jawaban:


199

(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.


4
Bagi saya ini berfungsi juga tetapi saya mendapatkan halaman kosong. Saya dapat menggulir dan memiliki judul situs saat menelusuri tab. Apakah Anda mungkin punya ide untuk memperbaikinya?
moesphemie

2
Juga berfungsi di Ubuntu 17.10. Jika ifconfigtidak diinstal, alamat IP dapat ditemukan melaluiip addr show
TitanFighter

1
Untuk menjalankan server dev --host 0.0.0.0, haruskah kita tetap memperbarui beberapa file konfigurasi atau dapatkah saya menjalankannya npm run dev --host 0.0.0.0? Karena saat ini ketika saya menjalankan perintah tanpa mengubah apapun itu melontarkan kesalahan. Jika kami memang harus memperbarui beberapa file konfigurasi, dapatkah Anda menghubungi kami nama file / direktori?
PrintlnParams

npm run dev --host 0.0.0.0 menampilkan kesalahan yang menunjukkan program mencari "0.0.0.0" sebagai nama modul. Ketika saya mengubah nilai di dalam file index.js proyek saya menjadi "0.0.0.0" dari "localhost", maka itu berhasil.
Vasily Hall

1
masih bekerja di Desember '18 untuk saya. FYI daripada mencari Alamat IP di terminal saya melakukan hal berikut: cmd + [spasi]> Utilitas Jaringan, Alamat IP saya adalah item kedua ke bawah. Itu sepertinya berhasil setiap kali saya mencobanya.
Jared

90

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

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

1
Ini berhasil bagi saya, nilainya 0.0.0.0 yang berhasil.
Vasily Hall

2
Pada windows itu bekerja untuk saya dengan wifi saya menulis host diipconfig > IPv4 Address
URL87

1
Sejauh ini, ini yang terbaik, saya berani katakan, satu-satunya jawaban. Kenapa belum ditandai seperti itu ?!
Kamal

Jika Anda juga ingin menggunakan open: trueflag tersebut, Anda juga dapat mengatur openPage: 'http://localhost:8080'dan browser Anda akan diluncurkan kembali dengan benar, daripada mencoba memuat 0.0.0.0:8080 secara otomatis dan gagal.
Markus

Ini berfungsi, tetapi berhati-hatilah untuk mengikat 0.0.0.0 di tempat umum di mana orang lain dapat terhubung ke perangkat Anda. Ini dapat menyebabkan data Anda dicuri. Anda mungkin memerlukan firewall untuk server dev, seperti ini: github.com/funbox/webpack-dev-server-firewall
Igor Adamenko

16

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

keluaran ngrok disini

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 .


8

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.


7

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",
    ...
  },

Sayangnya itu tidak berhasil untuk saya. Saya menggunakan windows 10 dan tidak dapat mengakses aplikasi web dev saya dengan ponsel saya. Browser seluler memberi saya kesalahan waktu tunggu. Ketika saya memulai aplikasi web di laptop windows 10 yang sama, tetapi menyajikannya melalui tomcat, saya dapat mengakses aplikasi web lokal itu dengan mengetikkan alamat ip laptop windows saya diikuti dengan nomor port. Saya benar-benar tidak tahu mengapa itu mungkin tetapi saya tidak dapat membuka aplikasi web lokal yang berjalan di server pengembang webpack. Adakah yang punya ide tentang apa lagi yang bisa saya coba untuk membuat akses aplikasi web lokal saya untuk ponsel saya?
ampersand83
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.