Kami berdiskusi tentang ini di obrolan Discord kemarin, dan tampaknya mengikat hanya IP lokal adalah keputusan desain. Pendapat saya juga bahwa Gatsby harus berperilaku seperti alat build lainnya (create-react-app atau Meteor) dan memiliki server pengembangan yang dapat diakses jaringan.

_httpteapot_:
Apakah gatsby develop (v1 atau v2) dapat mengikat port sehingga dapat diakses dari jaringan lokal menggunakan $ MY_COMPUTER_IP: 8000?
Seperti create-react-app misalnya

_ghardin137_
hanya selama pengembangan atau dengan "gatsby serve"

_httpteapot_
Saya tertarik dengan fitur itu selama pengembangan, tetapi gatsby develop tidak membuka port yang dapat diakses jaringan
(kecuali masalahnya adalah hal lain)

_LekoArts_
dapatkan ip lokal Anda dengan mis. devip (paket npm) dan kemudian gunakan -H $ YourIP $ -p $ YOURPORT $

_ghardin137_
secara default ia mendengarkan 0.0.0.0
yang mana saja
jadi harus dapat diakses oleh jaringan

_httpteapot_
Hum jadi itu seharusnya berfungsi, karena saya telah mencoba di banyak jaringan pada beberapa kesempatan dan saya tidak pernah dapat terhubung ke server pengembangan dari perangkat yang berbeda di jaringan saya

_ghardin137_
saya dapat mencobanya dengan sangat cepat tetapi saya cukup yakin itu berhasil

_httpteapot_
dan itu selalu bekerja pada alat buat-reaksi-aplikasi dan alat lainnya

_LekoArts_
Itu juga tidak pernah berhasil untuk saya. Itulah mengapa saya menggunakan flag -H

_httpteapot_
Saya menggunakan linux

_LekoArts_
windows 10 di sini

_ghardin137_
bekerja dengan baik pada win 10 di sini untuk saya

_httpteapot_
Saya tidak terbiasa dengan -H flag, perintah mana yang harus saya tambahkan?

_LekoArts_
gatsby develop -H% YOURIP $

_ghardin137_
tunggu saya dalam mode servis
develop hanya bersifat lokal

_httpteapot_
Bagus karena dapat direproduksi: smiley:
Dan -H flag memang berfungsi

_ghardin137_
ya jadi gatsby build lalu gatsby serve berhasil: smiley:

_httpteapot_
Tetapi kasus penggunaan saya adalah mode pengembangan dan pengujian di ponsel saya
Itu cukup umum kurasa

_LekoArts_
Sejak browserSync, ya

_ghardin137_
ya

_httpteapot_
Haruskah saya membuka masalah di repo gatsby?

_ghardin137_
Saya menduga ini berfungsi sebagaimana mestinya, tetapi mendokumentasikan bendera itu akan berguna

_httpteapot_
Jadi buka permintaan fitur
Saya menemukan cara kerja meteor + create-react-app lebih intuitif

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

_ [GaiJin] XiaoDie_
@LekoArts Thx untuk trik flag -H: little_smile:

_ghardin137_
jika Anda ingin memasukkan PR untuk memperbarui dokumen dengan info itu, saya yakin mereka akan terbuka untuk itu: smiley:

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

_ghardin137_
mungkin tidak ada salahnya untuk memiliki daftar lengkap opsi di sana juga: smiley:

_LekoArts_
Saya pernah melakukan PR untuk itu
Mereka tidak menyukainya

_ghardin137_
tetapi dikatakan bahwa develop hanya ada di localhost
jadi itu masuk akal

Anda juga dapat menggunakan gatsby develop -H 0.0.0.0

Terima kasih, @mquandalle.

Harap pastikan untuk mencatat dalam pekerjaan / diskusi kami di masa mendatang bahwa menggunakan pendekatan gatsby develop -H 192.168.1.100 -p 8000 (Saya menggunakan MacOS) tampaknya mencegah hot refresh HMR bekerja (setidaknya dengan upaya saya sejauh ini).

Perangkat apa yang kamu gunakan? HMR masih bekerja untuk saya. FWIW Saya menggunakan Mac dan iPhone, mungkin mereka berbicara satu sama lain lebih baik 😄

Halo lagi, @ryanditjia : smile:

Terima kasih atas masukan Anda.

Saya menjalankan server di MacOS, dan mengakses situs yang disajikan di komputer yang sama, menggunakan Chrome, Firefox, dan Safari. Perangkat saya yang lain dari LAN lokal adalah iOS dan Android.

Tepatnya:

Saya menggunakan benang

Saya memiliki entri skrip berikut sebagai bagian dari 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"
  },

Ketika saya menjalankan yarn dev , saya hanya dapat mengakses situs secara lokal menggunakan http://localhost:8000 dari mesin yang saat ini melayani situs tersebut. HMR bekerja dengan baik.

Ketika saya menjalankan yarn dev-m , saya dapat mengakses situs dari perangkat lain di LAN lokal saya, menggunakan http://192.168.1.10:8000 (IP server), tetapi HMR tidak secara otomatis menyegarkan perubahan.

Jika HMR benar-benar bekerja pada penyiapan Anda, saya akan tertarik dengan detail lebih lanjut yang mungkin Anda miliki di penyiapan Anda yang dapat saya coba di pihak saya.

Terus terang, saya setuju dengan @mquandalle bahwa Gatsby harus bekerja lebih seperti create-react-app dan Meteor , tetapi - seperti yang dia katakan - ini adalah keputusan desain.

Saya mencoba membuat starter default Gatsby kosong dan berikut adalah temuan saya:

HMR bekerja penuh

• gatsby develop -H $HOSTNAME -p 8000
  Ini berfungsi paling baik untuk orang yang bekerja dengan banyak mesin karena nama host-nya dinamis.
  Misalnya: Name-iMac. local: 8000 dan Name-MacBook. lokal: 8000 (Saya menandai 2 alamat ini di perangkat seluler saya untuk kemudahan akses)
• gatsby develop -H 192.168.1.105 -p 8000
  Hardcode IP tidak terlalu bagus — atau fleksibel.

HMR bekerja sebagian

• gatsby develop -H 0.0.0.0 -p 8000
  IP server dinamis. Dalam kasus saya, 192.168.1.105:8000.
  HMR bekerja untuk mesin (0.0.0.0:8000 dan 192.168.1.105:8000); tetapi tidak untuk perangkat jaringan.

Bisakah Anda memeriksa apakah Anda mengalami hal yang sama?

Terima kasih atas tanggapan mendetail, @ryanditjia.

Di sinilah saya berada:

• Baik gatsby develop -H $HOSTNAME -p 8000 dan gatsby develop -H 192.168.1.105 -p 8000 memungkinkan akses dari server yang menjalankan Gatsby dan perangkat LAN lokal dengan nama host, masing-masing melalui nama host dan alamat ip, tetapi masih tidak ada HMR untuk saya.

Ketika saya mengatakan HMR tidak berfungsi, saya melakukan tes sederhana untuk mengubah teks dalam file dan menyimpannya. Tidak ada yang terjadi dan tidak ada yang terlihat di konsol alat pengembang browser juga.

Jika, setelah membuat dan menyimpan perubahan, saya CTRL-C keluar dari server Gatsby, peringatan berikut ditampilkan di konsol alat pengembang browser.

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 tanpa parameter memungkinkan akses hanya pada mesin tempat server dev Gatsby berjalan dan bukan dari perangkat lain di LAN lokal. Pembaruan HMR segera setelah kompilasi apa pun yang disebabkan oleh penyimpanan perubahan ke file.

Itu aneh. Sudahkah Anda mencoba ini dengan starter gatsby yang bersih?

Aneh memang, @ryanditjia : bingung:

Sebagai pemeriksaan kewarasan, saya baru saja mengunduh dan menginstal, menggunakan gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog . Sayangnya, hasil saya sama seperti sebelumnya.

Baru saja mencoba hal yang sama dengan gatsby new gatsby-example-site dan tetap tidak ada penyegaran otomatis.

Sebagai catatan, versi klien gatsby saya adalah 1.1.58, tetapi saya mengalami masalah yang sama di 1.1.52

Saya mendapatkan hasil yang persis sama dengan @ryanditjia.

gatsby 1.1.58 (diuji dengan gatsby-starter-forty )
npm 6.3.0
simpul 8.11.3
ubuntu 16

Masalah: HMR hanya berfungsi saat menggunakan IP hardcode

Solusi hardcode yang diusulkan @ryanditjia ( gatsby develop --host 192.168.0.18 --port 8000 ) bekerja sangat baik untuk saya karena saya dapat mengaksesnya di perangkat lain dengan HMR.

Ada satu peringatan (yang benar-benar dapat saya tanggung): Saya tidak dapat mengaksesnya melalui localhost:8000 di mesin saya. Sebaliknya saya harus menggunakan 192.168.0.18:8000 atau My-Mac.local:8000 .

Masalah yang lebih besar yang saya perhatikan adalah bahwa saya tidak selalu memiliki IP lokal yang sama ketika saya terhubung ke jaringan dan ini berarti saya terus-menerus harus mengubah IP hardcode di package.json .

Solusi: Dapatkan IP secara dinamis

Saya menginginkan cara untuk secara dinamis mendapatkan IP lokal saya dan menggunakannya sebagai nilai untuk --host dan akhirnya saya berhasil meretas cara saya untuk membuatnya berfungsi. Dari 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
}

Saya hanya mengujinya di mesin saya (macOS) dan menggunakan versi Gatsby 2.0.0-rc.11 jadi saya tidak tahu apakah Anda bisa menyalin dan menempelkannya ke package.json dan membuatnya berfungsi. Tapi itu bisa membantu orang lain dalam membuat solusi khusus mereka sendiri.

Penjelasan singkat tentang kode

• Menggunakan ifconfig Saya bisa mendapatkan gumpalan teks dengan info di jaringan saya.
• Di dalam gumpalan itu ada potongan teks dengan IP lokal saya: inet 192.168.0.18 .
• Untuk menemukan bagian itu, saya menyalurkan seluruh gumpalan teks itu ke awk dan menggunakan RegEx untuk menemukan inet 192.168.x.y (di mana x dan y dapat diganti dengan nomor dari 0 hingga 999) dan mencetak IP.
• IP tersebut kemudian digunakan untuk --host dalam panggilan skrip gatsby develop .

Menggunakannya langsung di baris perintah

Perintah yang digunakan di package.json memiliki garis miring terbalik ganda untuk mengatasi fungsi karakter escape dari garis miring terbalik di JS / JSON ( info selengkapnya ). Singkatnya, jika Anda ingin mencoba kode ini di baris perintah, gunakan yang berikut ini:

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

Jika Anda mencobanya pada baris perintah dan mengubahnya agar sesuai dengan kebutuhan Anda, ingatlah untuk menambahkan kembali garis miring terbalik ganda jika Anda ingin menggunakannya di scripts dari package.json .

Sepertinya ada sesuatu yang berubah! Satu-satunya hal yang cukup berhasil untuk saya adalah gatsby develop -H 0.0.0.0 tetapi saya tidak mendapatkan HMR di perangkat saya.
Saya mencoba sisanya tetapi tidak terhubung sama sekali di komputer lokal atau ponsel saya.

EDIT: Baru saja terpikir oleh saya bahwa saya telah menginstal valet laravel di komputer ini dan itu mungkin mengapa ini tidak berhasil untuk saya. Saya bisa membuatnya hampir berfungsi dengan gatsby develop --host $(hostname) tetapi ini hanya berfungsi secara lokal, bukan di jaringan saya.

$HOSTNAME hampir tidak disetel di mesin saya. Jadi saya membutuhkan yang ini dan berfungsi dengan sempurna di seluruh perangkat jaringan lokal saya:

gatsby develop -H $(hostname) -p 8000

Ini sekarang adalah perintah pengembangan default saya yang ditetapkan di package.json dan dijalankan dengan yarn develop . Bagus!

Ini harus diperbaiki melalui https://github.com/gatsbyjs/gatsby/pull/11227

Bagus! Jadi, apa cara yang disarankan untuk melihat situs pengembang dari perangkat lain? apakah gatsby develop -H $(hostname) -p 8000 atau ada cara lain?

@TylerBarnes Anda harus dapat menjalankan gatsby develop -H 0.0.0.0 dan membuka mesin di <IP>:8000 pada perangkat lain di jaringan

Luar biasa, terima kasih @sidharthachatterjee!

Windows:
untuk cmd
for / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') lakukan gatsby develop --host% i
dalam konfigurasi, ubah "menjadi"
untuk / f "token = 4"% i in ('route print ^ | temukan "0.0.0.0"') lakukan gatsby develop --host% i

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

Di macOS, saya yakin Anda juga harus mengaktifkan berbagi file ( System Preferences -> Sharing ).

Selain itu, bidang Computer Name dapat digunakan di URL Anda. Misalnya, nama komputer saya adalah kyoto dan saya dapat mengakses situs dev saya dari jarak jauh (di jaringan yang sama) melalui http://kyoto.local:8000 .

gatsby develop -H 0.0.0.0 sekarang berfungsi dengan baik, 🎉

Ada yang tahu bagaimana cara membuatnya bekerja dengan opsi --open ? Url yang membuka http://0.0.0.0:8000/ sebenarnya tidak berfungsi. Saya dapat secara manual pergi ke localhost: 8000 tetapi saya lebih suka tidak

EDIT: Dari dokumen

Catatan: Anda tidak dapat mengunjungi 0.0.0.0:8000 di Windows (tetapi semuanya akan berfungsi baik menggunakan localhost: 8000 atau URL "Di Jaringan Anda" di Windows)

Anehnya kasus itu tidak ditangani

@crhistianramirez Sayangnya kasus tepi itu adalah masalah Windows (yang muncul selama beberapa pengujian jadi kami menambahkan catatan di dokumen) 😞

Halo,

Bagaimana cara menambahkan gatsby develop -H 0.0.0.0 ke file package.json ? Saya mencoba memasukkannya ke dalam skrip seperti ini, tetapi tidak berhasil:

"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 Itu terlihat baik-baik saja. Apakah Anda yakin menjalankannya dengan npm run develop ? Jika demikian, maka mungkin gatsby develop -H 0.0.0.0 tidak berfungsi pada mesin Anda karena suatu alasan.

@nikoladev Saya baru saja menjalankan gatsby develop 🙈 Terima kasih banyak atas bantuan Anda!

Saya memiliki masalah yang sama tetapi tampaknya itu adalah browser. Saya awalnya menggunakan Firefox tetapi tampaknya berfungsi dengan baik di Microsoft Edge

Adakah yang mencoba membalikkan proxy: 8000 dengan nginx? Apakah itu akan berhasil menurut Anda?