Wir hatten gestern im Discord-Chat eine Diskussion darüber, und anscheinend ist es eine Entwurfsentscheidung, nur die lokale IP zu binden. Meiner Meinung nach sollte sich Gatsby auch wie andere Build-Tools (Create-React-App oder Meteor) verhalten und über einen Entwicklungsserver verfügen, auf den über das Netzwerk zugegriffen werden kann.

_httpteapot_:
Kann Gatsby Develop (v1 oder v2) einen Port so binden, dass er über das lokale Netzwerk mit $ MY_COMPUTER_IP: 8000 zugänglich ist?
Wie zum Beispiel die Create-React-App

_ghardin137_
nur während der entwicklung oder mit "gatsby dienen"

_httpteapot_
Ich bin an dieser Funktion während der Entwicklung interessiert, aber Gatsby Develop öffnet keinen über das Netzwerk zugänglichen Port
(es sei denn, das Problem ist etwas anderes)

_LekoArts_
Holen Sie sich Ihre lokale IP mit zB devip (npm-Paket) und verwenden Sie dann -H $ YOURIP $ -p $ YOURPORT $

_ghardin137_
Standardmäßig hört es auf 0.0.0.0
das wäre alles
Daher sollte es für das Netzwerk zugänglich sein

_httpteapot_
Hum, also sollte es funktionieren, weil ich es mehrfach in mehreren Netzwerken versucht habe und nie in der Lage war, von einem anderen Gerät in meinem Netzwerk aus eine Verbindung zum Entwicklungsserver herzustellen

_ghardin137_
Ich kann es sehr schnell versuchen, aber ich bin mir ziemlich sicher, dass es funktioniert

_httpteapot_
und es arbeitete immer an der Create-React-App und anderen Tools

_LekoArts_
Es hat auch nie bei mir funktioniert. Deshalb benutze ich das Flag -H

_httpteapot_
Ich bin unter Linux

_LekoArts_
Windows 10 hier

_ghardin137_
Ich arbeite hier gut an Sieg 10 für mich

_httpteapot_
Ich kenne das Flag -H nicht. Zu welchem ​​Befehl soll ich es hinzufügen?

_LekoArts_
gatsby entwickle -H% YOURIP $

_ghardin137_
Warten Sie, ich war im Aufschlagmodus
entwickeln ist nur lokal

_httpteapot_
Gut, dass es reproduzierbar ist: smiley:
Und -H Flagge funktioniert tatsächlich

_ghardin137_
Ja, also Gatsby Build, dann funktioniert Gatsby Serve: Smiley:

_httpteapot_
Mein Anwendungsfall ist jedoch der Entwicklungsmodus und der Test auf meinem Mobiltelefon
Das ist ziemlich häufig, denke ich

_LekoArts_
Seit browserSync ja

_ghardin137_
Ja

_httpteapot_
Sollte ich ein Problem im Gatsby Repo eröffnen?

_ghardin137_
Ich vermute, dass dies wie beabsichtigt funktioniert, aber diese Flagge dokumentiert zu haben, wäre nützlich

_httpteapot_
Öffnen Sie also eine Funktionsanfrage
Ich finde die Funktionsweise von Meteor + Create-React-App intuitiver

_ghardin137_
https://github.com/gatsbyjs/gatsby/issues/561

_ [GaiJin] XiaoDie_
@LekoArts Danke für den -H-Flag-Trick: mild_smile:

_ghardin137_
Wenn Sie eine PR einfügen möchten, um die Dokumente mit diesen Informationen zu aktualisieren, sind sie sicher dafür offen: smiley:

_LekoArts_
https://www.gatsbyjs.org/docs/

_ghardin137_
Es würde wahrscheinlich nicht schaden, auch dort eine vollständige Liste der Optionen zu haben: smiley:

_LekoArts_
Ich habe einmal eine PR dafür gemacht
Sie mochten es nicht

_ghardin137_
Es heißt jedoch, dass die Entwicklung nur auf localhost erfolgt
Das macht also Sinn

Sie können auch gatsby develop -H 0.0.0.0

Danke, @mquandalle.

Bitte beachten Sie in unseren zukünftigen Arbeiten / Diskussionen, dass die Verwendung des Ansatzes gatsby develop -H 192.168.1.100 -p 8000 (ich verwende MacOS) anscheinend verhindert, dass die HMR-Hot-Refresh funktioniert (zumindest mit meinen bisherigen Bemühungen).

Welche Geräte verwenden Sie? HMR arbeitet immer noch für mich. FWIW Ich benutze Mac und iPhone, vielleicht sprechen sie besser miteinander 😄

Hallo nochmal, @ryanditjia : smile:

Danke für deinen Beitrag.

Ich verwende den Server unter MacOS und greife mit Chrome, Firefox und Safari auf die Site zu, die auf demselben Computer bereitgestellt wird. Meine anderen Geräte aus dem lokalen LAN sind sowohl iOS als auch Android.

Um genau zu sein:

Ich benutze Garn

Ich habe den folgenden Skripteintrag als Teil von package.json :

"scripts": {
    "build": "gatsby build",
    "dev": "gatsby develop",
    "dev-m": "gatsby develop -H 0.0.0.0 -p 8000",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Wenn ich yarn dev ausführe, kann ich nur lokal mit http://localhost:8000 von dem Computer aus auf die Site zugreifen, der die Site bedient. HMR funktioniert gut.

Wenn ich yarn dev-m ausführe, kann ich von anderen Geräten in meinem lokalen LAN aus mit http://192.168.1.10:8000 (IP des Servers) auf die Site zugreifen, aber HMR aktualisiert Änderungen nicht automatisch.

Wenn HMR wirklich an Ihrem Setup arbeitet, wäre ich an weiteren Details interessiert, die Sie möglicherweise an Ihrem Setup haben und die ich auf meiner Seite ausprobieren könnte.

Ehrlich gesagt stimme ich @mquandalle zu, dass Gatsby ein bisschen mehr wie create-react-app und Meteor funktionieren sollte, aber - wie sie sagte - dies ist eine Designentscheidung.

Ich habe versucht, einen leeren Gatsby-Standardstarter zu erstellen. Hier sind meine Ergebnisse:

HMR voll funktionsfähig

• gatsby develop -H $HOSTNAME -p 8000
  Dies funktioniert am besten für Personen, die mit mehreren Computern arbeiten, da der Hostname dynamisch ist.
  ZB: Name-iMac. lokal: 8000 und Name-MacBook. local: 8000 (Ich setze ein Lesezeichen für diese beiden Adressen auf meinem Mobilgerät, um den Zugriff zu erleichtern.)
• gatsby develop -H 192.168.1.105 -p 8000
  Das Hardcodieren der IP ist nicht gerade hübsch - oder flexibel.

HMR funktioniert teilweise

• gatsby develop -H 0.0.0.0 -p 8000
  Die IP des Servers ist dynamisch. In meinem Fall 192.168.1.105:8000.
  HMR funktioniert für die Maschine (sowohl 0.0.0.0:8000 als auch 192.168.1.105:8000); aber nicht für Netzwerkgeräte.

Können Sie überprüfen, ob Sie das gleiche erleben?

Vielen Dank für die ausführliche Antwort, @ryanditjia.

Hier bin ich:

• Sowohl gatsby develop -H $HOSTNAME -p 8000 als auch gatsby develop -H 192.168.1.105 -p 8000 ermöglichen den Zugriff vom Server, auf dem Gatsby- und lokale LAN-Geräte ausgeführt werden, über den Hostnamen, den Hostnamen bzw. die IP-Adresse, aber immer noch keine HMR für mich.

Wenn ich sage, dass HMR nicht funktioniert, mache ich einen einfachen Test, um Text in einer Datei zu ändern und zu speichern. Es passiert nichts und auch in der Konsole der Browser-Entwicklungstools ist nichts sichtbar.

Wenn nach dem Vornehmen und Speichern von Änderungen I CTRL-C vom Gatsby-Server entfernt wird, wird die folgende Warnung in der Konsolenkonsole des Browsers angezeigt.

Update check failed: Error: Manifest request to http://server.local:8000/5bd5e2fb7d66e8b025f1.hot-update.json timed out. process-update.js:136
    at XMLHttpRequest.request.onreadystatechange (http://server.local:8000/commons.js:34:23)

• gatsby-develop ohne Parameter ermöglicht den Zugriff nur auf dem Computer, auf dem der Gatsby Dev-Server ausgeführt wird, und nicht von anderen Geräten im lokalen LAN. HMR wird fast unmittelbar nach jeder Kompilierung aktualisiert, die durch das Speichern von Änderungen an einer Datei verursacht wird.

Das ist merkwürdig. Haben Sie dies an einem sauberen Gatsby-Starter versucht?

In der Tat seltsam, @ryanditjia : verwirrt:

Zur Überprüfung der Gesundheit habe ich gerade einen neuen Download und eine Installation mit gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog . Leider sind meine Ergebnisse die gleichen wie zuvor.

Ich habe gerade das Gleiche mit gatsby new gatsby-example-site versucht und immer noch keine automatische Aktualisierung.

Für die Aufzeichnung ist meine Gatsby-Client-Version 1.1.58, aber ich hatte das gleiche Problem auf 1.1.52

Ich habe genau das gleiche Ergebnis wie @ryanditjia.

gatsby 1.1.58 (getestet mit gatsby-starter-forty )
npm 6.3.0
Knoten 8.11.3
Ubuntu 16

Problem: HMR funktioniert nur bei Verwendung einer fest codierten IP

Die von @ryanditjia vorgeschlagene fest gatsby develop --host 192.168.0.18 --port 8000 ) hat für mich hervorragend funktioniert, da ich mit HMR auf anderen Geräten darauf zugreifen kann.

Es gibt eine Einschränkung (mit der ich total leben kann): Ich kann nicht über localhost:8000 auf meinem Computer darauf zugreifen. Stattdessen muss ich 192.168.0.18:8000 oder My-Mac.local:8000 .

Das größere Problem, das mir aufgefallen ist, ist, dass ich beim Herstellen einer Verbindung zum Netzwerk nicht immer dieselbe lokale IP habe. Dies bedeutet, dass ich die fest codierte IP in meinem package.json ständig ändern muss.

Lösung: IP dynamisch abrufen

Ich wollte einen Weg finden, meine lokale IP dynamisch abzurufen und diesen als Wert für --host und schließlich habe ich es geschafft, meinen Weg zu finden, damit es funktioniert. Von meinem package.json :

{
  "scripts": {
    "develop": "gatsby develop --host $(ifconfig | awk '/inet 192\\.168\\.[0-9]+\\.[0-9]+/{print $2}') --port 8000",
    // ... other scripts
  },
  // ... other package.json stuff
}

Ich habe es nur auf meinem Computer (macOS) und mit der Gatsby-Version 2.0.0-rc.11 getestet, daher weiß ich nicht, ob Sie es einfach kopieren und in Ihr package.json einfügen können und es funktioniert. Aber es könnte anderen helfen, ihre eigene benutzerdefinierte Lösung zu entwickeln.

Kurze Erklärung des Codes

• Mit ifconfig kann ich einen Textklecks mit Informationen in meinem Netzwerk erhalten.
• In diesem Blob befindet sich dieser Text mit meiner lokalen IP: inet 192.168.0.18 .
• Um dieses Stück zu finden, leite ich den gesamten Textblock auf awk und verwende einen RegEx, um inet 192.168.x.y (wobei x und y durch einen beliebigen ersetzt werden können Nummer von 0 bis 999) und drucken Sie die IP.
• Diese IP wird dann für --host im Skriptaufruf gatsby develop .

Verwenden Sie es direkt in der Befehlszeile

Der Befehl, der in package.json verfügt über doppelte Backslashes, um die Escape-Zeichenfunktion des Backslash in JS / JSON zu umgehen ( weitere Informationen ). Kurz gesagt, wenn Sie diesen Code in der Befehlszeile ausprobieren möchten, verwenden Sie Folgendes:

gatsby develop --host $(ifconfig | awk '/inet 192\.168\.[0-9]+\.[0-9]+/{print $2}') --port 8000

Wenn Sie es in der Befehlszeile ausprobieren und an Ihre Bedürfnisse anpassen, denken Sie daran, die doppelten Backslashes wieder hinzuzufügen, wenn Sie es in scripts Ihrer package.json möchten.

Scheint, als hätte sich etwas geändert! Das einzige, was für mich irgendwie funktioniert, ist gatsby develop -H 0.0.0.0 aber ich bekomme kein HMR auf meinem Gerät.
Ich habe den Rest ausprobiert, aber auf meinem lokalen Computer oder meinem Telefon wird überhaupt keine Verbindung hergestellt.

EDIT: Mir ist gerade eingefallen, dass ich Laravel Valet auf diesem Computer installiert habe und das ist vielleicht der Grund, warum dies bei mir nicht funktioniert. Ich könnte es fast mit gatsby develop --host $(hostname) Laufen bringen, aber das funktioniert nur lokal, nicht in meinem Netzwerk.

$HOSTNAME ist auf meinen Computern fast nicht eingestellt. Also brauche ich dieses und es funktioniert einwandfrei auf meinen lokalen Netzwerkgeräten:

gatsby develop -H $(hostname) -p 8000

Dies ist jetzt mein Standard-Entwicklungsbefehl, der in package.json und mit yarn develop . Großartig!

Dies sollte über https://github.com/gatsbyjs/gatsby/pull/11227 behoben werden

Nett! Was ist die empfohlene Methode, um eine Entwicklungssite von einem anderen Gerät aus anzuzeigen? ist es gatsby develop -H $(hostname) -p 8000 oder gibt es einen anderen Weg?

@TylerBarnes Sie sollten in der Lage sein, gatsby develop -H 0.0.0.0 auszuführen und den Computer bei <IP>:8000 auf einem anderen Gerät im Netzwerk zu öffnen

Super, danke @sidharthachatterjee!

Windows:
für cmd
für / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') entwickeln gatsby --host% i
in der Konfiguration ändern Sie "zu"
für / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') entwickeln gatsby --host% i

Linux:
gatsby entwickle --host $ (route -n | grep ^ 0.0.0.0 | awk '{print $ 2}')

Unter macOS muss meiner Meinung nach auch die Dateifreigabe aktiviert sein ( System Preferences -> Sharing ).

Außerdem kann das Feld Computer Name in Ihrer URL verwendet werden. Zum Beispiel lautet mein Computername kyoto und ich kann über http://kyoto.local:8000 remote (im selben Netzwerk) auf meine Entwickler-Site zugreifen.

gatsby develop -H 0.0.0.0 funktioniert jetzt einwandfrei, 🎉

Weiß jemand, wie man das mit der Option --open Laufen bringt? Die URL, die http://0.0.0.0:8000/ öffnet, funktioniert nicht wirklich. Ich kann manuell zu localhost gehen

BEARBEITEN: Aus den Dokumenten

Hinweis: Sie können 0.0.0.0:8000 unter Windows nicht besuchen (aber die Dinge funktionieren entweder mit localhost: 8000 oder der URL "In Ihrem Netzwerk" unter Windows).

Scheint seltsam, dass der Fall nicht behandelt wird

@crhistianramirez Dieser

Hallo,

Wie kann ich meiner package.json -Datei gatsby develop -H 0.0.0.0 hinzufügen? Ich habe versucht, es in solche Skripte zu schreiben, aber es funktioniert nicht:

"scripts": {
  "build": "gatsby build",
  "develop": "gatsby develop -H 0.0.0.0",
  "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
  "start": "npm run develop",
  "serve": "gatsby serve",
  "clean": "gatsby clean",
  "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
}

@iloveip Das sieht gut aus. Sind Sie sicher, dass Sie es mit npm run develop ausführen? Wenn ja, funktioniert gatsby develop -H 0.0.0.0 auf Ihrem Computer möglicherweise aus irgendeinem Grund nicht.

@nikoladev Ich lief einfach gatsby develop 🙈 Vielen Dank für Ihre Hilfe!

Ich hatte das gleiche Problem, aber es schien ein Browser zu sein. Ich habe ursprünglich Firefox verwendet, aber es scheint auf Microsoft Edge gut zu funktionieren

Hat jemand versucht, Proxy the: 8000 mit Nginx umzukehren? Wird es Ihrer Meinung nach funktionieren?