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

إذا كان لديك تطبيق 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: إنشاء نسخة من مستودع العرض التوضيحي

إذا كان لديك تطبيق Next.js أو Angular في مستودع GitHub، يمكنك تخطّي هذه الخطوة والانتقال إلى الخطوة 2: إنشاء خلفية App Hosting. ليس عليك إنشاء نسخة من مستودع apphosting-adapters أو تثبيته لنشر تطبيقك الخاص.

إذا لم يكن لديك تطبيق حالي وأردت نشر نموذج تطبيق، انتقِل إلى https://github.com/firebase/apphosting-adapters واختَر Fork. بالإضافة إلى أدوات محوِّل إطار العمل، يتضمّن هذا المستودع نماذج البدء الرسمية لـ Next.js وAngular في دليل /starters.

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

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

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

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

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

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

  • اختَر منطقة أساسية (عادةً ما تكون المنطقة الأقرب إلى المستخدمين).

  • اربط حسابك بـ GitHub. اختَر المستودع الذي أنشأته من خلال إنشاء نسخة من مستودع apphosting-adapters، أو اختَر مستودع التطبيق الحالي.

  • اضبط الدليل الجذري لتطبيقك:

    • في حال نشر تطبيقك الخاص، حدِّد الدليل الجذري لتطبيقك (يكون تلقائيًا /). عادةً ما يكون هذا الدليل هو مكان ملف package.json.

    • إذا كنت تستخدم مستودع الإصدار التجريبي من apphosting-adapters، اضبط الدليل الجذري لتطبيقك على أحد المسارات التالية:

    • /starters/nextjs/basic

    • /starters/angular/basic

  • اضبط الفرع المباشر على main.

  • تفعيل عمليات الطرح التلقائية (يتم تفعيل عمليات الطرح التلقائية تلقائيًا)

  • حدِّد اسمًا للخلفية.

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

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