Jak uzyskać dostęp do webpack-dev-server z urządzeń w sieci lokalnej?

Question

Istnieją pewne config server WebPack dev (to część całego 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); 
    }; 
    } 

mogę wykonać WebPACK pomocą następującego polecenia:

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 

mogę uzyskać dostęp do serwera dev użyciu http://localhost:8080 na mój lokalny komputer, ale chcę też uzyskać dostęp do mojego serwera z telefonu komórkowego, tabletu (są one w tej samej sieci Wi-Fi). Jak mogę to włączyć? Dzięki!

Answer 1

To może nie być idealne rozwiązanie, ale myślę, że możesz użyć do tego celu ngrok. Ngrok może pomóc ujawnić lokalny serwer WWW w Internecie. Możesz wskazać ngrok na swoim lokalnym serwerze deweloperskim, a następnie skonfigurować aplikację tak, aby korzystała z adresu URL ngrok.

np. Załóżmy, że Twój serwer działa na porcie . Można użyć ngrok narazić że do świata zewnętrznego poprzez prowadzenie

./ngrok http 8080 

dobrą rzeczą ngrok jest to, że zapewnia bardziej bezpieczne https wersja odsłoniętego URL, który dajesz do innej osoby świat, aby przetestować lub pokazać swoją pracę.

Posiada również wiele dostosowań dostępnych w komendzie, takich jak ustawienie przyjaznej dla użytkownika nazwy o nazwie hosta zamiast losowego ciągu znaków w odsłoniętym adresie URL i wielu innych rzeczach.

Jeśli chcesz otworzyć witrynę, aby sprawdzić szybkość reakcji na telefony komórkowe, powinieneś wybrać numer browersync.

Answer 2

(Jeśli jesteś na Mac i sieciowych, takich jak moja.)

Run WebPACK-dev-serwer z --host 0.0.0.0 - to pozwala serwer nasłuchuje żądań z sieci, nie tylko localhost.

Znajdź adres swojego komputera w sieci. W terminalu wpisz ifconfig i poszukaj sekcji en1 lub jednego z czymś takim inet 192.168.1.111

w urządzeniu mobilnym w tej samej sieci, odwiedź http://192.168.1.111:8080 i cieszyć się ciepłą przeładunek dev szczęściem.

Answer 3

Dla mnie, co pomogło w końcu był to dodanie do konfiguracji WebPack-dev-serwer:

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

a następnie także zmieniającym Babla plik webpack.config.js:

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

Teraz tylko pobierz nazwę komputera na komputerze (hostname na terminalu OSX), dodaj zdefiniowany port i możesz korzystać z urządzeń mobilnych.

W porównaniu z ngrok.io, to rozwiązanie pozwoli ci również korzystać z modułu szybkiego ładowania reagowania na urządzeniach mobilnych.