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

باستخدام تطبيق حالي على 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 المقترَح، هناك طرق أخرى للنشر، بما في ذلك استخدام Firebase CLI لنشر الرمز البرمجي المحلي بدون اتصال GitHub.

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

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

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

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

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

  3. إذا طُلب منك ذلك، يمكنك الترقية إلى خطة Blaze المَرِنة "الدفع حسب الاستخدام" لاستخدام 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 أثناء طرح التغيير الجديد في مرحلة الإنتاج. عند اكتمال عملية الطرح، يمكنك عرض التغيير في الصفحة الرئيسية للتطبيق.

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