إنشاء خادم محلي يمكن الوصول إليها من العنوان العام

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

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

باستخدام متشرد لخلق بيئة محلية

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

للبدء ، ستحتاج إلى انتزاع وتثبيت VirtualBox و Vagrant. كلاهما مجاني ويستخدم لإنشاء جهاز افتراضي يعمل على تشغيل الخادم الخاص بك.

الآن ، قم بإنشاء مجلد لتخزين مواقع الويب الخاصة بك. دعنا نستخدم دليلًا اسمه “المواقع” داخل دليل المستخدم الرئيسي لدينا. ممكن حدوثه / المستخدمين / [اسم المستخدم] / مواقع على OS X و C: / المستخدمين / [اسم المستخدم] / مواقع على ويندوز.

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

لأغراض هذا البرنامج التعليمي ، سأقوم بإنشاء موقع WordPress على الويب.

داخل ال وورد مجلد سنحتاج إلى إنشاء ملفين, Vagrantfile و install.sh. سيتم استخدام هذه لإعداد أجهزتنا الافتراضية. قام Jeffrey Way بإنشاء ملفين رائعين ؛ يمكنك الاستيلاء على Vagrantfile و install.sh الملفات.

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

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

لا تنس قراءة دليل Vagrant الكامل لمزيد من المعلومات حول إنشاء مضيفين ظاهريين ، ورسم خرائط المجالات مثل mytest.dev وما إلى ذلك وهلم جرا.

فتح المواقع المحلية على نفس الشبكة باستخدام Gulp

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

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

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

تثبيت اللب

تثبيت Gulp سهل للغاية. توجه إلى صفحة الشروع في العمل للحصول على التعليمات. أحد المتطلبات المسبقة هو NPM (Node Package Manager). أسهل طريقة للحصول على هذا هي تثبيت العقدة نفسها. توجه لأسفل إلى موقع العقدة للحصول على التعليمات.

بمجرد استخدامك لل npm تثبيت - غلوب العالمية أمر لتثبيت بلع على الصعيد العالمي ، تحتاج إلى إضافته إلى المشروع الخاص بك. طريقة للقيام بذلك هي لتشغيل تثبيت NPM - بلسم حفظ ديف في المجلد الجذر لمشروعك ، ثم أضف gulpfile.js ملف هناك.

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

var gulp = require ('gulp') ؛

إذا كنت مهتمًا بجميع الأشياء الرائعة التي يمكن أن يقوم بها Gulp مثل تسلسل البرامج النصية ، وتجميع Sass و LESS ، وتحسين الصور وما إلى ذلك ، اقرأ Guide To Gulp. سنركز في هذه المقالة على إنشاء خادم.

باستخدام Browsersync

يحتوي Browsersync على ملحق Gulp والذي يمكننا تثبيته في خطوتين. أولاً ، دعنا نستخدم npm لتنزيله ، ثم نضيفه إلى Gulpfile.

إصدار npm تثبيت متصفح - مزامنة بلع - حفظ ديف القيادة في جذر المشروع في المحطة ؛ هذا سوف تحميل التمديد. ثم افتح ملف Gulpfile وأضف السطر التالي إليه:

var browserSync = require ('browser-sync'). create ()؛

يتيح ذلك لـ Gulp معرفة أننا سنستخدم Browsersync. بعد ذلك ، سنحدد مهمة تتحكم في كيفية عمل Browsersync.

gulp.task ('browser-sync'، function () browserSync.init (proxy: "192.168.33.21")؛)؛

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

هناك أربعة عناوين URL منفصلة هناك ، وإليك ما يعنيه:

• محلي: عنوان URL المحلي هو المكان الذي يمكنك فيه الوصول إلى الخادم على الجهاز الذي تقوم بتشغيله عليه. في حالاتنا يمكنك استخدامها 192.168.33.21 أو يمكنك استخدام واحد المقدمة من قبل Borwsersync.
• خارجي: هذا هو عنوان URL الذي يمكنك استخدامه على أي جهاز متصل بالشبكة للوصول إلى موقع الويب. ستعمل على جهازك المحلي ، هاتفك ، جهازك اللوحي وما إلى ذلك.
• UI: يشير عنوان URL هذا إلى خيارات الخادم الجاري تشغيله حاليًا. يمكنك رؤية الاتصالات ، وإعداد خيارات التحكم في الشبكة ، وعرض السجل أو خيارات المزامنة.
• واجهة المستخدم الخارجية: هذا هو نفس واجهة المستخدم ، ولكن يمكن الوصول إليها من أي جهاز على الشبكة.

لماذا استخدام Browsersync?

الآن وقد انتهينا من هذه المرحلة ، ربما تفكر: لماذا تستخدم Browsersync على الإطلاق؟ يمكن أيضًا الوصول إلى عنوان URL 192.168.33.21 من أي جهاز. بينما يكون الأمر كذلك ، فستحتاج إلى تثبيت WordPress على عنوان URL هذا.

عادةً ما أستخدم مضيف ظاهري ولدي مجالات مثل Wordpress.local أو myproject.dev. يتم حل هذه المشكلات محليًا حتى لا تتمكن من زيارة wordpress.local على هاتفك المحمول وترى نفس النتيجة على جهاز الكمبيوتر المحلي الخاص بك.

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

باستخدام ngrok لمشاركة مضيفنا

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

تثبيت ngrok

انتقل إلى صفحة تنزيل ngrok وانتزاع الإصدار الذي تحتاجه. يمكنك تشغيله من المجلد الموجود به أو نقله إلى موقع يتيح لك تشغيله من أي مكان. في نظام Mac / Linux ، يمكنك تشغيل الأمر التالي:

sudo mv ngrok / usr / local / bin / ngrok

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

باستخدام ngrok

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

ngrok http 3000

سيؤدي هذا إلى إنشاء نفق يمكن الوصول إليه إلى مضيفك المحلي ، والنتيجة ستكون مثل هذا:

عنوان URL الذي تراه بجوار “إعادة توجيه” هو ما يمكنك استخدامه للوصول إلى موقع الويب الخاص بك من أي مكان.

استنتاج

في نهاية اليوم ، يمكننا الآن القيام بثلاثة أشياء:

• عرض والعمل على مشروعنا محليا
• عرض موقعنا عبر أي جهاز على الشبكة
• اسمح للآخرين بمشاهدة عملنا في أي مكان من خلال رابط بسيط

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

إذا كانت لديك طريقة مختلفة للعمل محليا ومشاركة النتيجة ، فأخبرنا بذلك!