우리는 어제 Discord 채팅에서 이것에 대해 논의했고, 분명히 로컬 IP 만 바인딩하는 것은 디자인 결정입니다. 또한 Gatsby는 다른 빌드 도구 (create-react-app 또는 Meteor)처럼 작동해야하며 네트워크에 액세스 할 수있는 개발 서버가 있어야한다고 생각합니다.

_httpteapot_ :
Gatsby develop (v1 또는 v2)은 $ MY_COMPUTER_IP : 8000을 사용하여 로컬 네트워크에서 액세스 할 수 있도록 포트를 바인딩 할 수 있습니까?
예를 들어 create-react-app처럼

_ghardin137_
개발 중 또는 "개츠비 서브"에서만

_httpteapot_
개발 중에 해당 기능에 관심이 있지만 gatsby develop은 네트워크 액세스 가능 포트를 열지 않습니다.
(문제가 다른 것이 아니라면)

_LekoArts_
예를 들어 devip (npm 패키지)로 로컬 IP를 얻은 다음 -H $ YOURIP $ -p $ YOURPORT $를 사용하십시오.

_ghardin137_
기본적으로 0.0.0.0에서 수신합니다.
어떤 것이 든
네트워크에 액세스 할 수 있어야합니다.

_httpteapot_
Hum 그래서 그것은 작동해야합니다. 여러 번에 걸쳐 여러 네트워크에서 시도했지만 네트워크의 다른 장치에서 개발 서버에 연결할 수 없었기 때문입니다.

_ghardin137_
나는 그것을 진짜 빨리 시도 할 수 있지만 그것이 작동한다고 확신합니다

_httpteapot_
그리고 항상 create-react-app 및 기타 도구에서 작업했습니다.

_LekoArts_
나에게도 효과가 없었습니다. 그래서 -H 플래그를 사용합니다.

_httpteapot_
나는 리눅스에있다

_LekoArts_
여기에 windows 10

_ghardin137_
나를 위해 여기에서 승리 10에서 잘 작동

_httpteapot_
-H 플래그에 익숙하지 않습니다. 어떤 명령에 추가해야합니까?

_LekoArts_
개츠비 개발 -H % YOURIP $

_ghardin137_
내가 서브 모드에서 기다려
개발은 지역 전용입니다

_httpteapot_
재현 가능하다는 점이 좋습니다.
그리고 -H 플래그가 실제로 작동합니다.

_ghardin137_
그래 그래서 개츠비가 빌드하면 개츠비 서브가 작동합니다.

_httpteapot_
하지만 내 사용 사례는 개발 모드이며 휴대 전화에서 테스트합니다.
꽤 흔한 일인 것 같아요

_LekoArts_
browserSync 이후, 예

_ghardin137_
네

_httpteapot_
Gatsby repo에서 이슈를 열어야합니까?

_ghardin137_
의도 한대로 작동하는 것 같지만 해당 플래그를 문서화하면 유용 할 것입니다.

_httpteapot_
그럼 기능 요청을 열어
저는 meteor + create-react-app 작업이 더 직관적 인 방식을 발견했습니다.

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

_ [개진] 샤오 다이 _
-H 플래그 트릭에 대한 @LekoArts Thx : slight_smile :

_ghardin137_
그 정보로 문서를 업데이트하기 위해 PR에 넣고 싶다면 그들이 그것에 열려있을 것이라고 확신합니다 : smiley :

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

_ghardin137_
아마 거기에 옵션의 전체 목록을 가지고 있어도 아프지 않을 것입니다 : smiley :

_LekoArts_
나는 그것을 위해 PR 한 적이있다
그들은 그것을 좋아하지 않았다

_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 : 미소 :

귀하의 의견에 감사드립니다.

MacOS에서 서버를 실행하고 있으며 Chrome, Firefox 및 Safari를 사용하여 동일한 컴퓨터에서 제공되는 사이트에 액세스합니다. 로컬 LAN의 다른 장치는 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)를 사용하여 로컬 LAN의 다른 장치에서 사이트에 액세스 할 수 있지만 HMR은 변경 사항을 자동으로 새로 고치지 않습니다.

HMR이 실제로 설정 작업을하고 있다면, 설정에 대한 추가 세부 사항이 있으면 제 편에서 시도해 볼 수 있습니다.

솔직히, 나는 Gatsby가 create-react-app 및 Meteor 와 비슷하게 작동해야한다는

빈 Gatsby 기본 스타터를 만들려고 시도했으며 여기에 내 결과가 있습니다.

완전히 작동하는 HMR

• gatsby develop -H $HOSTNAME -p 8000
  호스트 이름이 동적이기 때문에 여러 컴퓨터로 작업하는 사람들에게 가장 적합합니다.
  예 : 이름 -iMac. local : 8000 및 Name-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 주소를 통해 각각 호스트 이름과 IP 주소를 통해 액세스 할 수 있지만 여전히 HMR은 없습니다.

HMR이 작동하지 않는다고 말하면 파일의 텍스트를 변경하고 저장하는 간단한 테스트를 수행하고 있습니다. 아무 일도 일어나지 않으며 브라우저 개발 도구 콘솔에도 아무것도 표시되지 않습니다.

변경 사항을 적용하고 저장 한 후 Gatsby 서버에서 CTRL-C 하면 브라우저 개발 도구 콘솔에 다음 경고가 표시됩니다.

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 서버가 실행중인 시스템에서만 액세스를 허용하며 로컬 LAN의 다른 장치에서는 액세스 할 수 없습니다. HMR은 변경 사항을 파일에 저장하여 컴파일 한 직후에 업데이트됩니다.

이상하다. 깨끗한 개츠비 스타터에서 이것을 시도해 보셨습니까?

정말 이상합니다, @ryanditjia : 혼란스러워 :

온 전성 검사로 방금 gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog 사용하여 새로 다운로드하고 설치했습니다. 슬프게도 제 결과는 이전과 같습니다.

gatsby new gatsby-example-site 동일한 작업을 시도했지만 여전히 자동 새로 고침이 없습니다.

기록을 위해 내 개츠비 클라이언트 버전은 1.1.58이지만 1.1.52에서 동일한 문제가 발생했습니다.

@ryanditjia와 똑같은 결과를 얻었습니다.

gatsby 1.1.58 ( gatsby-starter-forty 테스트 됨)
npm 6.3.0
노드 8.11.3
우분투 16

문제 : HMR은 하드 코딩 된 IP를 사용할 때만 작동합니다.

@ryanditjia가 제안한 하드 코딩 된 솔루션 ( gatsby develop --host 192.168.0.18 --port 8000 )은 HMR을 사용하여 다른 장치에서 액세스 할 수 있기 때문에 저에게 효과적이었습니다 .

한 가지주의 사항이 있습니다 (완전히 함께 살 수 있음). 내 컴퓨터에서 localhost:8000 을 통해 액세스 할 수 없습니다. 대신 192.168.0.18:8000 또는 My-Mac.local:8000 를 사용해야합니다.

내가 발견 한 더 큰 문제는 네트워크에 연결할 때 항상 동일한 로컬 IP를 가지지 않는다는 것입니다. 즉, package.json 에서 하드 코딩 된 IP를 지속적으로 변경해야합니다.

솔루션 : 동적으로 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 사용하면 네트워크에 대한 정보가 포함 된 텍스트 덩어리를 얻을 수 있습니다.
• 그 blob 안에는 내 로컬 IP가있는 inet 192.168.0.18 텍스트가 있습니다.
• 그 조각을 찾기 위해 전체 텍스트 덩어리를 awk 파이프하고 RegEx를 사용하여 inet 192.168.x.y 를 찾습니다 (여기서 x 및 y 는 0에서 999 사이의 숫자) IP를 인쇄하십시오.
• IP는 다음을 위해 사용되는 --host 에서 gatsby develop 스크립트 호출.

명령 줄에서 직접 사용

package.json 에서 사용되는 명령에는 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"') do gatsby develop --host % i
구성에서 "에서"로 변경
for / f "tokens = 4"% i in ( 'route print ^ | find "0.0.0.0"') do gatsby develop --host % i

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

macOS에서는 파일 공유를 활성화해야한다고 생각합니다 ( System Preferences -> Sharing ).

또한 Computer Name 필드를 URL에 사용할 수 있습니다. 예를 들어, 내 컴퓨터 이름은 kyoto 이고 http://kyoto.local:8000 를 통해 동일한 네트워크에서 원격으로 내 개발 사이트에 액세스 할 수 있습니다.

gatsby develop -H 0.0.0.0 이 (가) 이제 잘 작동합니다 🎉

--open 옵션으로이 작업을 수행하는 방법을 아는 사람이 있습니까? http://0.0.0.0:8000/ 를 여는 URL은 실제로 작동하지 않습니다. 수동으로 localhost : 8000 으로 이동할 수 있지만

편집 : 문서에서

참고 : Windows에서는 0.0.0.0:8000을 방문 할 수 없습니다 (하지만 Windows에서는 localhost : 8000 또는 "On Your Network"URL을 사용하여 작동합니다).

케이스가 처리되지 않는 것이 이상해 보입니다.

@crhistianramirez 그 엣지 케이스는 안타깝게도 Windows 문제입니다 (일부 테스트 중에 드러났으므로 문서에 메모를 추가했습니다) 😞

안녕,

package.json 파일에 gatsby develop -H 0.0.0.0 을 추가하려면 어떻게해야합니까? 다음과 같은 스크립트에 넣으려고했지만 작동하지 않습니다.

"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에서 잘 작동하는 것 같습니다.

누구든지 nginx로 : 8000을 리버스 프록시하려고 했습니까? 귀하의 의견에 따라 작동합니까?