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

113

Istnieje konfiguracja serwera deweloperskiego pakietu webpack (jest to część całej konfiguracji):

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

Uruchamiam webpack za 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 deweloperskiego za pomocą http://localhost:8080mojego lokalnego komputera, ale chcę również uzyskać dostęp do mojego serwera z telefonu komórkowego, tabletu (są w tej samej sieci Wi-Fi).

Jak mogę to włączyć? Dzięki!

malcoauri
źródło
Wydaje się, że to powinno już działać, biorąc pod uwagę, że host jest ustawiony na 0.0.0.0.
Felix Kling
@FelixKling, ale jakiego adresu IP powinienem użyć w Safari na moim iPhonie?
malcoauri
Adres IP komputera, na którym działa serwer.
Felix Kling
2
Mogłem tylko zmusić go do pracy z webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIppatrz github.com/webpack/webpack-dev-server/issues/882
Nickofthyme

Odpowiedzi:

200

(Jeśli korzystasz z komputera Mac i sieci takiej jak moja).

Uruchom webpack-dev-server z --host 0.0.0.0- pozwala to serwerowi nasłuchiwać żądań z sieci, a nie tylko lokalnego hosta.

Znajdź adres swojego komputera w sieci. W terminalu wpisz ifconfigi poszukaj en1sekcji lub tej z czymś w rodzajuinet 192.168.1.111

Korzystając z urządzenia mobilnego w tej samej sieci, odwiedź http://192.168.1.111:8080i ciesz się rozkoszą dla programistów.

forresto
źródło
4
U mnie też to działa, ale pojawia się pusta strona. Mogę przewijać i mieć tytuł witryny, gdy przeglądam karty. Może masz pomysł, jak to naprawić?
moesphemie
2
Działa również na Ubuntu 17.10. Jeśli ifconfignie jest zainstalowany, adres IP można znaleźć za pośrednictwemip addr show
TitanFighter
1
Czy w celu uruchomienia serwera deweloperskiego --host 0.0.0.0powinniśmy nadal zaktualizować jakiś plik konfiguracyjny, czy mogę po prostu uruchomić npm run dev --host 0.0.0.0? Bo aktualnie jak uruchamiam komendę bez zmiany czegokolwiek to wyrzuca błąd. Jeśli musimy zaktualizować jakiś plik konfiguracyjny, czy mógłbyś nam podać nazwę pliku / katalog?
PrintlnParams
npm run dev --host 0.0.0.0 zgłasza błąd wskazujący, że program szuka „0.0.0.0” jako nazwy modułu. Kiedy zmieniłem wartość w pliku index.js mojego projektu na „0.0.0.0” z „localhost”, zadziałało.
Wasilij Hall
1
nadal pracuję dla mnie w grudniu '18. Do Twojej wiadomości, zamiast szukać adresu IP w terminalu, wykonuję następujące czynności: cmd + [spacja]> Narzędzie sieciowe, mój adres IP jest drugą pozycją poniżej. To wydaje się działać za każdym razem, gdy tego próbuję.
jared
91

Możesz ustawić swój adres IP bezpośrednio w pliku konfiguracyjnym webpacka:

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}
Igor Alemasow
źródło
1
To zadziałało dla mnie, wartość to 0.0.0.0, która zadziałała.
Wasilij Hall
2
W systemie Windows działało dla mnie z wifi, napisałem do hostaipconfig > IPv4 Address
URL87
1
To zdecydowanie najlepsza, ośmielę się powiedzieć, jedyna odpowiedź. Dlaczego nie zostało to oznaczone jako takie ?!
Kamal
Jeśli chcesz również użyć open: trueflagi, możesz również ustawić, openPage: 'http://localhost:8080'a twoja przeglądarka uruchomi się ponownie poprawnie, zamiast próbować automatycznie załadować 0.0.0.0:8080 i kończy się niepowodzeniem.
Mark
Działa, ale pamiętaj o wiązaniu 0.0.0.0 w miejscach publicznych, w których ktoś inny może połączyć się z Twoim urządzeniem. Może to doprowadzić do kradzieży danych. Możesz potrzebować firewalla dla serwera deweloperskiego
Igor Adamenko
16

To może nie być idealne rozwiązanie, ale myślę, że możesz do tego użyć ngrok . Ngrok może pomóc w udostępnieniu lokalnego serwera WWW w Internecie. Możesz wskazać ngrok na swoim lokalnym serwerze deweloperskim, a następnie skonfigurować aplikację do korzystania z adresu URL ngrok.

np. załóżmy, że twój serwer działa na porcie 8080 . Możesz użyć ngrok, aby pokazać to światu zewnętrznemu poprzez bieganie

./ngrok http 8080

Wyjście ngrok tutaj

Dobrą rzeczą ngrokjest to, że zapewnia bezpieczniejszą wersję https odsłoniętego adresu URL, którą dajesz każdej innej osobie na świecie w celu przetestowania lub pokazania swojej pracy.

Ma również wiele opcji dostosowywania dostępnych w poleceniu, takich jak ustawienie przyjaznej dla użytkownika nazwy hosta zamiast losowego ciągu w ujawnionym adresie URL i wiele innych rzeczy.

Jeśli chcesz tylko otworzyć swoją stronę internetową, aby sprawdzić responsywność mobilną, powinieneś wybrać browersync .

WitVault
źródło
8

Ostatecznie pomogło mi dodanie tego do konfiguracji webpack-dev-server:

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

a potem także zmieniając plik webpack.config.js babel:

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

Teraz po prostu uzyskaj nazwę hosta swojego komputera ( hostnamena terminalu OSX), dodaj zdefiniowany port i możesz korzystać z telefonu komórkowego.

W porównaniu do ngrok.io, to rozwiązanie umożliwia również korzystanie z modułu do ponownego ładowania na gorąco w serwisie mobilnym.

Andrus Asumets
źródło
7

Nie mogłem skomentować, aby dodać dodatkowe informacje do odpowiedzi forresto, ale tutaj w przyszłości (2019) będziesz musiał dodać --publicflagę ze względu na lukę w zabezpieczeniach --host 0.0.0.0. Sprawdź ten komentarz, aby uzyskać więcej informacji.

Aby uniknąć „odpowiadania na inne odpowiedzi” jako odpowiedzi, oto rada firmy Forresto oraz dodatkowe szczegóły, które będą potrzebne, aby to zadziałało:

Dodaj oba:

--host 0.0.0.0

i

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

gdzie twój-host to nazwa hosta (dla mnie to (nazwa) s-macbook-pro.local)), a port to dowolny port, do którego próbujesz uzyskać dostęp (dla mnie jest to 8081).

Oto jak wygląda mój plik package.json:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },
Ciężkie bombardowanie
źródło
Niestety to nie zadziałało. Jestem w systemie Windows 10 i po prostu nie mogę uzyskać dostępu do mojej aplikacji internetowej dla programistów za pomocą telefonu komórkowego. Przeglądarka mobilna wyświetla mi tylko komunikat o przekroczeniu limitu czasu. Kiedy uruchamiam aplikację internetową na tym samym laptopie z systemem Windows 10, ale obsługuję ją przez tomcat, mogę uzyskać dostęp do tej lokalnej aplikacji internetowej, wpisując adres IP mojego laptopa z systemem Windows, a następnie numer portu. Naprawdę nie wiem, dlaczego jest to możliwe, ale nie mogę otworzyć lokalnej aplikacji internetowej działającej na serwerze deweloperskim z pakietem sieciowym. Czy ktoś ma jakieś pomysły na to, co jeszcze mógłbym spróbować, aby moja lokalna aplikacja internetowa miała dostęp do mojego telefonu komórkowego?
ampersand83