Вчера мы обсуждали это в чате Discord, и, очевидно, привязка только к локальному IP - это дизайнерское решение. Я также считаю, что Gatsby должен вести себя как другие инструменты сборки (create-react-app или Meteor) и иметь сервер разработки, доступный по сети.

_httpteapot_:
Может ли gatsby develop (v1 или v2) привязать порт, чтобы он был доступен из локальной сети с помощью $ MY_COMPUTER_IP: 8000?
Например, как приложение create-response-app

_ghardin137_
только во время разработки или с помощью "gatsby serve"

_httpteapot_
Меня интересует эта функция во время разработки, но gatsby develop не открывает доступный по сети порт.
(если проблема не в другом)

_LekoArts_
получите свой локальный IP-адрес, например, devip (пакет npm), а затем используйте -H $ YOURIP $ -p $ YOURPORT $

_ghardin137_
по умолчанию он слушает 0.0.0.0
что было бы чем угодно
поэтому он должен быть доступен в сети

_httpteapot_
Хм, так что это должно работать, потому что я несколько раз пробовал работать в нескольких сетях, и мне никогда не удавалось подключиться к серверу разработки с другого устройства в моей сети

_ghardin137_
Я могу попробовать это очень быстро, но я почти уверен, что это работает

_httpteapot_
и он всегда работал над приложением create-react-app и другими инструментами

_LekoArts_
У меня это тоже никогда не работало. Вот почему я использую флаг -H

_httpteapot_
Я на Linux

_LekoArts_
окна 10 здесь

_ghardin137_
отлично работает на выигрыш 10 здесь для меня

_httpteapot_
Я не знаком с флагом -H, к какой команде его следует добавить?

_LekoArts_
gatsby develop -H% YOURIP $

_ghardin137_
подождите, я был в режиме обслуживания
разработка только местная

_httpteapot_
Хорошо, что воспроизводится: smiley:
И флаг -H действительно работает

_ghardin137_
да, так что gatsby build, тогда gatsby serve действительно работает: smiley:

_httpteapot_
Но мой вариант использования - это режим разработки и тестирование на моем мобильном телефоне.
Я думаю, это довольно часто

_LekoArts_
Начиная с browserSync, да

_ghardin137_
да уж

_httpteapot_
Стоит ли мне открывать вопрос по репозиторию gatsby?

_ghardin137_
Я подозреваю, что это работает так, как задумано, но было бы полезно иметь этот флаг, задокументированный

_httpteapot_
Итак, откройте запрос функции
Мне кажется, что приложение meteor + create-react-app работает более интуитивно.

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

_ [GaiJin] XiaoDie_
@LekoArts Спасибо за трюк с флагом -H: weak_smile:

_ghardin137_
Если вы хотите добавить в документы эту информацию, я уверен, что они будут открыты для этого: smiley:

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

_ghardin137_
наверное, не помешало бы иметь там полный список опций: smiley:

_LekoArts_
Однажды я сделал пиар для этого
Им это не понравилось

_ghardin137_
но он говорит, что разработка осуществляется только на локальном хосте
так что это имеет смысл

Вы также можете использовать gatsby develop -H 0.0.0.0

Спасибо, @mquandalle.

Обязательно обратите внимание в нашей будущей работе / обсуждениях, что использование подхода gatsby develop -H 192.168.1.100 -p 8000 (я использую MacOS), похоже, препятствует работе горячего обновления HMR (по крайней мере, с моими усилиями до сих пор).

Какие устройства вы используете? HMR все еще работает для меня. FWIW Я использую Mac и iPhone, возможно, они лучше разговаривают друг с другом 😄

И снова здравствуйте, @ryanditjia : smile:

Спасибо за ваш вклад.

Я запускаю сервер на MacOS и получаю доступ к сайту, обслуживаемому на том же компьютере, с помощью Chrome, Firefox и Safari. Остальные мои устройства из локальной сети - iOS и Android.

Точнее:

Я использую пряжу

У меня есть следующая запись сценария как часть 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"
  },

Когда я бегу yarn dev , я могу получить доступ только к сайту локально с помощью http://localhost:8000 от машины в настоящее время служит сайт. HMR работает нормально.

Когда я запускаю yarn dev-m , я могу получить доступ к сайту с других устройств в моей локальной сети, используя http://192.168.1.10:8000 (IP-адрес сервера), но HMR не обновляет изменения автоматически.

Если HMR действительно работает над вашей установкой, мне было бы интересно узнать какие-либо дополнительные сведения о вашей установке, которые я мог бы попробовать на своей стороне.

Честно говоря, я согласен с @mquandalle, что Гэтсби должен работать немного больше как create-react-app и Meteor , но - как она сказала - это дизайнерское решение.

Я попытался создать пустой стартер Gatsby по умолчанию и вот мои выводы:

HMR полностью рабочий

• gatsby develop -H $HOSTNAME -p 8000
  Это лучше всего подходит для людей, работающих с несколькими компьютерами, потому что его имя хоста является динамическим.
  Например: Имя-iMac. local: 8000 и имя-MacBook. local: 8000 (я добавляю эти два адреса в закладки на мобильном устройстве для облегчения доступа)
• gatsby develop -H 192.168.1.105 -p 8000
  Жесткое кодирование IP не совсем красиво или гибко.

HMR частично рабочий

• gatsby develop -H 0.0.0.0 -p 8000
  IP-адрес сервера динамический. В моем случае 192.168.1.105:8000.
  HMR работает для машины (как 0.0.0.0:8000, так и 192.168.1.105:8000); но не для сетевых устройств.

Можете ли вы проверить, испытываете ли вы то же самое?

Спасибо за подробный ответ, @ryanditjia.

Вот где я:

• И gatsby develop -H $HOSTNAME -p 8000 и gatsby develop -H 192.168.1.105 -p 8000 разрешают доступ с сервера, на котором запущен Gatsby, и локальных устройств LAN по имени хоста, через имя хоста и IP-адрес соответственно, но для меня все еще нет HMR.

Когда я говорю, что HMR не работает, я провожу простой тест изменения текста в файле и его сохранения. Ничего не происходит и ничего не отображается в консоли инструментов разработчика браузера.

Если после внесения и сохранения изменений я CTRL-C выходит из сервера Gatsby, в консоли инструментов разработчика браузера отображается следующее предупреждение.

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 без параметров разрешает доступ только на машине, на которой запущен сервер Gatsby dev, а не с других устройств в локальной сети. HMR обновляется почти сразу после любой компиляции, вызванной сохранением изменений в файле.

Это странно. Вы пробовали это на чистом стартере Гэтсби?

Действительно странно, @ryanditjia : confused:

Для проверки работоспособности я только что сделал новую загрузку и установку, используя gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog . К сожалению, мои результаты такие же, как и раньше.

Просто попробовал то же самое с gatsby new gatsby-example-site и все еще без автоматического обновления.

Для записи, моя версия клиента gatsby - 1.1.58, но у меня была такая же проблема на 1.1.52.

Получил точно такой же результат, как @ryanditjia.

gatsby 1.1.58 (проверено с gatsby-starter-forty )
npm 6.3.0
узел 8.11.3
убунту 16

Проблема: HMR работает только при использовании жестко заданного IP-адреса

Жестко запрограммированное решение, предложенное gatsby develop --host 192.168.0.18 --port 8000 ), отлично сработало для меня, поскольку я могу получить к нему доступ на других устройствах с HMR.

Есть одно предостережение (с которым я вполне могу жить): я не могу получить к нему доступ через localhost:8000 на моей машине. Вместо этого я должен использовать 192.168.0.18:8000 или My-Mac.local:8000 .

Более серьезная проблема, которую я заметил, заключается в том, что у меня не всегда бывает один и тот же локальный IP-адрес при подключении к сети, а это означает, что мне постоянно приходится менять жестко запрограммированный IP-адрес в моем package.json .

Решение: динамическое получение IP

Мне нужен был способ динамически получить мой локальный IP-адрес и использовать его как значение для --host и в конце концов мне удалось взломать свой способ заставить его работать. Из моего 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
}

Я тестировал его только на своей машине (macOS) и использовал версию Gatsby 2.0.0-rc.11 поэтому я не знаю, можете ли вы просто скопировать и вставить его в свой package.json и заставить его работать. Но это может помочь другим создать собственное решение.

Краткое объяснение кода

• Используя ifconfig я могу получить кучу текста с информацией о моей сети.
• Внутри этого блоба есть этот кусок текста с моим локальным IP: inet 192.168.0.18 .
• Чтобы найти этот фрагмент, я передаю весь этот кусок текста в awk и использую RegEx, чтобы найти inet 192.168.x.y (где x и y можно заменить любым число от 0 до 999) и распечатайте IP.
• Затем этот IP-адрес используется для --host в вызове скрипта gatsby develop .

Использование его непосредственно в командной строке

Команда, которая используется в package.json имеет двойную обратную косую черту, чтобы обойти функцию escape-символа обратной косой черты в JS / JSON ( подробнее ). Короче говоря, если вы хотите опробовать этот код в командной строке, используйте следующее:

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

Если вы пробуете его в командной строке и изменяете его в соответствии с вашими потребностями, не забудьте снова добавить двойные обратные косые черты, если вы хотите использовать его в scripts вашего package.json .

Похоже, что-то изменилось! Единственное, что у меня вроде работает, - это gatsby develop -H 0.0.0.0 но у меня нет HMR на моем устройстве.
Я попробовал остальное, но он вообще не подключается на моем локальном компьютере или моем телефоне.

РЕДАКТИРОВАТЬ: Мне только что пришло в голову, что на этом компьютере установлен laravel valet, и, возможно, поэтому это не работает для меня. Я мог бы заставить его почти работать с gatsby develop --host $(hostname) но это работает только локально, а не в моей сети.

$HOSTNAME на моих машинах почти не устанавливается. Так что мне нужен этот, и он безупречно работает на моих локальных сетевых устройствах:

gatsby develop -H $(hostname) -p 8000

Теперь моя команда разработки по умолчанию установлена ​​в package.json и запускается с yarn develop . Большой!

Это нужно исправить через https://github.com/gatsbyjs/gatsby/pull/11227.

Ницца! Итак, каков рекомендуемый способ просмотра сайта разработчиков с другого устройства? это gatsby develop -H $(hostname) -p 8000 или есть другой способ?

@TylerBarnes У вас должна быть возможность запустить gatsby develop -H 0.0.0.0 и открыть машину по адресу <IP>:8000 на другом устройстве в сети.

Отлично, спасибо @sidharthachatterjee!

Windows:
для cmd
for / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') развить gatsby --host% i
в конфиге измените "на"
for / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') gatsby develop --host% i

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

Я считаю, что в macOS вам также необходимо включить общий доступ к файлам ( System Preferences -> Sharing ).

Кроме того, в вашем URL можно использовать поле Computer Name . Например, имя моего компьютера - kyoto и я могу получить доступ к своему сайту разработчика удаленно (в той же сети) через http://kyoto.local:8000 .

gatsby develop -H 0.0.0.0 теперь работает нормально, 🎉

Кто-нибудь знает, как заставить это работать с опцией --open ? URL-адрес, который открывает http://0.0.0.0:8000/ , на самом деле не работает. Я могу вручную перейти на localhost: 8000, но я бы не стал

РЕДАКТИРОВАТЬ: из документов

Примечание: вы не можете посетить 0.0.0.0:8000 в Windows (но все будет работать с использованием либо localhost: 8000, либо URL-адреса «В вашей сети» в Windows)

Кажется странным, что дело не рассмотрено

@crhistianramirez Этот

Всем привет,

Как я могу добавить gatsby develop -H 0.0.0.0 в мой файл package.json ? Я пробовал помещать это в такие скрипты, но не получается:

"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 Все в порядке. Вы уверены, что используете его с npm run develop ? Если да, то, возможно, gatsby develop -H 0.0.0.0 по какой-то причине не работает на вашем компьютере.

@nikoladev Я бегал просто gatsby develop 🙈 Большое спасибо за вашу помощь!

У меня была такая же проблема, но, похоже, это был браузер. Изначально я использовал Firefox, но, похоже, он отлично работает с Microsoft Edge

Кто-нибудь пробовал обратный прокси: 8000 с nginx? По вашему мнению, это сработает?