بدء استخدام استضافة التطبيقات

إذا كان لديك تطبيق Next.js أو Angular حالي (الإصدار 13.5.x من Next.js أو الإصدارات الأحدث، أو الإصدار 18.2.x من Angular أو الإصدارات الأحدث) في مستودع GitHub، يمكنك بدء استخدام App Hosting بسهولة من خلال إنشاء خلفية App Hosting ثم بدء عملية طرح من خلال إرسال التغييرات إلى الفرع المباشر. إذا لم يكن لديك تطبيق، يمكنك استخدام أحد نماذج التطبيقات لدينا لتنفيذ الخطوات الموضّحة في هذا الدليل.

للحصول على مساعدة مستنِدة إلى الذكاء الاصطناعي، انسخ الطلب أدناه إلى وكيل الترميز بالذكاء الاصطناعي (مثل Antigravity وClaude Code وCodex وCursor). يمكنك تخصيص الطلب وتكراره مع الوكيل. انتقِل إلى مهارات وكلاء Firebase للحصول على معلومات مفصّلة عن التثبيت. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

يوضّح هذا الدليل كيفية إعداد App Hosting في وحدة تحكّم Firebase للنشر تلقائيًا في كل مرة يتم فيها إجراء عملية دمج جديدة في مستودع GitHub. في نهاية هذا المسار، سيكون لديك تطبيق نموذجي مباشر من Next.js أو Angular تتم إعادة نشره في كل مرة تُجري فيها تغييرًا جديدًا على فرع main في مستودع GitHub.

على الرغم من أنّ هذا الدليل يركّز على سير العمل المقترَح في وحدة تحكّم Firebase، هناك طرق أخرى للنشر، بما في ذلك استخدام واجهة سطر الأوامر في Firebase لنشر الرمز البرمجي المحلي بدون اتصال GitHub.

الخطوة 1: إنشاء نسخة من مستودع العرض التوضيحي

انتقِل إلى https://github.com/firebase/apphosting-adapters واختَر Fork.

الخطوة 2: إنشاء خلفية App Hosting

  1. في وحدة تحكّم Firebase، انتقِل إلى الاستضافة والحوسبة بدون خادم > استضافة التطبيقات.

  2. انقر على البدء.

  3. إذا طُلب منك ذلك، يمكنك الترقية إلى خطة Blaze المَرِنة لاستخدام App Hosting.

لقطة شاشة لإعداد الخلفية في App Hosting

اتّبِع التعليمات لإكمال الخطوات التالية:

  • اختَر منطقة أساسية (عادةً ما تكون المنطقة الأقرب إلى المستخدمين).
  • اربط حسابك بـ GitHub. اختَر المستودع الذي أنشأته للتو من خلال تفريع مستودع apphosting-adapters.
  • اضبط الدليل الجذري لتطبيقك على أحد الخيارات التالية:
  • اضبط الفرع النشط على أنّه رئيسي.
  • تفعيل عمليات الطرح التلقائية (يتم تفعيل عمليات الطرح التلقائية تلقائيًا)
  • أدخِل اسمًا للخلفية.
  • اختَر بيئة التشغيل. بشكل افتراضي، يتم تحديد أحدث إصدار موصى به من Node.js مسبقًا لك.
  • أنشئ تطبيق ويب جديدًا على Firebase.

انقر على إنهاء ونشر.

الخطوة 3: عرض التطبيق المنشور

عند إنشاء خلفية، يمنحك Firebase نطاقًا فرعيًا بدون تكلفة حيث يمكن للمستخدمين النهائيين زيارة تطبيق الويب الخاص بك. ويكون تنسيقه على النحو التالي: backend-id--project-id.us-central1.hosted.app.

في صف معلومات الخلفية في لوحة معلومات الخلفية، حدد الرابط إلى الخلفية المباشرة لعرض موقع الويب الجديد:

لقطة شاشة لصف معلومات الخلفية مع التركيز على رابط التطبيق المنشور

الخطوة 4: بدء عملية طرح من خلال تطبيق تغيير

بعد إنشاء الخلفية والحصول على عنوان URL منشور، يمكنك بدء طرح إصدار جديد من تطبيق الويب في أي وقت تنشر فيه تغييرات في الفرع المنشور من مستودع GitHub. لإجراء اختبار لإعدادات "App Hosting"، يُرجى اتّباع الخطوات التالية:

  1. في نسختك من مستودع GitHub التجريبي، انتقِل إلى مصدر الصفحة الرئيسية للتطبيق التجريبي، وأجرِ أي تعديل يمكن التعرّف عليه، ثم أرسِل التغيير إلى الفرع الرئيسي. للعثور على صفحتك الرئيسية:

    • ‫Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. في وحدة تحكّم "Firebase"، يمكنك مراقبة App Hosting أثناء طرح التغيير الجديد في مرحلة الإنتاج. عند اكتمال عملية الطرح، يمكنك الاطّلاع على التغيير في الصفحة الرئيسية للتطبيق.

الخطوات التالية