الوصول إلى localhost من أي مكان

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

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

لجميع مطوري الويب الذين يعانون من التعب، أنا هنا لأخبركم أن طريقة أسهل قد وصلت! في الواقع، توجد مجموعة كاملة من التطبيقات والخدمات التي تساعد على تسهيل هذه العملية من خلال توفير الوصول إلى localhost من الويب. التي سأناقشها في هذا المقال هي:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

النقاط الرئيسية

كيف يمكن الوصول إلى localhost من أي مكان؟

من الممكن عبر خدمات نفق آمن على الإنترنت! هذه هي الخدمات التي توفر لك نفقًا من الإنترنت إلى جهازك.

ما يعنيه ذلك هو أنهم يوفرون رابط URL يمكن الوصول إليه بشكل عام، ويراقبون المكالمات على هذا الرابط، وينقلون تلك المكالمات إلى خادم localhost الخاص بك. تم إنجاز جميع الإعداد المعقدة لك؛ كل ما تحتاجه هو تثبيت تطبيق وتوجيهه إلى localhost الخاص بك.

A Note About Using Virtual Hosts

في localhost الخاص بي، لدي مضيفات افتراضية معينة. بدون إدراج عنوان من كل خدمة أدناه كـ ServerAlias، سيرفض خادمي التوافق. مرت عدة ساعات من الارتباك. إذا كنت في نفس السفينة، أضف ServerAlias إلى httpd.conf الخاص بك، واستبدل عنوان ngrok الذي تراه أدناه بالعنوان من الخدمة التي تستخدمها:

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrok هو تطبيق لنظامي التشغيل Windows وmacOS وLinux الذي يخلق نفقًا ويسمح لك أيضًا بفحص جميع المرور الذي يمر عبر النفق وإعادة التشغيل هذا المرور للاختبار.

يمكنك استخدام الميزات الأساسية مجانًا ثم التسجيل للوصول إلى ميزات أكثر تقدمًا. من أجل استخدام الاسماء الفرعية المخصصة والاسماء المحجوزة، ستحتاج إلى التسجيل في خطة مدفوعة. وإلا ستتمكن من استخدام الخدمة، لكنك سيتم منحك اسم دومين معشر مثل URL 350c0f8e.ngrok.com في المثال الأعلى للمضيف الافتراضي.

خطط ngrok بحلول مايو 2021 تبدو كالتالي:

يعتبر ميزة هامة لـ ngrok أنه لا يوجد له اعتمادات. تثبيت ngrok وتشغيله. لا يلزم شيء آخر.

كيفية استخدام ngrok

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

افتح واجهة الأوامر وانتقل إلى المجلد الذي استخرجت فيه ngrok. استخدم الأمر التالي لإنشاء نفق إلى localhost على المنفذ 80:

./ngrok http 80

سترى شاشة كالتالي:

في المثال أعلاه، لدينا حركة المرور إلى عنوان ngrok العشوائي المولد http://42e474ef9799.ngrok.com يتم توجيهه إلى localhost لدينا على 127.0.0.1:80.

افتح تلك الرابط على أي جهاز له اتصال بالإنترنت وستتمكن من الوصول إلى موقع localhost الخاص بك عبر الويب!

أحد المزايا الفريدة التي يوفرها ngrok هو القدرة على فحص النشاط السابق. للقيام بذلك، اذهب إلى http://localhost:4040/ على جهاز الكمبيوتر الخاص بك. ستصل إلى tableau يعرض الطلبات الواردة. يمكنك النقر على كل طلب على اليسار ورؤية التفاصيل على اليمين لرؤوس البيانات وغيرها. الاستخدام المفضل لدي لهذا هو رؤية البيانات JSON التي تعود من الطلبات. التصميم الأساسي البسيط لهذا عند تحميل صفحة HTML بسيطة تبدو هكذا:

يمكنك حتى تكرار طلب عن طريق النقر على زر تكرار على اليمين. وهذا سيعيد تشغيل طلب لك عبر النفق.

ميزات ngrok المتقدمة

حماية الباسورد تتيح لك منع أعضاء عشوائيين من الوصول إلى موقعك:

ngrok http -auth="username:password" 80

الاسماء الفرعية المخصصة هي للحالات التي لا ترغب في تذكر الرابط العشوائي المولد! إذا قمت بالاشتراك في خطة ngrok مدفوعة، يمكنك تحديد اسم مجال فرعي لذلك لا يمكن للآخرين استيلائه. التالي يتيح لك مشاهدة موقع localhost الخاص بك على nogophersinmytunnel.ngrok.com:

ngrok http -subdomain nogophersinmytunnel 80

المجالات المخصصة هي للأوقات التي تفضل عدم وجود “ngrok” في عنوان URL الخاص بمشروعك المنفذ. تسمح الخطط المدفوعة لك باستخدام المجالات الخاصة بك، بدلاً من الحاجة إلى استخدام ngrok.com:

ngrok http -hostname="tunnel.yourdomain.com" 80

يمكنك حتى توصيل النفق إلى عنوان IP على شبكتك المحلية التي لن تكون قابلة للوصول من الخارج:

ngrok http 192.168.0.27:80

أو يمكنك إنشاء نفق لخدمات غير HTTP الأخرى:

ngrok tcp 22

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

للاطلاع على كل ما هو ممكن، انظر وثائق ngrok.

PageKite

PageKite هو مشروع برمجة بايثون يعتمد على “العكسي المجسد المتنقل” والذي يعمل على نظامي التشغيل Windows وmacOS وLinux وحتى أجهزة Android! إنه مشابه جدًا لـ ngrok ولكنه قد تم استخدامه لفترة أطول، ويبدو أنه موثوق به أكثر لمجموعة أكبر من الاستخدامات. حتى أنهم جعلوه يعمل مع بروتوكول Minecraft للسماح للأشخاص بتشغيل خادم Minecraft على جهازهم المحلي.

يمكنك التسجيل للحصول على تجربة مجانية لمدة شهر ونصف و 2.5 جيجابايت من النقل المسموح به. بعد ذلك يتبع نظام “الدفع بناءً على ما تريد” (بحد أدنى 4 دولارات أمريكي في الشهر، أو مجانًا إذا كنت تعمل على برمجيات مفتوحة المصدر مجانًا). لكنك تحتاج للدفع أكثر للحصول على المزيد في هذه الحالة، حيث يحصل أولئك الذين يدفعون مبالغ أكبر على نصيب أكبر، ومدة خدمة أطول، واسماء مجالات فرعية مخصصة، وهكذا.

لا يبدو أن PageKite يمتلك معالج حركة المرور مثل ngrok، لكنه يتمتع بميزات مذهلة مثل الجدار الحارق المدمج الذي يحجب الوصول إلى الأهداف الشائعة للهجمات مثل /wp-admin، /xampp، صفحات phpMyAdmin… وهلم جرا. يمكن تعطيله إذا كنت موافقًا على جعل هذه الأشياء عامة.

لديهم حتى خادم تحكم أمامي في سيدني، أستراليا، لذا يمكن لهذا توفير سرعة أسرع للمطورين الأستراليين.

كيفية استخدام PageKite

اذهب إلى PageKite.net وتنزيل الإصدار المناسب لنظام التشغيل الخاص بك. بالنسبة لمستخدمي Windows، تأكد من تثبيت Python أولاً. بالنسبة لـ macOS و Linux، يمكنك استخدام أمر cURL بسيط لتثبيته مباشرة من سطر الأوامر الخاص بك.

بمجرد تنزيله، قم بتشغيل هذا الأمر لتشغيل نفق إلى خادم localhost الخاص بك. تختار عنوانًا صنفيًا محددًا يمكنك استخدامه في كل مرة (بدلاً من التخصيص العشوائي في ngrok). لقد اخترت hurrygetintothefancytunnel هنا:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

في جهازي الإبتدائي مؤخرًا، كان علي تشغيله مع python3 في البداية، فجرب ذلك إذا لم ينجح ما سبق:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

سيعمل خلالها ويسجل حسابك في الخدمة إذا لم تكن مسجلًا بالفعل. ثم سيكون لديك localhost مستخدمًا للعالم!

الميزات المتقدمة لـ PageKite

PageKite لديه بعض الميزات الإضافية الأكثر إثارة للإعجاب.

مثال واحد: لا داعي لوجود خادم ويب. إذا لم يكن لديك خادم يعمل، فلديه خادم ويب مدمج يمكنه تشغيل ملفاتك الساكنة هكذا:

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

مثل ngrok، يمكنك تقييد الوصول عبر كلمة مرور:

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

أو تقييد الوصول عبر عناوين IP:

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

كما ذكرنا أعلاه، يمكنك حتى تشغيل كل هذا على هاتفك. لقد قمت بتثبيت خادم ويب أندرويد يسمى kWS ثم قمت بتشغيل PageKite لإظهاره على الويب:

بالتأكيد لن أفعل ذلك يوميًا، لكن من الرائع أن نرى أن هذه الأمور أصبحت الآن ممكنة فقط على هاتف ذكي!

تمامًا مثل ngrok، يمكن لـ PageKite التعامل مع عدة نفقات في وقت واحد، ويدعم امتلاك عنوان دومين مخصص، ويسمح بإعداد ملف تكوين للنفقات الخاصة بك. لمزيد من التفاصيل، قم بزيارة ملف دليل البدء السريع الخاص بهم وصفحتهم الشاملة صفحة الإرشادات.

localtunnel

localtunnel هو خدمة نفق تم بناؤها في البداية بلغة Node ولكنها تتضمن أيضًا عملاء بنظام Go و C#/.NET.

كيفية استخدام localtunnel

يمكنك تثبيته على جهازك بشكل عام كما هو الحال مع معظم حزم npm:

npm install -g localtunnel

من أجل بدء نفق إلى جهازك المحلي على المنفذ 80، استخدم هذا الأمر:

lt --port 80

سيعمل تمامًا مثل ngrok وPageKite! سيمنحك عنوان زائدي شبيه بالذي أُعطيته: https://loud-ladybug-21.loca.lt.

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

الميزات المتقدمة لـ localtunnel

يمكن الحصول على عنوان زائدي مخصص مجانًا تمامًا، طالما أن العنوان الزائدي لم يُستخدم. لاستخدام عنوان زائدي مخصص، فقط اجره مع معلمة --subdomain:

lt --port 80 --subdomain platypusestunneltoo

إحدى الميزات المفيدة التي يوفرها localtunnel هي واجهة برمجة تطبيقات Node تسمح لك بتوليد localtunnels عبر JavaScript لاستخدامها في اختباراتك التلقائية:

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // سيظهر عنوان URL النفق الخاص بك كـ tunnel.url

  tunnel.on('close', () => {
    // افعل شيئًا بمجرد إغلاق النفق
  });
})();

boringproxy

boringproxy هو خيار أحدث يأتي بشكل مجاني ومفتوح المصدر تحت ترخيص MIT! تتركز إصداره الرئيسي على تبسيط الأمر للأشخاص لاستضافة مواقعهم الخاصة على أجهزتهم. يأتي كملف تنفيذي واحد يعمل كخادم وعميل في وقت واحد. هناك ملف تنفيذي لمجموعة متنوعة من أنظمة لينكس وويندوز. سُجل macOS كـ “غير مختبر”. لم أتمكن من جعله يعمل على جهازي الإبريدي شخصيًا ، ولكن إذا كان لديك حق الوصول إلى صندوق لينكس أو راسبيري باي ، فقد يكون هذا هو الحل الصحيح لك. كله مكتوب بلغة جو ومفتوح للمساهمين.

ملخص ميزاته:

• 100٪ مجاني ومفتوح المصدر تحت ترخيص MIT
• يمكن استضافته بالكامل
• يحتوي على مرشح عكسي مدمج
• يدعم المجالات الشخصية/الفروع الشخصية

كيفية استخدام boringproxy

الخطوات الرئيسية يسهل متابعتها على وثائق boringproxy ، حيث تختلف حسب المنصة.

الأمر ككل يتضمن:

• تنزيل مثيل الخادم عبر curl (على سبيل المثال ، curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmoding المستند القابل للتنفيذ الذي تم تنزيله (على سبيل المثال, chmod +x boringproxy-linux-x86_64)
• إعداد الربط بالمنافذ 80 و 443 (على سبيل المثال, sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• إعداد المستند القابل للتنفيذ على العميل أيضًا

يغطي هذا الفيديو من مبتكر boringproxy أفضل الطرق:

الميزات المتقدمة لـ boringproxy

شهادات HTTPS تلقائية تُدار تلقائيًا بالنسبة لك عبر Let’s Encrypt. لا داعي للقلق بشأن الحصول على شهادات للاختبار، حيث يحدث ذلك خلف الكواليس.

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

يمكنك الإنفاق لتطبيقات الويب بسهولة. استضافة تطبيقات الويب الذاتية مثل Etherpad (موضح في الفيديو أعلاه)، وإعطائها عنوانًا جانبيًا خاصًا، ثم يمكنك الوصول إليها من أي مكان.

BrowserStack

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

يمكنك استخدام الأساليب أعلاه لاختبار المواقع localhost في أجهزة BrowserStack الافتراضية، لكنها تتضمن أيضًا تمتيزًا للمتصفح لـ Chrome و Firefox يسمح لك بتوفير الوصول إلى localhost الخاص بك من خدماتهم.

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

كيفية استخدام BrowserStack

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

في النهاية، سيتيح لك اختبار مواقع localhost الخاصة بك في أجهزة افتراضية تعمل عبر الإنترنت بهذه الطريقة:

المفضلة

بعد التجربة مع كل هذه الخيارات، أفضل إعتبارًا منهم سيكون ngrok و PageKite.

يبدو أن PageKite هو الحل الأكثر تعدداً باعتباره له إمكانات هائلة. تم تطويره وتوسيعه ليناسب مجموعة متنوعة من الاستخدامات على مر السنين، مما يجعله تطبيقًا رائعًا حقًا!

ngrok رائع أيضًا بسبب بساطته ومفسر المرور. لديها ميزات كافية بالنسبة لمعظم مطوري الويب الذين يرغبون في الوصول إلى localhost من الإنترنت.

الخاتمة

إذا كنت تعمل على جهاز كمبيوتر يتصل بالإنترنت، يمكنك الآن إعداد الوصول إلى localhost الخاص بك من أي مكان في دقائق قليلة فقط! من السهل للغاية البدء، وكما رأيت، لا نقص على الإطلاق من الحلول!

هل استخدمت أيًا من هذه الخدمات؟ هل لديك أي غيرها تفضلها؟ أحب أن أعرف أفكارك على تويتر!

 

الأسئلة الشائعة حول الوصول إلى localhost من أي مكان