لقد أجرينا مناقشة حول هذا الأمر في دردشة Discord بالأمس ، ويبدو أن ربط عنوان IP المحلي فقط هو قرار تصميم. رأيي هو أيضًا أن Gatsby يجب أن يتصرف مثل أدوات البناء الأخرى (إنشاء تطبيق أو تفاعل أو Meteor) وأن يكون لديه خادم تطوير يمكن الوصول إليه عبر الشبكة.

_httpteapot_:
هل يطور gatsby (v1 أو v2) يمكنه ربط منفذ بحيث يمكن الوصول إليه من الشبكة المحلية باستخدام $ MY_COMPUTER_IP: 8000؟
مثل إنشاء تطبيق تفاعل على سبيل المثال

_ghardin137_
فقط أثناء التطوير أو مع "خدمة gatsby"

_httpteapot_
أنا مهتم بهذه الميزة أثناء التطوير ، لكن تطوير gatsby لا يفتح منفذًا للشبكة يمكن الوصول إليه
(ما لم تكن المشكلة شيئًا آخر)

_LekoArts_
احصل على عنوان IP المحلي الخاص بك على سبيل المثال devip (حزمة npm) ثم استخدم -H $ YOURIP $ -p $ YOURPORT $

_ghardin137_
بشكل افتراضي يستمع إلى 0.0.0.0
الذي سيكون أي شيء
لذلك يجب أن يكون في متناول الشبكة

_httpteapot_
همهمة لذلك من المفترض أن يعمل ، لأنني حاولت على شبكات متعددة في مناسبات متعددة ولم أتمكن مطلقًا من الاتصال بخادم التطوير من جهاز مختلف على شبكتي

_ghardin137_
يمكنني تجربتها بسرعة كبيرة ولكني متأكد من أنها تعمل

_httpteapot_
وكان يعمل دائمًا على إنشاء تطبيق تفاعل وأدوات أخرى

_LekoArts_
كما أنها لم تنجح معي أبدًا. لهذا السبب أستخدم العلم -H

_httpteapot_
أنا على لينكس

_LekoArts_
نوافذ 10 هنا

_ghardin137_
تعمل بشكل جيد على الفوز 10 هنا بالنسبة لي

_httpteapot_
لست على دراية بعلامة -H ، فما الأمر الذي يجب أن أضيفه إليه؟

_LekoArts_
غاتسبي يطور -H٪ YOURIP $

_ghardin137_
انتظر كنت في وضع الخدمة
التطوير محلي فقط

_httpteapot_
من الجيد أنه قابل للتكرار: مبتسم:
و- علم H بالفعل يعمل

_ghardin137_
نعم ، لذا فإن بناء غاتسبي ثم خدمة غاتسبي يعمل: مبتسم:

_httpteapot_
لكن حالة الاستخدام الخاصة بي هي وضع التطوير والاختبار على هاتفي المحمول
أعتقد أن هذا شائع جدًا

_LekoArts_
منذ browserSync ، نعم

_ghardin137_
بلى

_httpteapot_
هل يجب أن أفتح مشكلة في مستودع gatsby؟

_ghardin137_
أظن أن هذا يعمل على النحو المنشود ، لكن توثيق هذا العلم سيكون مفيدًا

_httpteapot_
حسنًا ، افتح طلب الميزة
أجد الطريقة التي يعمل بها تطبيق meteor + create-response-app أكثر سهولة

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

_ [GaiJin] XiaoDie_
LekoArts Thx لخدعة العلم -H: simple_smile:

_ghardin137_
إذا كنت ترغب في وضع PR لتحديث المستندات بهذه المعلومات ، فأنا متأكد من أنها ستكون مفتوحة لذلك: مبتسم:

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

_ghardin137_
ربما لن يضر أن يكون لديك قائمة كاملة بالخيارات هناك أيضًا: مبتسم:

_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 : ابتسم:

شكرا لمساهمتك.

أنا أقوم بتشغيل الخادم على نظام 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 ، يمكنني الوصول إلى الموقع من الأجهزة الأخرى على شبكة LAN المحلية الخاصة بي ، باستخدام http://192.168.1.10:8000 (IP الخاص بالخادم) ، لكن HMR لا يقوم تلقائيًا بتحديث التغييرات.

إذا كانت HMR تعمل بالفعل على الإعداد الخاص بك ، فسأكون مهتمًا بأي تفاصيل أخرى قد تكون لديك بشأن الإعداد الخاص بك والتي يمكنني تجربتها من جانبي.

بصراحة ، أتفق مع mquandalle على أن Gatsby يجب أن تعمل بشكل أكبر قليلاً مثل create-react-app و Meteor ، لكن - كما قالت - هذا قرار تصميم.

لقد حاولت إنشاء كاتب افتراضي فارغ لـ Gatsby وإليك النتائج التي توصلت إليها:

HMR تعمل بشكل كامل

• gatsby develop -H $HOSTNAME -p 8000
  يعمل هذا بشكل أفضل للأشخاص الذين يعملون مع أجهزة متعددة لأن اسم المضيف ديناميكي.
  على سبيل المثال: اسم iMac. محلي: 8000 واسم ماك بوك. محلي: 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 : مرتبك:

كتحقق من الصحة ، قمت للتو بتنزيل وتثبيت جديد باستخدام 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 )
نانوثانية في الدقيقة 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 على شرطتين مائلتين عكسيتين للتغلب على وظيفة حرف الهروب للشرطة المائلة للخلف في 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 مثبتًا على هذا الكمبيوتر وهذا ربما لا يعمل هذا بالنسبة لي. يمكنني جعله يعمل تقريبًا مع 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 على جهاز آخر على الشبكة

رائع ، شكرا سيدهارتاشاتيرجي!

شبابيك:
ل cmd
لـ / f "tokens = 4"٪ i in ('route print ^ | اعثر على "0.0.0.0"') قم بتطوير gatsby - المضيف٪ i
في التكوين تغيير "إلى"
لـ / f "tokens = 4"٪ i in ('route print ^ | اعثر على "0.0.0.0"') قم بتطوير gatsby - المضيف٪ 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 ؟ عنوان url الذي يفتح http://0.0.0.0:8000/ لا يعمل بالفعل. يمكنني الانتقال يدويًا إلى المضيف المحلي: 8000 ولكني لا أفضل ذلك

تحرير: من المستندات

ملاحظة: لا يمكنك زيارة 0.0.0.0:8000 على Windows (ولكن ستعمل الأشياء باستخدام إما localhost: 8000 أو عنوان URL "On Your Network" على Windows)

يبدو غريبًا أن هذه الحالة لم يتم التعامل معها

crhistianramirez هذه الحالة المتطورة هي للأسف مشكلة في Windows (ظهرت أثناء بعض الاختبارات لذلك أضفنا ملاحظة في المستندات) 😞

مرحبا،

كيف يمكنني إضافة 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؟ هل ستعمل برأيك؟