wake-up-neo.com

Wie erhalte ich Zugriff auf den Webpack-Dev-Server von Geräten im lokalen Netzwerk?

Es gibt einige Webpack-Entwickler-Server-Konfigurationen (diese sind Teil der gesamten Konfiguration):

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

Ich führe das Webpack mit folgendem Befehl aus:

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

Ich kann mit http://localhost:8080 Auf meinem lokalen Computer auf den Dev-Server zugreifen, möchte aber auch von meinem mobilen Tablet aus auf meinen Server zugreifen können (diese befinden sich im selben Wi-Fi-Netzwerk).

Wie kann ich es aktivieren? Vielen Dank!

84
malcoauri

(Wenn Sie einen Mac haben und ein Netzwerk wie meins haben.)

Starte webpack-dev-server mit --Host 0.0.0.0 - Hiermit kann der Server nicht nur auf localhost warten, sondern auch auf Anfragen aus dem Netzwerk.

Finden Sie die Adresse Ihres Computers im Netzwerk. Geben Sie im Terminal ifconfig ein und suchen Sie nach dem en1 Abschnitt oder der mit etwas wie inet 192.168.1.111

Besuchen Sie auf Ihrem Mobilgerät im selben Netzwerk http://192.168.1.111:8080 und genieße das Nachladen von Dev Bliss.

153
forresto

Sie können Ihre IP-Adresse direkt in der Webpack-Konfigurationsdatei einstellen:

devServer: {
    Host: '0.0.0.0',//your ip address
    port: 8080,
    ...
}
42
Igor Alemasow

Es ist vielleicht nicht die perfekte Lösung, aber ich denke, Sie können ngrok dafür verwenden. Ngrok kann Ihnen helfen , einen lokalen Webserver für das Internet verfügbar zu machen. Sie können ngrok auf Ihren lokalen Entwickler-Server verweisen und dann Ihre App so konfigurieren, dass sie die ngrok-URL verwendet.

angenommen, Ihr Server wird auf Port 8080 ausgeführt. Sie können ngrok verwenden, um dies durch Laufen der Außenwelt zugänglich zu machen

./ngrok http 8080

ngrok output here

Das Gute an ngrok ist, dass es eine sicherere https -Version der exponierten URL bietet, die Sie anderen Personen auf der Welt zur Verfügung stellen Testen oder zeigen Sie Ihre Arbeit.

Der Befehl enthält außerdem zahlreiche Anpassungsmöglichkeiten, z. B. das Festlegen eines benutzerfreundlichen Hostnamens anstelle einer zufälligen Zeichenfolge in der angezeigten URL und vieles mehr.

Wenn Sie nur Ihre Website öffnen möchten, um die Reaktionsfähigkeit von Mobilgeräten zu überprüfen, sollten Sie browersync wählen.

14
WitVault

Für mich hat es letztendlich geholfen, Folgendes zur webpack-dev-server-Konfiguration hinzuzufügen:

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

und dann auch die Datei webpack.config.js von babel ändern:

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

Holen Sie sich jetzt Ihren Computer-Hostnamen (hostname auf dem OSX-Terminal), fügen Sie den von Ihnen definierten Port hinzu und schon können Sie mobil arbeiten.

Im Vergleich zu ngrok.io können Sie mit dieser Lösung auch das Hot-Reload-Modul von react auf Mobilgeräten verwenden.

6
Andrus Asumets

Ich konnte keine Kommentare abgeben, um der Antwort von forresto zusätzliche Informationen hinzuzufügen, aber in Zukunft (2019) müssen Sie aufgrund einer Sicherheitslücke mit --public Allein ein --Host 0.0.0.0 - Flag hinzufügen. Check out dieser Kommentar für weitere Details.

Um zu vermeiden, "auf andere Antworten zu antworten", finden Sie hier Forrestos Rat und die zusätzlichen Details, die Sie benötigen, damit dies funktioniert:

Beides hinzufügen:

--Host 0.0.0.0

und

--public <your-Host>:<port>

dabei ist Ihr-Host der Hostname (für mich ist es (Name) s-macbook-pro.local) und Port ist der Port, auf den Sie zugreifen möchten (für mich wiederum 8081).

So sieht meine package.json aus:

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

3
Blitz