كيف تشغّل خادم webpack للتطوير على عنوان VPN

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

ثلاثة أسئلة تحدد الإجابة: من يتصل، وأي عنوان يمكنه الوصول إليه، وهل يجب أن تعمل إعادة التحميل الحيّ لديه.

ابدأ بالمقبس، لا بملف التكوين

اقرأ ما ارتبط به العملية الجارية فعليًا داخل سياق الشبكة نفسه الذي بدأها، لأن حاوية أو فضاء أسماء قد يملك مقبسًا لا تستطيع قشرة المضيف رؤيته. ويجيب عمود الاستماع عن السؤال الأول: المسار المحلي فقط، أو واجهة واحدة محددة، أو كل الواجهات.

ss -ltn '( sport = :8080 )'
ss -ltnp | grep node

عنوان الاسترجاع هو الافتراضي الآمن وغير مفيد لعميل بعيد. وربط عنوان شامل مريح ويكشف المنفذ على كل واجهة لها مسار، وهو أوسع مما يقصده معظم الناس على جهاز يحمل أيضًا نفقًا. والعنوان المحدد هو الخيار الأوسط، ولا يعمل إلا إذا كانت الواجهة تملك ذلك العنوان في لحظة إنشاء المقبس. والتمييز مهم لأن اثنين من هذه الروابط الثلاثة يبدوان متطابقين في المتصفح ويتصرفان بشكل مختلف تمامًا بمجرد وجود واجهة ثانية.

طابق تلك الملاحظة قبل لمس المسارات أو قواعد الجدار الناري. فإذا كانت العملية تستمع على العنوان الخاطئ، فلن يجعل أي قدر من توجيه السياسات العميل يصل إليه.

اختر عنوان الربط بحسب من يجب أن يصل إليه

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

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

ثم عيّن العنوان بالصيغة التي يقرأها مشغّلك فعليًا. فملف التكوين والسكربت الذي يبني الخادم برمجيًا لا يستهلكان الخيارات نفسها:

devServer: {
  host: "10.77.0.20",
  port: 8080,
  allowedHosts: ["dev.corp.example"],
}

العنوان في تلك القطعة توضيحي ويمثل عنوان VPN الذي يملكه المضيف. وإذا كان المشروع يبني الخادم باستخدام new WebpackDevServer(options, compiler)، فمرّر الخيارات عبر وسيط المُنشئ بدلًا من ذلك، لأن الخاصية المنفصلة devServer في تكوين webpack لا يُرجَع إليها في ذلك المسار. وهذا الفرق بين ملف التكوين وواجهة Node البرمجية يوقع من ينسخ مقتطفًا إلى مشروع لا يقرأه أبدًا. وثائق خادم التطوير تفصل أسلوبي التشغيل وهي المرجع الذي يجب التحقق منه مقابل الإصدار المستخدم.

طابق فحص اسم المضيف مع الأسماء التي توافق عليها

يوجد فحص اسم المضيف لمنع صفحة تُقدَّم من اسم يتحكم به مهاجم من التحدث إلى خادم التطوير عبر المتصفح. وتعطيله باستخدام allowedHosts: "all" يزيل تلك الحماية، والراحة نادرًا ما تستحق ذلك على جهاز يمكنه الوصول إلى خدمات داخلية. والفحص رخيص الإرضاء بشكل صحيح بمجرد أن تعرف الأسماء التي سيرسلها المتصفح.

اسرد الأسماء الدقيقة التي ستستخدمها، بما فيها الاسم الخاص الذي يُحلّ إلى عنوان النفق. فإذا حلّ العميل اسمًا إلى عنوان مختلف عن العنوان الذي ربطته، فلديك مشكلة في تحليل الأسماء لا مشكلة في تكوين الخادم، وإضافة الاسم إلى قائمة السماح لن تصلحها. أكّد التحليل من العميل، لا من الخادم.

أبقِ الضوابط الثلاثة منفصلة في ذهنك: عنوان الربط يحدد الواجهات التي تقبل الاتصال، وقائمة السماح تحدد رؤوس Host المقبولة، والمصادقة تحدد من يُسمح له بالدخول. والثالث فقط هو تحكم في الوصول، وخادم التطوير عادةً لا يملك أيًا منها. وعنوان النفق ليس آلية مصادقة أيضًا، لأن أي شخص يمكنه التوجيه إليه هو بالفعل داخل الحدود التي كنت تعتمد عليها.

تحقق من الصفحة ومقبس إعادة التحميل الحيّ معًا

حمّل طلبًا جديدًا من العميل المقصود بالمخطط المكوَّن، واقرأ النتيجة بدلًا من الذاكرة المؤقتة. وبالنسبة إلى HTTPS، أبقِ اسم المضيف المتوقع والتحقق من الشهادة، لأن تحذير المتصفح ليس اختبار قبول ناجحًا. والصفحة التي تُعرض بينما تفشل إعادة التحميل الحيّ بصمت هي أكثر نجاح جزئي شيوعًا هنا، ومن السهل تفويتها أثناء فحص سريع.

curl -sS -o /dev/null -w "%{http_code} %{remote_ip}\n" http://dev.corp.example:8080/
curl -sS -i http://10.77.0.20:8080/ | head -n 5

ثم افتح تشخيصات شبكة المتصفح وراقب اتصال WebSocket. فقد تُحمَّل الصفحة عبر اسم مضيف ومنفذ ومخطط، بينما يستخدم مقبس إعادة التحميل غيرها، ولهذا يجب فحص الاثنين منفصلين. ولا تُكوّن عنوان URL الموثق للعميل إلا عندما يحتاج المسار المنشور فعلًا إلى قيمة مختلفة، وفضّل إصلاح المسار على تعليم العميل حلًا بديلًا.

سجّل عنوان المستمع والاسم المقبول والمصدر المسموح والنتيجتين في ملاحظات المشروع. فهذا السجل يبقى للشخص التالي الذي يبدأ مساحة العمل ويتساءل لماذا تُحمَّل الصفحة لكنها لا تُحدَّث أبدًا.