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

111

Es gibt einige Webpack Dev Server-Konfigurationen (sie 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 dem folgenden 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 http://localhost:8080auf meinem lokalen Computer auf den Dev-Server zugreifen, möchte aber auch von meinem Handy oder Tablet aus auf meinen Server zugreifen (diese befinden sich im selben Wi-Fi-Netzwerk).

Wie kann ich es aktivieren? Vielen Dank!

Malcoauri
quelle
Scheint so, sollte das schon funktionieren, da der Host auf 0.0.0.0 eingestellt ist.
Felix Kling
@FelixKling aber welche IP-Adresse soll ich in Safari meines iPhones dafür verwenden?
Malcoauri
Die IP des Computers, auf dem der Server ausgeführt wird.
Felix Kling
2
Ich konnte es nur zum webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp
Laufen bringen,

Antworten:

199

(Wenn Sie auf einem Mac und einem Netzwerk wie meinem arbeiten.)

Führen Sie webpack-dev-server mit aus --host 0.0.0.0- damit kann der Server auf Anforderungen aus dem Netzwerk warten , nicht nur auf localhost.

Suchen Sie die Adresse Ihres Computers im Netzwerk. Geben Sie im Terminal ifconfigden en1Abschnitt oder den mit so etwas ein und suchen Sie ihninet 192.168.1.111

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

forresto
quelle
4
Für mich funktioniert es auch, aber ich bekomme eine leere Seite. Ich kann scrollen und einen Site-Titel haben, wenn ich durch die Registerkarten blättere. Haben Sie vielleicht eine Idee, wie Sie das beheben können?
Moesphemie
2
Funktioniert auch unter Ubuntu 17.10. Wenn ifconfignicht installiert, kann IP-Adresse überip addr show
TitanFighter
1
Sollten --host 0.0.0.0wir zum Ausführen des Dev-Servers noch eine Konfigurationsdatei aktualisieren oder kann ich sie einfach ausführen npm run dev --host 0.0.0.0? Denn wenn ich gerade den Befehl ausführe, ohne etwas zu ändern, wird ein Fehler ausgegeben. Wenn wir eine Konfigurationsdatei aktualisieren müssen, können Sie uns bitte den Dateinamen / das Verzeichnis mitteilen?
PrintlnParams
npm run dev --host 0.0.0.0 löst den Fehler aus, der angibt, dass das Programm nach "0.0.0.0" als Modulnamen sucht. Wenn ich den Wert in der Datei index.js meines Projekts von "localhost" in "0.0.0.0" geändert habe, hat es funktioniert.
Vasily Hall
1
Ich arbeite immer noch im Dezember 18 für mich. Zu Ihrer Information: Anstatt im Terminal nach der IP-Adresse zu suchen, gehe ich wie folgt vor: cmd + [Leerzeichen]> Netzwerkdienstprogramm, meine IP-Adresse ist das zweite Element, das nicht verfügbar ist. Das scheint jedes Mal zu funktionieren, wenn ich es versuche.
Jared
89

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

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}
Igor Alemasow
quelle
Dies hat bei mir funktioniert, der Wert ist 0.0.0.0, was funktioniert hat.
Vasily Hall
2
Unter Windows funktionierte es für mich mit WLAN. Ich schrieb den Host inipconfig > IPv4 Address
URL87
1
Dies ist bei weitem die beste, wage ich zu sagen, nur Antwort. Warum wurde es nicht als solches markiert?!
Kamal
Wenn Sie auch das open: trueFlag verwenden möchten, können Sie es auch setzen openPage: 'http://localhost:8080'und Ihr Browser wird ordnungsgemäß erneut gestartet, anstatt zu versuchen, 0.0.0.0:8080 automatisch zu laden, und dies schlägt fehl.
Mark
Es funktioniert, aber beachten Sie, dass Sie 0.0.0.0 an öffentlichen Orten binden müssen, an denen sich möglicherweise eine andere Person mit Ihrem Gerät verbindet. Dies kann dazu führen, dass Ihre Daten gestohlen werden. Möglicherweise benötigen Sie eine Firewall für den Entwicklungsserver wie diese: github.com/funbox/webpack-dev-server-firewall
Igor Adamenko
16

Es ist vielleicht nicht die perfekte Lösung, aber ich denke, Sie können ngrok dafür verwenden. Ngrok kann Ihnen dabei helfen , einen lokalen Webserver dem Internet auszusetzen . Sie können ngrok auf Ihren lokalen Entwicklungsserver verweisen und dann Ihre App für die Verwendung der ngrok-URL konfigurieren.

Angenommen, Ihr Server wird auf Port 8080 ausgeführt . Sie können ngrok verwenden, um dies durch Laufen der Außenwelt auszusetzen

./ngrok http 8080

ngrok Ausgabe hier

Das Gute daran ngrokist, dass es eine sicherere https- Version der exponierten URL bietet, die Sie jeder anderen Person auf der Welt geben, um Ihre Arbeit zu testen oder zu zeigen.

Außerdem stehen im Befehl viele Anpassungen zur Verfügung, z. B. das Festlegen eines benutzerfreundlichen Hostnamens anstelle einer zufälligen Zeichenfolge in der angezeigten URL und viele andere Dinge.

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

WitVault
quelle
8

Für mich hat es letztendlich geholfen, dies der Webpack-Dev-Server-Konfiguration hinzuzufügen:

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

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

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

Holen Sie sich jetzt einfach den Hostnamen Ihres Computers ( hostnameauf 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-Reloading-Modul von react auf Mobilgeräten verwenden.

Andrus Asumets
quelle
7

Ich konnte keinen Kommentar abgeben, um die Antwort von forresto um zusätzliche Informationen zu erweitern, aber hier in der Zukunft (2019) müssen Sie --publicaufgrund einer Sicherheitslücke --host 0.0.0.0allein ein Flag hinzufügen . Schauen Sie sich diesen Kommentar für weitere Details an.

Um zu vermeiden, dass Sie auf andere Antworten antworten, finden Sie hier den Rat von forresto sowie die zusätzlichen Details, die Sie benötigen, damit dies funktioniert:

Fügen Sie beide hinzu:

--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 ist es wieder 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",
    ...
  },
Blitz
quelle
Leider hat das bei mir nicht funktioniert. Ich bin unter Windows 10 und kann mit meinem Handy einfach nicht auf meine Entwickler-Webanwendung zugreifen. Der mobile Browser gibt mir nur einen Timeout-Fehler. Wenn ich eine Web-App auf demselben Windows 10-Laptop starte, diese jedoch über einen Tomcat bereitstelle, kann ich auf diese lokale Web-App zugreifen, indem ich die IP-Adresse meines Windows-Laptops gefolgt von der Portnummer eingebe. Ich weiß wirklich nicht, warum das möglich ist, aber ich kann keine lokale Webanwendung öffnen, die auf einem Webpack-Devserver ausgeführt wird. Hat jemand eine Idee, was ich sonst noch versuchen könnte, um meine lokale Webanwendung für mein Mobiltelefon zugänglich zu machen?
kaufmännisches