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

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!

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

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

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

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 .

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.

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