كيفية عرض موقع الويب المحلي للعملاء 2024

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

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

الطُرق المُستخدمة لجعل موقع الويب عام

في هذا الشرح، سنستعرض طريقتين لعرض موقع ويب محلي للعملاء:

الطريقة الأولى: استخدام أداة Ngrok

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

الطريقة الثانية: استخدام GitHub Pages

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

عرض موقع الويب المحلي باستخدام Ngrok

في البداية انت بحاجة الى تحميل Ngrok على جهازك الخاص وهو متاح على جميع انظمة التشغيل والحاويات مثل Windows، Linux، MacOS و Docker.

يمكنك تحميل Ngrok من الموقع الرسمي: ngrok.com/download.

اذا كنت تستخدم Windows او MacOS يمكنك تحميل Ngrok من خلال سطر الأوامر Terminal أو CMD:

على Windows:

choco install ngrok

اذا كان Chocolatey غير مثبت على جهازك، فيمكنك تثبيته من خلال الأمر التالي في Powershell:

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

على MacOS:

 brew install ngrok/ngrok/ngrok

سوف يتم التحميل واضافة Ngrok الى مسار الجهاز (Path).

بعد ذلك عليك اضافة الرمز التعريفي لحسابك في Ngrok. اذا كنت تملك حساب يمكنك ايجاد الرمز في قسم Setup & Installation.

كما هو واضح في الصورة بعد تنزيل الأداة عليك اضافة الرمز التعريفي للحساب من خلال سطر الأوامر من خلال الأمر التالي:

ngrok config add-authtoken (authtoken ID)

عندها سوف تنتهي من التنصيب وسوف تتمكن من البدء في عرض موقع الويب المحلي للعملاء من خلال تشغيل الاداة على منفذ (Port) المشروع المحلي الذي تعمل عليه.

على سبيل المثال اذا كان المنفذ الذي تستخدمه في السيرفر المحلي هو 5000 سوف تتمكن من تشغيل ngrok كالتالي.

ngrok http http://127.0.0.1:5000

الـ 127.0.0.1 يُمثل السيرفر المحلي الذي تعمل عليه والمنفذ هو 5000. بعد تشغيل السيرفر سوف يتم انشاء رابط عمومي لمشاركته مع العميل كما في الصورة ادناه.

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

عرض موقع الويب المحلي باستخدام GitHub Pages

انت بحاجة الى تسجيل الدخول في GitHub، قم بإنشاء حساب إذا لم تكن تملك واحداً بعد الانتقال الى الموقع الرسمي: github.com.

عند الدخول الى حسابك في GitHub قم بإنشاء مستودع جديد من خلال الضغط على “New repository”

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

بعد انشاء المستودع سوف تظهر لك نافذة لاختيار الطريقة الانسب التي سوف تتعامل معها لرفع ملفاتك الى المستودع. من بين هذه الخيارات اما تنزيل تطبيق GitHub على الكمبيوتر او التعامل مع المستودع من خلال سيرفر SSH او من خلال سطر الأوامر.

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

بعد التثبت قم بتسجيل الدخول بحسابك على GitHub ثم قم بعملية استنساخ للمستودع (Clone repository) من خلال الضغط على زر “Set up in Desktop” كما يظهر في الصورة اعلاه.

تالياً بعد استنساخ المستودع، اذهب الى اعدادات المستودع من القائمة العلوية ثم توجه قسم “Pages”.

قم بتحديد خيار “Deploy from a branch” ثم اضغط على “Save”.

بالعودة الى تطبيق GitHub على الـ Desktop سوف نبدأ في رفع الملفات الى المستودع الذي نعمل عليه.

يمكن اضافة الملفات من محرر الأكواد (IDE) بشكل مباشر. حيث في هذا المثال سوف نقوم باستخدام Visual Studio Code من اجل رفع الملفات.

سوف يتم تحويلك بشكل تلقائي الى مجلد المستودع ويمكنك نقل ملفاتك الى المجلد الرئيسي او البدء في انشاء ملفاتك بشكل مباشر. من الأفضل جعل اسم ملف الصفحة الرئيسية “index.html”.

بعد الانتهاء من اضافة الملفات قم باغلاق محرر الاكواد واضغط على “Publish branch”.

سيتم رفع ملفاتك الى المستودع ونشرها وسوف تتمكن من الدخول الى الموقع من خلال الرابط الموجود في المستودع.

الخلاصة

من خلال Ngrok و GitHub Pages ستتمكن من جعل موقعك على السيرفر المحلي متاحاً للعامة من أجل المعاينة والصيانة بسهولة وفعالية. باستخدام Ngrok، يمكنك إنشاء نفق آمن إلى سيرفرك المحلي، مما يسمح لأي شخص بالوصول إلى الموقع عبر عنوان URL مؤقت. بينما يمكنك استخدام GitHub Pages لاستضافة صفحات ثابتة مباشرة من مستودع GitHub الخاص بك. مما يوفر وسيلة سهلة وسريعة لنشر واستعراض الموقع.

قمنا بإنشاء موقع بسيط باستخدام GitHub Pages يتم تغيير اللون بشكل عشوائي في كل مرة يتم الضغط على الزر. يمكن زيارة رابط الموقع من خلال الرابط التالي: https://adnannasr.github.io/my-site

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