Yerel ağdaki cihazlardan webpack-dev-server'a nasıl erişilir?

Bazı web paketi geliştirici sunucu yapılandırması var (tüm yapılandırmanın bir parçası):

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'i aşağıdaki komutla çalıştırıyorum:

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

Ben kullanarak dev sunucuya erişim elde edebilirsiniz http://localhost:8080benim yerel makinede, ama aynı zamanda benim mobil, tablet benim sunucuya erişmek istediğiniz (bunlar aynı Wi-Fi ağına içindedir).

Nasıl etkinleştirebilirim? Teşekkürler!

(Mac kullanıyorsanız ve benimki gibi bir ağ kullanıyorsanız.)

Webpack-dev-server'ı çalıştırın --host 0.0.0.0- bu, sunucunun yalnızca localhost'u değil, ağdan gelen istekleri dinlemesini sağlar.

Bilgisayarınızın adresini ağ üzerinde bulun. Terminalde, bölümü veya benzeri bir şeye sahip olanı yazın ifconfigve arayınen1inet 192.168.1.111

Aynı ağdaki mobil cihazınızda, ziyaret edin http://192.168.1.111:8080ve sıcak yeniden yükleme geliştirmenin keyfini çıkarın.

IP adresinizi doğrudan web paketi yapılandırma dosyasında ayarlayabilirsiniz:

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

Mükemmel bir çözüm olmayabilir ama bunun için ngrok'u kullanabileceğinizi düşünüyorum . Ngrok , yerel bir web sunucusunu internete açmanıza yardımcı olabilir . Ngrok'u yerel geliştirme sunucunuza yönlendirebilir ve ardından uygulamanızı ngrok URL'sini kullanacak şekilde yapılandırabilirsiniz.

Örneğin, sunucunuzun 8080 numaralı bağlantı noktasında çalıştığını varsayalım . Bunu çalıştırarak dış dünyaya göstermek için ngrok'u kullanabilirsiniz.

./ngrok http 8080

İyi olan şey , çalışmanızı test etmek veya göstermek için dünyadaki herhangi bir kişiye verdiğiniz, maruz kalan url'nin ngrokdaha güvenli bir https sürümünü sağlamasıdır.

Ayrıca, komutta , açığa çıkan url'de rastgele dizge yerine kullanıcı dostu bir ana bilgisayar adı ayarlamak ve diğer birçok şey gibi birçok özelleştirme vardır .

Yalnızca web sitenizi mobil yanıt verme yeteneğini kontrol etmek için açmak istiyorsanız, browersync'e gitmelisiniz .

Benim için sonunda yardımcı olan şey bunu webpack-dev-server yapılandırmasına eklemekti:

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

ve sonra babel'in webpack.config.js dosyasını değiştirerek:

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

Şimdi sadece bilgisayarınızın ana bilgisayar adını alın ( hostnameOSX'in terminalinde), tanımladığınız bağlantı noktasını ekleyin ve mobil cihazınıza devam edebilirsiniz.

Ngrok.io ile karşılaştırıldığında bu çözüm, react'in çalışırken yeniden yükleme modülünü mobil cihazlarda kullanmanıza da izin verecektir.

Forresto'nun cevabına ek bilgi eklemek için yorum yapamadım, ancak burada gelecekte (2019) yalnızca --publicbir güvenlik açığı nedeniyle bir bayrak eklemeniz gerekecek --host 0.0.0.0. Daha fazla ayrıntı için bu yoruma göz atın .

Bir yanıt olarak "diğer yanıtlara yanıt vermekten" kaçınmak için, işte forresto'nun tavsiyesi ve bunun işe yaraması için ihtiyacınız olan ek ayrıntılar:

İkisini de ekleyin:

--host 0.0.0.0

ve

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

hostname (benim için (isim) s-macbook-pro.local) ve port, erişmeye çalıştığınız porttur (yine benim için 8081).

İşte package.json'um şöyle görünüyor:

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