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

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

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

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

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

انتقِل إلى https://github.com/firebase/apphosting-adapters و انقر على إنشاء نسخة.

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

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

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

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

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

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

  • اختَر منطقة أساسية (عادةً ما تكون المنطقة الأقرب إلى المستخدمين).
  • اتّصِل بـ GitHub. اختَر المستودع الذي أنشأته للتو من خلال إنشاء نسخة من مستودع firebase-framework-tools.
  • اضبط دليل جذر تطبيقك على أحد الخيارات التالية:
  • اضبط الفرع المباشر على 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 Console، راقِب App Hosting أثناء طرح التغيير الجديد في مرحلة الإنتاج. عند اكتمال عملية الطرح، يمكنك عرض التغيير في الصفحة الرئيسية للتطبيق.

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