إذا كان لديك تطبيق 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 واجهة سطر الأوامر.
وحدة تحكُّم Firebase: من قائمة الإنشاء، اختَر استضافة التطبيقات ثم البدء.
CLI: (الإصدار 13.15.4 أو إصدار أحدث) لإنشاء واجهة خلفية، شغِّل الأمر التالي من جذر دليل المشروع المحلي، مع إدخال رقم تعريف المشروع والمنطقة المفضّلة كوسيطات:
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 في وحدة تحكّم Firebase واختَر عرض لوحة البيانات للخلفية. تعرض قائمة الجدول مدة الالتزام المحددة المرتبطة بالطرح التي أدت إلى نتيجة التغيير الذي أجريته.
الخطوات التالية
- التعمّق أكثر: اطّلع على الدروس التطبيقية حول ترميز Firebase التي تدمج تطبيقًا مستضافًا مع مصادقة Firebase وميزات تكنولوجيات الذكاء الاصطناعي من Google: Next.js | Angular
- ربط نطاق مخصّص
- ضبط الخلفية
- مراقبة عمليات الطرح واستخدام الموقع الإلكتروني والسجلّات