إذا كان لديك تطبيق Next.js أو Angular حالي (الإصدار 13 من Next.js أو الإصدار 17.2 من Angular أو الإصدارات الأحدث) في مستودع GitHub، يمكنك بدء استخدام App Hosting بخطوات بسيطة، مثل إنشاء خلفيّة App Hosting ثم بدء عملية الطرح من خلال الدفع إلى الفرع المنشور. إذا لم يكن لديك تطبيق، استخدِم أحد عيّنات التطبيقات لتنفيذ الخطوات الموضّحة في هذا الدليل.
قبل البدء
قبل أن تتمكّن من إعداد Firebase App Hosting، عليك إنشاء مشروع على Firebase (إذا لم يكن لديك مشروع) والترقية إلى خطة Blaze.
لإنشاء مشروع:
-
في وحدة تحكّم Firebase، انقر على إضافة مشروع.
-
لإضافة موارد Firebase إلى مشروع Google Cloud حالي، أدخِل اسم المشروع أو اختَره من القائمة المنسدلة.
-
لإنشاء مشروع جديد، أدخِل اسم المشروع المطلوب. يمكنك أيضًا اختياريًا تعديل رقم تعريف المشروع المعروض أسفل اسم المشروع.
-
-
راجِع بنود Firebase واقبلها في حال طُلب منك ذلك.
-
انقر على متابعة.
-
(اختياري) يمكنك إعداد Google Analytics لمشروعك، ما يتيح لك الحصول على تجربة مثالية باستخدام أيّ من منتجات Firebase التالية:
اختَر إما حساب Google Analytics حاليًا أو أنشئ حسابًا جديدًا.
إذا أنشأت حسابًا جديدًا، اختَر Analytics الموقع الجغرافي لإعداد التقارير، ثم وافِق على إعدادات مشاركة البيانات وبنود Google Analytics لمشروعك.
-
انقر على إنشاء مشروع (أو إضافة Firebase، إذا كنت تستخدم مشروعًا حاليًا على Google Cloud).
توفّر Firebase الموارد تلقائيًا لمشروعك على Firebase. عند اكتمال العملية، سيتم نقلك إلى صفحة النظرة العامة لمشروع Firebase في وحدة تحكّم Firebase.
الخطوة 0 (اختيارية): إنشاء مستودع على GitHub وتطبيق ويب
إذا لم يكن لديك تطبيق ويب مُخزَّن في مستودع GitHub، أو إذا أردت تجربة العملية باستخدام نموذج تطبيق، ابدأ بإعداد أحد نماذجنا، إما لتطبيق Next.js أو Angular:
npm init @apphosting
يمكنك تشغيل نموذج التطبيق محليًا باستخدام next dev
أو ng start
. للمتابعة،
أنشئ مستودعًا جديدًا على GitHub
وأضِف إليه نموذج الرمز الذي تم إعداده حديثًا.
الخطوة 1: إنشاء خلفية App Hosting
App Hostingالخلفية هي مجموعة الموارد المُدارة التي ينشئها App Hosting لإنشاء تطبيق الويب الخاص بك وتشغيله. يمكن لأي مالك مشروع إنشاء أول App Hosting خلفية لمشروع باستخدام وحدة تحكّم Firebase أو Firebase CLI. بعد هذا الإعداد الأولي، App Hosting يمكن للمشرفين أيضًا إنشاء خلفيات إضافية وإدارتها. لمعرفة التفاصيل، يُرجى الاطّلاع على Firebase App Hosting أدوار إدارة الهوية وإمكانية الوصول.
وحدة تحكُّم Firebase: من قائمة الإنشاء، اختَر استضافة التطبيقات ثم البدء.
واجهة برمجة التطبيقات: (الإصدار 13.15.4 أو الإصدارات الأحدث) لإنشاء خلفية، نفِّذ العبارة التالية من جذر دليل المشروع على الجهاز، مع تقديم projectID و region كوسيطَين:
firebase apphosting:backends:create --project PROJECT_ID --location us-central1
في كل من وحدة التحكّم أو سطر الأوامر، اتّبِع التعليمات لتحديد اسم لتطبيقك في الخلفية، وإعداد اتصال GitHub، وضبط إعدادات النشر الأساسية التالية:
ضبط الدليل الجذر لتطبيقك (الإعداد التلقائي هو
/
)هذا هو عادةً مكان توفُّر ملف
package.json
.
ضبط الفرع المباشر
هذا هو الفرع من مستودع GitHub الذي يتم نشره على عنوان URL المنشور. وغالبًا ما يكون هذا هو الفرع الذي يتم دمج فروع الميزات أو فروع التطوير فيه.
قبول عمليات الطرح التلقائية أو رفضها
تكون عمليات الطرح التلقائية مفعَّلة تلقائيًا. عند اكتمال إنشاء الخلفية، يمكنك اختيار نشر تطبيقك على App Hosting على الفور.
الخطوة 2: عرض التطبيق المنشور
عند إنشاء خلفية، تمنحك Firebase نطاقًا فرعيًا بدون أي تكلفة يمكن للمستخدمين النهائيين من خلاله الانتقال إلى تطبيق الويب. التنسيق هوbackend-id--project-id.us-central1.hosted.app
.
للاطّلاع على عنوان URL لتطبيقك على الويب، يُرجى التحقّق من وحدة تحكّم Firebase أو تنفيذ الأمر التالي في سطر الأوامر:
firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1
الخطوة 3: بدء عملية طرح من خلال تطبيق تغيير
بعد إنشاء الخلفية وحصولك على عنوان URL متاح، يمكنك بدء طرح إصدار جديد من تطبيق الويب عند دفع التغييرات إلى الفرع المنشور من مستودع GitHub. لإجراء اختبار لإعداد App Hosting:
- في GitHub، ادفع التغيير إلى الفرع المنشور من تطبيق الويب.
- افتح علامة التبويب App Hosting فيconsole Firebase وانقر على عرض لوحة البيانات لنظامك الأساسي. تعرض قائمة الجدول الإصدار المحدّد المرتبط بالطرح الذي تم تشغيله من خلال التغيير.
الخطوات التالية
- التعمّق أكثر: يمكنك الاطّلاع على دورة تدريبية حول رموز برمجية في Firebase تدمج تطبيقًا مستضافًا مع Firebase Authentication وميزات الذكاء الاصطناعي من Google: Next.js | Angular
- ربط نطاق مخصّص
- ضبط الخلفية
- مراقبة عمليات الطرح واستخدام الموقع الإلكتروني والسجلّات