كيفية نشر تطبيقات الويب

في هذا الدرس التعليمي، سنقدم كيفية نشر تطبيق الويب الخاص بك على الإنترنت ليتمكن الآخرون من الوصول إليه. سنقدم ثلاث منصات نشر شائعة الاستخدام: Tencent CloudBase و Vercel و Zeabur، لمساعدتك على إكمال العملية الكاملة من "كتابة الكود" إلى "جعل الآخرين قادرين على الوصول إلى موقعك على الإنترنت".

ما هو "النشر"؟

قبل البدء، دعنا نوضح ما يعنيه "النشر (Deployment)" فعليًا. أي موقع يريد أن يتم الوصول إليه من قبل مستخدمين خارجيين يجب أن يكون لديه عنوان شبكة يمكن الوصول إليه بشكل عام (يمكن أن يكون هذا العنوان عنوان IP، مثل 123.45.67.89، أو اسم نطاق، مثل google.com وغيره). لكن العنوان وحده ليس كافيًا - كود صفحة الويب الذي كتبته (مثل ملفات HTML و CSS و JavaScript، أو المشاريع المكتوبة بأطر عمل مثل React و Vue)، والموارد المرتبطة مثل الصور/الفيديو، يجب أن توضع جميعها على خادم يعمل على مدار الساعة، وهو يستجيب لطلبات الشبكة، بحيث يمكن لأي متصفح الوصول وتنزيل هذه الموارد.

مصدر الصورة: https://www.hostinger.com/tutorials/what-is-cloud-hosting

العملية الكاملة لرفع الموارد وتكوين البيئة وجعل الخدمة "تعمل" تسمى النشر (Deployment).

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

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

1. إعداد الخادم: تحتاج أولاً إلى شراء خادم سحابي (مثل Alibaba Cloud أو Tencent Cloud أو AWS EC2)، واختيار منطقة الخادم (مثل شنغهاي، سنغافورة)، والتكوين (CPU، الذاكرة، حجم القرص، إلخ)، وتعلم أيضًا كيفية الاتصال بالخادم عن بُعد (مثل تسجيل الدخول عبر أداة SSH).
2. تكوين البيئة: تطبيقات الويب تحتاج إلى بيئة محددة لتعمل - على سبيل المثال، لتشغيل مشروع Node.js يجب تثبيت Node.js أولاً؛ لتشغيل مشروع Python يجب تثبيت Python والمكتبات الخارجية المقابلة. إذا كانت إصدارات البيئة غير متوافقة، قد يُبلغ البرنامج عن أخطاء أو لا يعمل.
3. رفع الموارد: تحتاج إلى رفع الكود والموارد المحلية إلى الخادم، وتشمل الطرق الشائعة FTP أو Git. إذا كان حجم المشروع كبيرًا نسبيًا (مثل احتوائه على ملفات فيديو)، ففي حالة انقطاع الاتصال في المنتصف، قد تحتاج أحيانًا إلى إعادة الرفع.

4. بدء الخدمة والاختبار: بعد اكتمال الرفع، تحتاج أيضًا إلى تنفيذ أوامر على الخادم لبدء التطبيق، واختبار "هل يمكن الوصول إلى عنوان الشبكة المخصص". إذا تعذر الوصول، فقد يكون جدار الحماية للخادم لم يفتح المنفذ المقابل (مثل تطبيقك يستمع على المنفذ 3000، لكن هذا المنفذ محظور بواسطة جدار الحماية)، أو قد يكون هناك خطأ في البرنامج نفسه، وفي هذه الحالة تحتاج إلى عرض سجلات الخادم للتحقيق.

   💡 يمكن فهم المنفذ كـ "رقم الغرفة" الذي يميز التطبيقات المختلفة على نفس الجهاز، بينما IP هو "رقم الباب" لهذا الجهاز. IP والمنفذ معًا (IP:port) يمكنهما تحديد موقع خدمة شبكة معينة بدقة.

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

منصات "النشر منخفض الكود" مثل CloudBase و Vercel و Zeabur وُلدت لحل المشاكل المعقدة المذكورة أعلاه. ستساعدك تلقائيًا على إكمال خطوات "شراء الخادم، تكوين البيئة، رفع الكود، بدء الخدمة، مراقبة التشغيل". تحتاج فقط إلى ربط مستودع الكود الخاص بك (مثل GitHub أو GitLab) بالمنصة، أو رفع الكود مباشرة، وستسحب الكود تلقائيًا وتتعرف على نوع التطبيق وتكوين بيئة التشغيل المقابلة، وتعطيك أخيرًا عنوان شبكة عامة يمكن لأي شخص الوصول إليه. يمكنها حتى ربط اسم النطاق الخاص بك بنقرة واحدة.

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

---

مقارنة منصات النشر

المنصة	الخصائص	سيناريوهات التطبيق	الحصة المجانية
Tencent CloudBase	سرعة الوصول محليًا سريعة، تكامل عميق مع بيئة WeChat	مشاريع تركز على المستخدمين المحليين وتحتاج دعم تطبيقات WeChat المصغرة	لديه حصة مجانية
Vercel	دعم جيد لأطر العمل الأمامية، تكامل وثيق مع GitHub	مشاريع واجهة أمامية حديثة مثل React/Vue/Next.js	لديه حصة مجانية
Netlify	وظائف شاملة، يدعم معالجة النماذج والمصادقة، تكامل جيد مع Git	مواقع ثابتة تحتاج ميزات متقدمة مثل معالجة النماذج والمصادقة	لديه حصة مجانية
Zeabur	يدعم لغات متعددة وقوالب خدمات، تكوين مرن	مشاريع معقدة تحتاج نشر خدمات متعددة (مثل Dify، n8n)	حوالي 5 دولارات شهريًا مجانًا

---

1. Tencent CloudBase

Tencent CloudBase (التطوير السحابي) هي خدمة سحابية خلفية شاملة تقدمها Tencent Cloud، مناسبة بشكل خاص للمطورين المحليين. مزاياها تكمن في:

• سرعة الوصول محليًا سريعة: الخوادم موجودة محليًا، زمن الوصول منخفض
• تكامل بيئة WeChat: يمكن ربط تطبيقات WeChat المصغرة والحسابات الرسمية بسهولة
• حل شامل: يوفر استضافة مواقع ثابتة، ووظائف سحابية، وقواعد بيانات، وتخزين ومجموعة كاملة من الخدمات
• حصة مجانية كافية: المطورون الأفراد لديهم حصة موارد مجانية كافية

استخدام CloudBase لنشر تطبيقات الويب

الخطوة 1: التسجيل وتسجيل الدخول

قم بزيارة وحدة تحكم Tencent CloudBase، وسجل الدخول باستخدام WeChat أو QQ.

الخطوة 2: إنشاء بيئة

انقر على "بيئة جديدة"، واختر اسم بيئة (مثل my-web-app).

⚠️ ملاحظة: نسخة التجربة المجانية من CloudBase تتطلب رمز استبدال للتفعيل. تحتاج إلى متابعة حساب CloudBase الرسمي على WeChat، وإدخال "الحصول على رمز الاستبدال" في الحساب للحصول على رمز نسخة التجربة المجانية، ثم إدخال الرمز عند إنشاء البيئة لتفعيل البيئة المجانية (فترة التجربة المجانية 6 أشهر).

الخطوة 3: تفعيل استضافة المواقع الثابتة

في صفحة إدارة البيئة، ابحث عن وظيفة "استضافة المواقع الثابتة" وقم بتفعيلها. بعد التفعيل ستحصل على اسم نطاق وصول افتراضي.

يوفر CloudBase لاستضافة المواقع الثابتة طرق نشر متعددة، مشابهة لـ Zeabur:

• رفع مشروع محلي: رفع ملفات ثابتة مبنية من المحلي مباشرة (HTML، CSS، JS، إلخ)
• النشر من قالب: إنشاء مشروع بسرعة باستخدام قوالب جاهزة، مثل قالب تطبيق React Web، قالب تطبيق Vue Web
• النشر من مستودع Git: يدعم سحب الكود تلقائيًا من مستودعات مثل GitHub ونشره

الخطوة 4: نشر الكود

في صفحة استضافة المواقع الثابتة، يوفر CloudBase ثلاث طرق للنشر:

الطريقة الأولى: نشر مشروع محلي (رفع مشروع محلي)

• اختر "نشر مشروع محلي" في وحدة التحكم
• رفع الملفات الثابتة المبنية مباشرة (HTML، CSS، JS، إلخ)
• اختر مجلد المشروع المبني محليًا (مثل دليل dist أو build)
• انتظر اكتمال الرفع للوصول

الطريقة الثانية: النشر من قالب

• إنشاء مشروع بسرعة باستخدام قالب جاهز
• يدعم قوالب مثل قالب تطبيق React Web، قالب تطبيق Vue Web
• بناء ونشر تلقائي بناءً على القالب

الطريقة الثالثة: النشر من مستودع Git

• نشر من مستودع Git شخصي: ربط مستودع كود شخصي مثل GitHub
• نشر من مستودع عام: يدعم سحب الكود من مستودعات Git العامة
• تكوين أمر البناء التلقائي (مثل npm run build)
• كل دفع كود يعيد النشر تلقائيًا

💡 نصيحة: يمكنك أيضًا استخدام أداة CLI للنشر:

# تثبيت CloudBase CLI
npm install -g @cloudbase/cli
# تسجيل الدخول
tcb login
# النشر
tcb hosting deploy ./dist -e your-env-id

الخطوة 5: تكوين اسم نطاق مخصص (اختياري)

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

---

2. Vercel

Vercel هي واحدة من أكثر منصات نشر الواجهة الأمامية شعبية في العالم، مناسبة بشكل خاص لنشر مشاريع أطر العمل الأمامية الحديثة مثل React و Vue و Next.js. خصائصها تشمل:

• تكامل عميق مع GitHub: دفع الكود يعني نشر تلقائي
• معاينة تلقائية: كل طلب سحب (Pull Request) ينشئ رابط معاينة مستقل
• CDN عالمي: يتم توزيع الموقع تلقائيًا على العقد العالمية، سرعة الوصول سريعة
• وظائف Serverless: يدعم كتابة API خلفية في المشروع

⚠️ ملاحظة: قد لا يكون الوصول إلى Vercel مستقرًا في بعض بيئات الشبكة، يُنصح المستخدمون المحليون بالتفضيل CloudBase.

استخدام Vercel لنشر تطبيقات الويب

الخطوة 1: تسجيل حساب

قم بزيارة موقع Vercel الرسمي، وسجل الدخول باستخدام حساب GitHub.

الخطوة 2: استيراد المشروع

1. انقر على "Add New Project"
2. اختر مستودع GitHub الذي تريد نشره
3. إذا لم ترَ المستودع المطلوب، انقر على "Adjust GitHub App Permissions" للتصريح بالوصول

الخطوة 3: تكوين إعدادات البناء

يتعرف Vercel تلقائيًا على نوع المشروع ويكوين أوامر البناء:

الإطار	أمر البناء	دليل الإخراج
React	npm run build	build
Vue	npm run build	dist
Next.js	next build	-
HTML خالص	-	الدليل الجذري للمشروع

إذا كان التعرف التلقائي غير صحيح، يمكنك التعديل يدويًا:

• Build Command: أمر البناء، مثل npm run build
• Output Directory: دليل إخراج البناء، مثل dist أو build
• Install Command: أمر تثبيت التبعيات، عادةً npm install

الخطوة 4: النشر

انقر على زر "Deploy"، وانتظر اكتمال البناء. بعد نجاح البناء، ستحصل على نطاق xxx.vercel.app.

الخطوة 5: اسم نطاق مخصص (اختياري)

في صفحة "Domains" في إعدادات المشروع، يمكنك إضافة اسم النطاق الخاص بك. سيقوم Vercel بتكوين HTTPS تلقائيًا.

---

3. Netlify

Netlify هي منصة نشر واجهة أمامية شائعة جدًا أخرى، مشابهة لـ Vercel، مناسبة بشكل خاص لنشر المواقع الثابتة وتطبيقات الصفحة الواحدة (SPA). خصائصها تشمل:

• وظائف شاملة: بالإضافة إلى استضافة المواقع الثابتة، يدعم أيضًا معالجة النماذج والمصادقة ووظائف الحافة وغيرها من الميزات المتقدمة
• تكامل عميق مع Git: يدعم GitHub و GitLab و Bitbucket، دفع الكود يعني نشر تلقائي
• معاينة الفروع: كل فرع ينشئ رابط معاينة مستقل تلقائيًا
• CDN عالمي: يتم توزيع الموقع تلقائيًا على العقد العالمية، سرعة الوصول سريعة
• معالجة النماذج: معالجة عمليات إرسال نماذج الموقع بدون كود خلفي
• المصادقة: وظيفة مصادقة المستخدم المدمجة، يمكن تنفيذ تسجيل الدخول/التسجيل بسرعة

⚠️ ملاحظة: سرعة الوصول المحلي لـ Netlify قد لا تكون جيدة مثل CloudBase، يُنصح باستخدامها للمشاريع الموجهة بشكل أساسي للمستخدمين الخارجيين.

استخدام Netlify لنشر تطبيقات الويب

الخطوة 1: تسجيل حساب

قم بزيارة موقع Netlify الرسمي، وانقر على "Sign up" للتسجيل. يمكنك التسجيل باستخدام GitHub أو GitLab أو Bitbucket أو البريد الإلكتروني.

الخطوة 2: استيراد المشروع

1. بعد تسجيل الدخول انقر على "Add new site" ← "Import an existing project"
2. اختر منصة استضافة الكود الخاصة بك (مثل GitHub)
3. صرّح لـ Netlify بالوصول إلى مستودعاتك
4. اختر المستودع الذي تريد نشره من القائمة

الخطوة 3: تكوين إعدادات البناء

يتعرف Netlify تلقائيًا على أطر العمل الأمامية الشائعة ويكوين إعدادات البناء:

الإطار	أمر البناء	دليل النشر
React	npm run build	build
Vue	npm run build	dist
Angular	ng build	dist/<project-name>
Next.js	next build	out
HTML خالص	-	. (الدليل الجذري للمشروع)

إذا كان التعرف التلقائي غير صحيح، يمكنك التكوين يدويًا:

• Build command: أمر البناء، مثل npm run build
• Publish directory: دليل إخراج البناء، مثل dist أو build

الخطوة 4: النشر

انقر على زر "Deploy site"، وانتظر اكتمال البناء. بعد نجاح البناء، ستحصل على نطاق xxx.netlify.app يمكن لأي شخص الوصول إلى موقعك من خلاله.

الخطوة 5: تكوين اسم نطاق مخصص (اختياري)

1. ادخل إعدادات الموقع، وانقر على "Domain management"
2. انقر على "Add custom domain"
3. أدخل اسم النطاق الخاص بك واتبع التعليمات لتكوين سجلات DNS
4. سيقدم Netlify تلقائيًا ويكوين شهادة HTTPS

الميزات المميزة

1. معالجة النماذج

يوفر Netlify ميزة مريحة جدًا: معالجة عمليات إرسال النماذج بدون كود خلفي.

فقط أضف خاصية netlify في نموذج HTML:

<form name="contact" netlify>
  <p>
    <label>الاسم: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>البريد الإلكتروني: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>الرسالة: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">إرسال</button>
  </p>
</form>

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

2. Netlify Functions (وظائف الحافة)

يدعم Netlify نشر وظائف Serverless، مما يسمح لك بتنفيذ واجهات API بسيطة بدون بناء خادم خلفي كامل. يمكنك كتابة الدوال بـ JavaScript أو TypeScript، وبعد النشر ستحصل تلقائيًا على URL قابل للوصول.

على سبيل المثال، أنشئ ملف hello.js:

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify!" })
  };
};

بعد النشر، يمكنك الوصول إلى هذه الدالة من خلال https://your-domain/.netlify/functions/hello.

3. دعم التطوير المحلي

يوفر Netlify أداة CLI لتسهيل التطوير والاختبار محليًا:

# تثبيت Netlify CLI
npm install -g netlify-cli

# تسجيل الدخول
netlify login

# بدء خادم تطوير محلي
netlify dev

# اختبار الدوال محليًا
netlify functions:serve

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

---

4. Zeabur

Zeabur هي منصة نشر ناشئة، مناسبة بشكل خاص للمشاريع المعقدة التي تحتاج إلى نشر خدمات متعددة. مزاياها تكمن في:

• قوالب خدمات غنية: مدمج مع قوالب خدمات متعددة مثل Dify و n8n وقواعد البيانات
• دعم طرق نشر متعددة: GitHub، قوالب، صور Docker، مشاريع محلية، إلخ
• تركيب خدمات مرن: يمكن نشر خدمات متعددة مترابطة في مشروع واحد
• فوترة حسب الاستخدام: ادفع بقدر ما تستخدم، مناسب للمشاريع التجريبية

استخدام Zeabur لنشر Dify

في الدروس السابقة، تعرفنا بالفعل على Dify بشكل مختصر. الآن، يمكننا من خلال Zeabur بدء خدمة Dify الخاصة بنا بسهولة كبيرة. أولاً افتح صفحة وحدة التحكم، دعنا نلقي نظرة على المناطق المختلفة أعلاه.

في هذه الصفحة، يمكنك أولاً رؤية العديد من المربعات، وهذه هي الخدمات التي تم تشغيلها بالفعل. في القائمة العلوية، سترى عدة خيارات: Agent و Servers و Docs و Templates، وتمثل على التوالي:

1. Agent: يمكن فتح المساعد الذكي (Agent) المدمج في Zeabur، وسؤاله عن كيفية العمل، أو الاستعلام عن حالة الخادم الحالية.
2. Servers: هنا يمكنك إضافة خوادم سحابية اشتريتها بنفسك، أو شراء خوادم مباشرة من خلال Zeabur.
3. Docs: عرض وثائق Zeabح الكاملة.
4. Templates: هنا تُعرض جميع قوالب الصور المدمجة.

"الصورة (Image)" المذكورة هنا يمكن فهمها على أنها "حزمة مضغوطة تحتوي على الكود وبيئة التشغيل". عندما تعمل خدمة معينة بنجاح على خادم، يمكننا اختيار حزم "بيئة التشغيل هذه + الكود" كصورة. بعد ذلك، على أي خادم جديد، طالما تم فك ضغط هذه الحزمة المضغوطة وتشغيلها، لا حاجة لإعادة تكوين البيئة والكود، وستعمل الخدمة مباشرة.

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

انقر على الرصيد لعرض تفاصيل الاستهلاك اليومي.

الآن لننشئ خدمة Dify الخاصة بنا. أولاً، في صفحة وحدة التحكم الرئيسية انقر على "New Project".

بعد ذلك شرح لكل طريقة إنشاء:

1. GitHub يمكن ربط حساب GitHub الخاص بك. بعد الربط، يمكنك اختيار مشروع مباشرة من مستودع GitHub للنشر (GitHub هو أكبر منصة استضافة كود في العالم حاليًا).

2. Template (قالب) يمكن نشر خدمات بناءً على قالب. Zeabur يحتوي على العديد من قوالب المشاريع الجاهزة (مثل Dify، n8n، إلخ)، يمكنك إنشاء ونشر تطبيقات بسرعة بناءً على هذه القوالب.

3. Databases (قواعد البيانات) لنشر خدمات قواعد البيانات، مثل MySQL و MongoDB وقواعد البيانات الشائعة الأخرى.

4. Functions (الدوال) يمكن نشر خدمات الدوال، يمكنك كتابة كود JavaScript أو Python ليتم استدعاؤها كدوال.

   

5. Local Project (مشروع محلي) رفع مجلد محلي، سيتعرف Zeabur تلقائيًا على نص البدء فيه. هذا مناسب لنشر مشروع طورتته محليًا بسرعة على Zeabur.

6. Docker Image نشر صورة Docker المعبأة بالفعل. إذا تم تعبئة مشروعك كصورة Docker (مثل المخزنة في Docker Hub أو مستودع صور آخر)، يمكنك نشرها مباشرة هنا.

7. Cursor إذا قمت بتثبيت Cursor (مثل Cursor IDE)، يمكنك نشر المشروع في Cursor مباشرة إلى Zeabur من خلال هذا المدخل.

إذا كنت تريد نشر خدمة Dify الخاصة بك، يُنصح باختيار طريقة Template، ثم كتابة "dify" في مربع البحث. سترى العديد من الإصدارات التي يصونها مؤلفون مختلفون، يمكنك اختيار أي منها (مثل إصدار v1.6.0).

بعد ذلك، أدخل أي اسم، وسيُنشئ Zeabur اسم نطاق مخصص مؤقت بناءً على هذا الاسم. بعد ذلك يمكن لجميع الأشخاص الوصول إلى خدمتك من خلال هذا العنوان.

بعد اكتمال الإنشاء، سترى عدة برامج (خدمات) تبدأ بالتتابع. تحتاج إلى الانتظار بصبر حتى تدخل جميع الخدمات حالة "تم البدء". (خدمة Dify تتكون من عدة برامج، كل برنامج مسؤول عن وظائف مختلفة، وتتعاون فيما بينها.)

عادةً، تحتاج فقط إلى النقر على تطبيق Dify على اليسار لرؤية عنوان الوصول الافتراضي. لكن في هذا المثال، نظرًا لوجود طبقة nginx إضافية في المقدمة، تحتاج إلى النقر على خدمة nginx للحصول على عنوان الوصول النهائي. يمكن فهم أن: nginx هو البرنامج الرئيسي المسؤول عن "استقبال وإرسال الطلبات" بشكل موحد للخارج، ويوزع عناوين الوصول الخارجي على الخدمات الداخلية. انقر على Nginx على اليسار، في صفحة التفاصيل يمكنك رؤية عنوان الخدمة الحالي، ثم افتح هذا العنوان في المتصفح وانتظر بدء الخدمة بالكامل.

بعد لحظات، ستتمكن من رؤية واجهة تسجيل الدخول لـ Dify. أدخل عنوان البريد الإلكتروني وكلمة مرور التسجيل، ويمكنك البدء في استخدام خدمة Dify الخاصة بك.

إذا كنت مهتمًا، يمكنك أيضًا بدء خدمة n8n بالمناسبة. n8n هي أيضًا منصة سير عمل AI شائعة جدًا في الخارج.

استخدام Zeabur و Trae لنشر لعبة الثعبان

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

الخطوة الأولى هي إنشاء مشروع لعبة الثعبان محليًا باستخدام Trae.

التنفيذ باستخدام إطار HTML

بالنسبة لـ Trae، إنشاء لعبة ثعبان مبنية على HTML أمر بسيط جدًا. بعد إنشاء اللعبة، تحتاج فقط إلى اتباع طريقة النشر المحلي لـ Zeabur المذكورة سابقًا لرفع المجلد الذي يحتوي على جميع الملفات.

بعد الانتهاء، ستدخل واجهة تفاصيل الخدمة:

انقر على خيار "Network" على اليسار، وابحث عن منطقة "Public Address" في الصفحة. انقر على "Generate Domain"، وسيتم إنشاء عنوان وصول خارجي، ويمكنك إدخال أي اسم تفضله.

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

التنفيذ باستخدام إطار React

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

إعادة البناء بهيكل React

في Trae، تحتاج فقط إلى شرح للـ Agent: "ساعدني في إعادة بناء هذا الكود بهيكل React"، ويمكنك بسهولة كبيرة إعادة بناء الهيكل المبني على HTML إلى مشروع React.

لكن، مقارنة بملفات HTML البسيطة، تطبيقات React تعتمد على أدوات بناء وهيكل مشروع أكثر تعقيدًا، لذا ستكون عملية النشر أكثر تعقيدًا قليلاً أيضًا. تتجلى مشكلة نموذجية في إعدادات المنفذ: بشكل افتراضي، تطبيقات React تستمع عادةً على المنفذ 3000 (يمكنك أيضًا رؤية ذلك في ملف التكوين أو سجل البدء).

لكن، النشر بهذه الطريقة على Zeabur سيفشل - لأن Zeabur يدعم فقط التطبيقات التي تستمع على المنفذ 8080. بمعنى آخر، إذا كنت تريد تشغيل تطبيق React بشكل طبيعي على Zeabur، يجب علينا أولاً تغيير منفذ الاستماع الافتراضي من 3000 إلى 8080.

لإجراء هذا التكوين بشكل صحيح، نحتاج أولاً إلى توضيح مفهومين: ما هو "المنفذ (Port)"، وماذا يعني "منفذ الاستماع (Listening Port)".

ما هو المنفذ؟

في شبكات الكمبيوتر، يمكن فهم المنفذ كـ "نقطة نهاية اتصال منطقية" تُستخدم للتمييز بين خدمات الشبكة المختلفة التي تعمل على نفس الجهاز. كتشبيه بسيط، إذا كان عنوان IP مثل "رقم الباب" (مثل 162.128.1.1)، فإن رقم المنفذ مثل "رقم الغرفة" للمبانٍ المختلفة - كل غرفة تقابل خدمة (مثل خادم الويب، خدمة البريد، أو تطبيق React الخاص بك).

يُعبر عن رقم المنفذ بعدد صحيح 16 بت، ونطاق القيم من 0 إلى 65535.

إذا كنت لا تريد تذكر هذه التفاصيل، يمكنك فهمها ببساطة: المنفذ هو جزء ضروري من تكوين "عنوان الوصول إلى الشبكة".

عادةً عندما نزور مواقع الويب أو عناوين IP، لا نضيف رقم المنفذ يدويًا، لأن المنفذ الافتراضي للويب هو 80 أو 443 (HTTPS). معظم المتصفحات تستخدم هذه المنافذ القياسية تلقائيًا. أما بالنسبة لبعض المنافذ الخاصة، مثل المنفذ 3000 الافتراضي لـ React، والمنفذ 8080 المطلوب من Zeabur، فيجب علينا إضافة :3000 أو :8080 بعد العنوان للوصول إلى المحتوى المقابل.

ماذا يعني "منفذ الاستماع"؟

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

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

عندما يبدأ خادم تطوير React الافتراضي، فإنه "يفتح" باب غرفة معينة، ويرتب "موظف استقبال" عند الباب، ورقم هذه الغرفة هو منفذ الاستماع الخاص به - 3000.

في نفس الوقت، سيخبر برنامج React "إدارة المبنى" (نظام التشغيل): "أنا في الغرفة 3000، يرجى تحويل جميع الرسائل المرسلة إلى 3000 (طلبات الشبكة) إلي".

بهذه الطريقة، عندما تزور موقع React، يصل الطلب أولاً إلى المبنى؛ ترى الإدارة أن الطلب مرسل إلى الغرفة 3000، فتحوله فورًا إلى "موظف الاستقبال" في React، الذي يعالجه ويعيد النتيجة - هذه هي عملية الوصول إلى تطبيق React.

عندما تنفذ npm start محليًا (الأمر الافتراضي لبدء خادم تطوير React محليًا، يمكن أيضًا تنفيذه في الشريط الجانبي لـ Agent في Vibe Coding)، سيقوم خادم تطوير React تلقائيًا بتعيين منفذ الاستماع على 3000. وتصميم منصة Zeabur يحدد أنها ستتعرف فقط على التطبيقات التي تستمع على المنفذ 8080. إذا كان تطبيق React لا يزال يستخدم المنفذ 3000 الافتراضي، فلن يتمكن Zeabur من تحويل الطلب إلى تطبيقك بشكل صحيح، مما يؤدي في النهاية إلى فشل النشر.

تعديل منفذ الاستماع الافتراضي

لتغيير منفذ الاستماع الافتراضي لـ React (3000) إلى 8080 المطلوب من Zeabur، هناك عدة طرق. أبسط طريقة هي إعطاء التعليمات مباشرة لـ Agent في Trae: "ساعدني في تغيير المنفذ الافتراضي لمشروع React هذا إلى 8080." سيقوم Trae بتعديل ملفات التكوين المقابلة في المشروع. بعد اكتمال التعديل، تحتاج فقط إلى إعادة التعبئة والرفع إلى Zeabur كما كان سابقًا.

في إعدادات الشبكة، حدد URL وصول، بنفس الطريقة تقريبًا كما في نشر مشروع HTML، ويمكن بدء خدمة نسخة React.

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

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

---

⚠️ كيفية إيقاف وحذف المشروع (Zeabur)

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

للعثور على مدخل إدارة المشروع، انقر أولاً على خيار "Settings" في المشروع.

بعد الدخول إلى صفحة الإعدادات، اسحب الصفحة إلى الأسفل، سترى واجهة مشابهة لما يلي:

يمكنك النقر على "Suspend All Services" لإيقاف جميع الخدمات مؤقتًا لتقليل التكلفة؛ إذا كانت هناك مشكلة في الخدمة، يمكنك النقر على "Restart All Services" لإعادة تشغيل جميع الخدمات. إذا كنت متأكدًا أنك لم تعد بحاجة إلى هذا المشروع، يمكنك النقر على "Delete Project" لحذف المشروع بالكامل.

---

الخلاصة

في هذا الدرس التعليمي، قدمنا أربع منصات نشر تطبيقات الويب شائعة الاستخدام:

1. Tencent CloudBase: مناسب للمستخدمين المحليين، سرعة الوصول سريعة، تكامل جيد مع بيئة WeChat
2. Vercel: مناسب لمشاريع أطر العمل الأمامية الحديثة، تكامل وثيق مع GitHub، تسريع CDN عالمي
3. Netlify: وظائف شاملة، يدعم معالجة النماذج والمصادقة، مناسب للمواقع الثابتة التي تحتاج ميزات متقدمة
4. Zeabur: مناسب للمشاريع المعقدة، قوالب خدمات غنية، يدعم طرق نشر متعددة

اختيار أي منصة يعتمد على احتياجاتك المحددة:

• إذا كان التركيز على المستخدمين المحليين، يُوصى بـ CloudBase
• إذا كنت تستخدم أطر عمل مثل React/Next.js، يُوصى بـ Vercel أو Netlify
• إذا كنت تحتاج معالجة نماذج ومصادقة وميزات متقدمة، يُوصى بـ Netlify
• إذا كنت تحتاج نشر خدمات مثل Dify و n8n، يُوصى بـ Zeabur

بغض النظر عن المنصة التي تختارها، العملية الأساسية للنشر متشابهة: تحضير الكود ← اختيار المنصة ← تكوين إعدادات البناء ← النشر والبدء. بعد إتقان هذه المهارات، يمكنك مشاركة التطبيقات التي طورتها مع العالم بأسره!