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:8080
mojego 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!
webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp
patrz github.com/webpack/webpack-dev-server/issues/882Odpowiedzi:
(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
ifconfig
i poszukajen1
sekcji 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:8080
i ciesz się rozkoszą dla programistów.źródło
ifconfig
nie jest zainstalowany, adres IP można znaleźć za pośrednictwemip addr show
--host 0.0.0.0
powinniś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?Możesz ustawić swój adres IP bezpośrednio w pliku konfiguracyjnym webpacka:
źródło
ipconfig > IPv4 Address
open: true
flagi, 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.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
Dobrą rzeczą
ngrok
jest 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 .
źródło
Ostatecznie pomogło mi dodanie tego do konfiguracji webpack-dev-server:
a potem także zmieniając plik webpack.config.js babel:
Teraz po prostu uzyskaj nazwę hosta swojego komputera (
hostname
na 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.
źródło
Nie mogłem skomentować, aby dodać dodatkowe informacje do odpowiedzi forresto, ale tutaj w przyszłości (2019) będziesz musiał dodać
--public
flagę 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:
źródło