00:00:00هذا هو Portless، أداة سطر أوامر من Vercel Labs، وهو نفس الفريق الذي قدم لكم Agent Browser،
00:00:05وJSON Render وSkills، وهي أداة تستبدل أرقام منافذ localhost بأسماء ثابتة،
00:00:10مما يسهل على البشر ووكلاء الذكاء الاصطناعي الوصول للمكان الصحيح دائماً وتجنب التضارب.
00:00:15لكن كيف تعمل هذه الأداة فعلياً في الخفاء، وهل ستؤثر سلباً على جهازي؟
00:00:20اشتركوا في القناة ولنبدأ الشرح.
00:00:21دعونا نستعرض كيفية استخدام Portless من خلال مثال بسيط.
00:00:26حالياً، لدي مشروع يعمل على المنفذ 3001.
00:00:30وإذا تركت هذا المشروع يعمل في الخلفية ونسيت أمره تماماً،
00:00:33ثم حاولت تشغيل مشروع آخر يستخدم نفس المنفذ،
00:00:37فسيظهر لي هذا الخطأ الذي يقول إن العنوان مستخدم بالفعل.
00:00:40وهذه هي المشكلة التي صُمم Portless تحديداً لحلها.
00:00:44تخيل لو كان لديك وكلاء ذكاء اصطناعي مختلفون يعملون في نوافذ مختلفة لمشاريع متنوعة
00:00:48وواجهوا هذه المشكلة.
00:00:50بإمكانهم طبعاً حلها، لكن سيكون من الأفضل لو كان هناك منفذ متاح دائماً
00:00:55ليعملوا عليه، لتجنب حدوث هذا الأمر من الأساس.
00:00:58الآن، بعد تثبيت Portless وتشغيل بروكسي Portless،
00:01:01يمكنني تشغيل الأمر portless متبوعاً باسم المضيف، وهو في هذه الحالة xdlapi،
00:01:06ولكن يمكنكم اختيار أي اسم تريدونه.
00:01:08ثم نضع الأمر الذي نريد تشغيله، وهو bun run devapi.
00:01:12وعندما أضغط Enter، سيبحث عن رقم منفذ عشوائي متاح في نطاق الـ 4000.
00:01:16لأن هذا النطاق أقل عرضة للاستخدام من قبل البرامج الأخرى.
00:01:20ويقوم بعرض تطبيقي مع اسم المضيف الخاص بي على localhost:1355.
00:01:25افتراضياً سيكون 1355، وهو يرمز لكلمة “less” لأن الأداة هي Portless. هل وصلت الفكرة؟
00:01:30الآن إذا نقرت هنا، سترون أن التطبيق يعمل بنجاح.
00:01:34وإذا ذهبت إلى التطبيق الآخر وفعلت الشيء نفسه تماماً،
00:01:37فإنه سيجد منفذاً حراً آخر وسيستخدم اسم المضيف.
00:01:40لكن الرقم في النهاية سيظل دائماً كما هو.
00:01:42في الواقع، يمكننا تغييره إذا أردنا.
00:01:44وإذا غيرناه إلى المنفذ 80، فيمكننا ببساطة حذف النقطتين والرقم تماماً.
00:01:49لذا، إذا بدأت بروكسي Portless على المنفذ 80، مع تذكر استخدام sudo،
00:01:53وأيضاً استخدام sudo لبدء عملية Portless،
00:01:55فيمكننا حينها استخدام النطاق الفرعي فقط مع .localhost.
00:01:59بل ويمكننا أيضاً الحصول على دعم HTTPS بالإضافة إلى استخدام المنفذ 80
00:02:03عبر استخدام علامة HTTPS، التي ستسمح لنا باستخدام بروتوكول HTTPS.
00:02:08لكن إذا كنت تستخدم Vite، فسيتعين عليك ضبط متغير المنفذ في مفتاح port،
00:02:13بالإضافة إلى تعيين المضيف (host) على هذه القيمة.
00:02:15سأشرح السبب لاحقاً في الفيديو.
00:02:17ولكن هناك مجموعة من الخيارات الأخرى التي يوفرها Portless،
00:02:21مثل القدرة على تشغيل البروكسي في الواجهة لأغراض تصحيح الأخطاء
00:02:25والقدرة على تشغيل أمر بدون البروكسي مرة أخرى للتصحيح أو كمخرج للطوارئ.
00:02:30لكن لماذا يستخدم رقم منفذ عشوائي في كل مرة؟
00:02:33ولماذا يحتاج أصلاً إلى بروكسي؟
00:02:35دعونا نتعمق في كيفية عمله.
00:02:36سوف نمر بعمليتين.
00:02:39ماذا يحدث عند تشغيل أمر Portless الرئيسي في نافذة الأوامر؟
00:02:42وماذا يحدث عندما يتصفح المتصفح رابط Portless؟
00:02:46هنا، عندما تقوم بتشغيل أمر Portless، في هذه الحالة،
00:02:49Portless myapp مع الأمر bun start،
00:02:52ما يحدث هو استخراج اسم المضيف والأمر أولاً.
00:02:56ثم الخطوة التالية هي التحقق مما إذا كان البروكسي يعمل.
00:02:59وإذا لم يكن كذلك، فسيقوم بتشغيله.
00:03:01ولكن هناك تنبيه بسيط، لأنه يمكنك تحديد المنفذ الذي تريد تشغيل البروكسي عليه.
00:03:06افتراضياً، هو 1355.
00:03:08ولكن إذا قمت بتعيينه على قيمة أقل من 1024،
00:03:12فإنه سيطلب تأكيدك قبل أن يبدأ العمل.
00:03:15أما إذا كان فوق ذلك الرقم، فسيتم تشغيله تلقائياً.
00:03:19بعد ذلك، يجد منفذاً متاحاً بين الرقمين 4000 و4999.
00:03:25وهذا المنفذ عشوائي لجعل عملية البحث أسرع.
00:03:29لأنه لو كان بالتسلسل، سيتعين عليه فحص كل المنافذ واحداً تلو الآخر،
00:03:33وهو ما قد يستغرق وقتاً طويلاً إذا كان لديك الكثير من العمليات النشطة.
00:03:35ثم بعد العثور على المنفذ، يضيف التفاصيل إلى ملف JSON مخزن.
00:03:40بعدها يقوم بتشغيل أمرك على ذلك المنفذ ويضيفه إلى متغير البيئة port،
00:03:47والذي يمكن لمعظم تطبيقات جافا سكريبت الوصول إليه.
00:03:50الآن دعونا نركز على هذا الجزء.
00:03:52عندما يزور متصفح رابط portless، في هذه الحالة، سيكون myapp.
00:03:56وإذا التزمنا بالمنفذ الافتراضي، فسيكون 1355.
00:04:00بالطبع، يقوم بعملية تحليل DNS كاملة قبل إنشاء اتصال TCP بالبروكسي،
00:04:06الذي يقوم ببساطة باستخراج اسم المضيف، أي myapp،
00:04:09ثم يستخدم ذلك للبحث عن منفذ تطبيقك داخل ملف JSON.
00:04:15وبمجرد حصوله على رقم المنفذ الصحيح، يقوم بتوجيه الطلب إلى تطبيقك الفعلي،
00:04:21والذي يرسل استجابة تعود إلى البروكسي قبل أن تذهب للمتصفح،
00:04:26بما أن المتصفح يتوقع استجابة من المنفذ 1355
00:04:30وليس من الرقم الذي خصصه البروكسي عشوائياً في هذه المرحلة من العملية.
00:04:35هذا يعمل أيضاً بشكل سحري مع WebSockets.
00:04:38كل هذا مثير للإعجاب جداً بالنسبة لمشروع تم إنجازه في عطلة نهاية أسبوع.
00:04:40ومع ذلك، إذا استخدمت Portless في مشروع لا يعتمد على Next.js مثل Vite، فقد تواجه بعض المشاكل.
00:04:47أولاً، لأنه يستخدم رقم منفذ عشوائي مخصص لمتغير port
00:04:52وليس رقماً ثابتاً، عليك التأكد من أن تطبيقك يمكنه العمل من ذلك المنفذ
00:04:56حتى يتمكن البروكسي من معرفة المكان الذي سيوجه إليه حركة المرور.
00:05:00وبالنسبة لـ Vite أو أي أداة تجميع مشابهة، قد تضطر لإضافة مفتاح host وتعيينه على هذه القيمة،
00:05:06لأنه يرفض الطلبات القادمة من أصول غير معروفة، وهذا يعطل هذا الفحص.
00:05:10لقد حاولت استخدام مفتاح allow-host بقيم مختلفة، لكن ذلك لم يفلح.
00:05:16لذا، على الرغم من أن هذا الحل قد يبدو جذرياً،
00:05:19إلا أنه لا داعي للقلق حقاً إذا كنت تشغل الأمور محلياً.
00:05:22ولكن مثل معظم المشاريع الأخرى من Vercel Labs، سيستمر Portless في تلقي التحديثات،
00:05:26مما يعني أن معظم هذه الميزات سيتم تحسينها في المستقبل،
00:05:30وكذلك أشياء مثل دعم نظام ويندوز.
00:05:32وبالحديث عن Vercel Labs، إذا لم تجرب Agent Browser بعد،
00:05:36وهو أفضل وسيلة لوكيل الذكاء الاصطناعي الخاص بك للتفاعل مع المتصفح،
00:05:39فيمكنك تعلم كل شيء عنه في الفيديو القادم.