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

إذا كان لديك تطبيق حالي 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.

لقطة شاشة لعملية إعداد الخلفية في ميزة "استضافة التطبيقات"

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

  • اختَر منطقة أساسية (عادةً ما تكون المنطقة الأقرب إلى المستخدمين).
  • اربط حسابك بـ 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 أثناء طرح التغيير الجديد في مرحلة الإنتاج. بعد اكتمال عملية الطرح، يمكنك الاطّلاع على التغيير في الصفحة الرئيسية للتطبيق.

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