Nous avons eu une discussion à ce sujet sur le chat Discord hier, et apparemment ne lier que l'adresse IP locale est une décision de conception. Mon opinion est également que Gatsby devrait se comporter comme les autres outils de construction (create-react-app ou Meteor) et disposer d'un serveur de développement accessible par le réseau.

_httpteapot_:
Est-ce que gatsby develop (v1 ou v2) peut lier un port pour qu'il soit accessible depuis le réseau local en utilisant $ MY_COMPUTER_IP: 8000?
Comme create-react-app par exemple

_ghardin137_
uniquement pendant le développement ou avec "gatsby serve"

_httpteapot_
Je suis intéressé par cette fonctionnalité pendant le développement, mais gatsby develop n'ouvre pas de port réseau accessible
(sauf si le problème est autre chose)

_LekoArts_
obtenez votre ip locale avec par exemple devip (package npm) puis utilisez -H $ YOURIP $ -p $ YOURPORT $

_ghardin137_
par défaut, il écoute sur 0.0.0.0
qui serait n'importe quoi
il doit donc être accessible au réseau

_httpteapot_
Hum donc c'est censé fonctionner, car j'ai essayé sur plusieurs réseaux à plusieurs reprises et je n'ai jamais pu me connecter au serveur de développement à partir d'un autre appareil sur mon réseau

_ghardin137_
je peux l'essayer très vite mais je suis presque sûr que ça marche

_httpteapot_
et il travaillait toujours sur create-react-app et autres outils

_LekoArts_
Cela n'a jamais fonctionné non plus pour moi. C'est pourquoi j'utilise l'indicateur -H

_httpteapot_
Je suis sous linux

_LekoArts_
windows 10 ici

_ghardin137_
fonctionne bien sur win 10 ici pour moi

_httpteapot_
Je ne suis pas familier avec l'option -H, à quelle commande dois-je l'ajouter?

_LekoArts_
gatsby develop -H% YOURIP $

_ghardin137_
Attends j'étais en mode service
développer est uniquement local

_httpteapot_
Bien que ce soit reproductible: smiley:
Et le drapeau -H fonctionne en effet

_ghardin137_
ouais alors gatsby build puis gatsby serve fonctionne: smiley:

_httpteapot_
Mais mon cas d'utilisation est le mode développement et test sur mon téléphone mobile
C'est assez courant je suppose

_LekoArts_
Depuis browserSync, oui

_ghardin137_
Ouais

_httpteapot_
Dois-je ouvrir un problème sur le dépôt gatsby?

_ghardin137_
Je soupçonne que cela fonctionne comme prévu, mais avoir ce drapeau documenté serait utile

_httpteapot_
Alors ouvrez une demande de fonctionnalité
Je trouve le fonctionnement de meteor + create-react-app plus intuitif

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

_ [GaiJin] XiaoDie_
@LekoArts Thx pour l'astuce -H flag: light_smile:

_ghardin137_
si vous vouliez mettre dans un PR pour mettre à jour les documents avec ces informations, je suis sûr qu'ils seraient ouverts à cela: smiley:

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

_ghardin137_
Cela ne ferait probablement pas de mal d'avoir une liste complète des options là aussi: smiley:

_LekoArts_
J'ai déjà fait un PR pour ça
Ils n'aimaient pas ça

_ghardin137_
mais cela dit que develop est uniquement sur localhost
donc ça a du sens

Vous pouvez également utiliser gatsby develop -H 0.0.0.0

Merci, @mquandalle.

Veuillez noter dans nos futurs travaux / discussions que l'utilisation de l'approche gatsby develop -H 192.168.1.100 -p 8000 (j'utilise MacOS) semble empêcher l'actualisation à chaud de HMR (du moins avec mes efforts jusqu'à présent).

Quels appareils utilisez-vous? HMR fonctionne toujours pour moi. FWIW J'utilise Mac et iPhone, peut-être qu'ils se parlent mieux 😄

Bonjour à nouveau, @ryanditjia : sourire:

Merci pour votre contribution.

J'exécute le serveur sur MacOS et j'accède au site servi sur la même machine, en utilisant Chrome, Firefox et Safari. Mes autres appareils du LAN local sont à la fois iOS et Android.

Pour être précis:

J'utilise du fil

J'ai l'entrée de scripts suivante dans le cadre de 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"
  },

Quand je lance yarn dev , je ne peux accéder au site en local http://localhost:8000 de la machine actuellement en service sur le site. HMR fonctionne très bien.

Lorsque j'exécute yarn dev-m , je peux accéder au site à partir d'autres appareils sur mon LAN local, en utilisant http://192.168.1.10:8000 (IP du serveur), mais HMR n'actualise pas automatiquement les modifications.

Si HMR travaille vraiment sur votre configuration, je serais intéressé par tous les détails supplémentaires que vous pourriez avoir sur votre configuration que je pourrais essayer de mon côté.

Franchement, je suis d'accord avec @mquandalle que Gatsby devrait fonctionner un peu plus comme create-react-app et Meteor , mais - comme elle l'a dit - c'est une décision de conception.

J'ai essayé de créer un démarreur par défaut Gatsby vide et voici mes résultats:

HMR pleinement opérationnel

• gatsby develop -H $HOSTNAME -p 8000
  Cela fonctionne le mieux pour les personnes travaillant avec plusieurs machines car son nom d'hôte est dynamique.
  Par exemple: Nom-iMac. local: 8000 et Nom-MacBook. local: 8000 (je mets en favoris ces 2 adresses sur mon appareil mobile pour faciliter l'accès)
• gatsby develop -H 192.168.1.105 -p 8000
  Le codage en dur de l'IP n'est pas vraiment joli ou flexible.

HMR fonctionne partiellement

• gatsby develop -H 0.0.0.0 -p 8000
  L'IP du serveur est dynamique. Dans mon cas, 192.168.1.105:8000.
  HMR fonctionne pour la machine (à la fois 0.0.0.0:8000 et 192.168.1.105:8000); mais pas pour les périphériques réseau.

Pouvez-vous vérifier si vous ressentez la même chose?

Merci pour la réponse détaillée, @ryanditjia.

Voici où j'en suis:

• Les deux gatsby develop -H $HOSTNAME -p 8000 et gatsby develop -H 192.168.1.105 -p 8000 permettent l'accès depuis le serveur exécutant Gatsby et les périphériques LAN locaux par nom d'hôte, via le nom d'hôte et l'adresse IP respectivement, mais toujours pas de HMR pour moi.

Quand je dis que HMR ne fonctionne pas, je fais un test simple pour changer le texte d'un fichier et l'enregistrer. Rien ne se passe et rien de visible dans la console des outils de développement du navigateur.

Si, après avoir effectué et enregistré des modifications, je CTRL-C hors du serveur Gatsby, l'avertissement suivant s'affiche dans la console des outils de développement du navigateur.

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 sans paramètres autorise l'accès uniquement sur la machine sur laquelle le serveur de développement Gatsby est en cours d'exécution et non à partir d'autres périphériques sur le LAN local. HMR se met à jour presque immédiatement après toute compilation causée par l'enregistrement des modifications dans un fichier.

C'est étrange. Avez-vous essayé cela sur un démarreur Gatsby propre?

Etrange en effet, @ryanditjia : confus:

Pour vérifier la cohérence, je viens de faire un nouveau téléchargement et une nouvelle installation, en utilisant gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog . Malheureusement, mes résultats sont les mêmes qu'avant.

J'ai juste essayé la même chose avec gatsby new gatsby-example-site et toujours pas d'actualisation automatique.

Pour mémoire, ma version client gatsby est la 1.1.58, mais j'ai eu le même problème sur 1.1.52

J'ai eu exactement le même résultat que @ryanditjia.

gatsby 1.1.58 (testé avec gatsby-starter-forty )
npm 6.3.0
nœud 8.11.3
ubuntu 16

Problème: HMR ne fonctionne que lors de l'utilisation d'une adresse IP codée en dur

La solution codée en dur proposée par @ryanditjia ( gatsby develop --host 192.168.0.18 --port 8000 ) a très bien fonctionné pour moi car je peux y accéder sur d'autres appareils avec HMR.

Il y a une mise en garde (avec laquelle je peux totalement vivre): je ne peux pas y accéder via localhost:8000 sur ma machine. Au lieu de cela, je dois utiliser 192.168.0.18:8000 ou My-Mac.local:8000 .

Le plus gros problème que j'ai remarqué est que je n'ai pas toujours la même adresse IP locale lorsque je me connecte au réseau et cela signifie que je dois constamment changer l'adresse IP codée en dur dans mon package.json .

Solution: obtenez une adresse IP de manière dynamique

Je voulais un moyen d'obtenir dynamiquement mon adresse IP locale et de l'utiliser comme valeur pour --host et j'ai finalement réussi à me frayer un chemin pour le faire fonctionner. De mon 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
}

Je ne l'ai testé que sur ma machine (macOS) et en utilisant la version Gatsby 2.0.0-rc.11 donc je ne sais pas si vous pouvez simplement le copier et le coller dans votre package.json et le faire fonctionner. Mais cela pourrait aider les autres à créer leur propre solution personnalisée.

Brève explication du code

• En utilisant ifconfig je peux obtenir une goutte de texte avec des informations sur mon réseau.
• Dans ce blob, il y a ce morceau de texte avec mon adresse IP locale: inet 192.168.0.18 .
• Pour trouver cette pièce, je redirige cette goutte entière de texte vers awk et j'utilise un RegEx pour trouver inet 192.168.x.y (où x et y peuvent être numéro de 0 à 999) et imprimez l'adresse IP.
• Cette adresse IP est ensuite utilisée pour --host dans l'appel de script gatsby develop .

L'utiliser directement sur la ligne de commande

La commande qui est utilisée dans package.json a des doubles barres obliques inverses pour contourner la fonction de caractère d'échappement de la barre oblique inverse dans JS / JSON ( plus d'informations ). En bref, si vous souhaitez essayer ce code dans la ligne de commande, utilisez ce qui suit:

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

Si vous l'essayez sur la ligne de commande et que vous le modifiez pour répondre à vos besoins, n'oubliez pas de rajouter les doubles barres obliques inverses si vous souhaitez l'utiliser dans scripts de votre package.json .

On dirait que quelque chose a dû changer! La seule chose qui fonctionne un peu pour moi est gatsby develop -H 0.0.0.0 mais je n'obtiens pas HMR sur mon appareil.
J'ai essayé le reste mais il ne se connecte pas du tout sur ma machine locale ou mon téléphone.

EDIT: Je viens de penser que j'ai un valet laravel installé sur cet ordinateur et c'est peut-être pourquoi cela ne fonctionne pas pour moi. Je pourrais le faire fonctionner presque avec gatsby develop --host $(hostname) mais cela ne fonctionne que localement, pas sur mon réseau.

$HOSTNAME n'est presque pas défini sur mes machines. J'ai donc besoin de celui-ci et il fonctionne parfaitement sur mes périphériques réseau locaux:

gatsby develop -H $(hostname) -p 8000

C'est maintenant ma commande de développement par défaut définie dans package.json et exécutée avec yarn develop . Génial!

Cela devrait être corrigé via https://github.com/gatsbyjs/gatsby/pull/11227

Agréable! Alors, quelle est la méthode recommandée pour afficher un site de développement à partir d'un autre appareil? est-ce gatsby develop -H $(hostname) -p 8000 ou y a-t-il un autre moyen?

@TylerBarnes Vous devriez pouvoir exécuter gatsby develop -H 0.0.0.0 et ouvrir la machine à <IP>:8000 sur un autre appareil sur le réseau

Génial, merci @sidharthachatterjee!

Les fenêtres:
pour cmd
pour / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') do gatsby develop --host% i
dans la configuration changer "en"
pour / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') do gatsby develop --host% i

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

Sur macOS, je pense que vous devez également activer le partage de fichiers ( System Preferences -> Sharing ).

De plus, le champ Computer Name peut être utilisé dans votre URL. Par exemple, le nom de mon ordinateur est kyoto et je peux accéder à mon site de développement à distance (sur le même réseau) via http://kyoto.local:8000 .

gatsby develop -H 0.0.0.0 fonctionne maintenant correctement, 🎉

Quelqu'un sait comment faire fonctionner cela avec l'option --open ? L'URL qui ouvre http://0.0.0.0:8000/ ne fonctionne pas réellement. Je peux accéder manuellement à localhost: 8000 mais je préfère ne pas

EDIT: à partir de la documentation

Remarque: vous ne pouvez pas visiter 0.0.0.0:8000 sous Windows (mais les choses fonctionneront en utilisant localhost: 8000 ou l'URL «Sur votre réseau» sous Windows)

Cela semble étrange que le cas ne soit pas traité

@crhistianramirez Ce cas de pointe est malheureusement un problème Windows (qui est apparu lors de certains tests, nous avons donc ajouté une note dans la documentation) 😞

Salut,

Comment puis-je ajouter gatsby develop -H 0.0.0.0 à mon fichier package.json ? J'ai essayé de le mettre dans des scripts comme celui-ci, mais cela ne fonctionne pas:

"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 Ça a l'air bien. Êtes-vous sûr de l'exécuter avec npm run develop ? Si c'est le cas, alors peut-être que gatsby develop -H 0.0.0.0 ne fonctionne pas sur votre machine pour une raison quelconque.

@nikoladev J'utilisais simplement gatsby develop 🙈 Merci beaucoup pour votre aide!

J'ai eu le même problème, mais cela semblait être un navigateur. J'utilisais à l'origine Firefox mais cela semble fonctionner correctement sur Microsoft Edge

Quelqu'un a-t-il essayé d'inverser le proxy du: 8000 avec nginx? Cela fonctionnera-t-il à votre avis?