אם יש לכם אפליקציית Next.js או Angular (גרסאות Next.js 13.5.x ומעלה או Angular 18.2.x ומעלה) במאגר GitHub, תהליך ההתחלה עם App Hosting יכול להיות פשוט כמו יצירת קצה עורפי של App Hosting ואז התחלת פריסה באמצעות שליחה לענף הפעיל. אם אין לכם אפליקציה, אתם יכולים להשתמש באחת מהאפליקציות לדוגמה שלנו כדי לבצע את השלבים שמתוארים במדריך הזה.
לפני שמתחילים
כדי להגדיר את Firebase App Hosting, צריך ליצור פרויקט Firebase (אם עדיין אין לכם פרויקט) ולשדרג לתוכנית Blaze.
כדי ליצור פרויקט:
-
במסוף Firebase, לוחצים על הוספת פרויקט.
-
כדי להוסיף משאבי Firebase לפרויקט קיים Google Cloud צריך להזין את שם הפרויקט או לבחור אותו מהתפריט הנפתח.
-
כדי ליצור פרויקט חדש, מזינים שם לפרויקט. אפשר גם לערוך את מזהה הפרויקט שמוצג מתחת לשם הפרויקט.
-
-
אם תופיע בקשה, תצטרכו לקרוא את התנאים של Firebase ולאשר אותם.
-
לוחצים על המשך.
-
(אופציונלי) מגדירים את Google Analytics לפרויקט, כדי ליהנות מחוויה אופטימלית באמצעות המוצרים הבאים של Firebase: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging ו-Remote Config (כולל התאמה אישית).
בוחרים חשבון Google Analytics קיים או יוצרים חשבון חדש. אם יוצרים חשבון חדש, בוחרים את Analytics מיקום הדיווח, ואז מאשרים את הגדרות שיתוף הנתונים ואת Google Analytics התנאים של הפרויקט.
-
לוחצים על יצירת פרויקט (או על הוספת Firebase, אם מוסיפים את Firebase לפרויקט קיים של Google Cloud).
מערכת Firebase מקצה באופן אוטומטי משאבים לפרויקט Firebase. בסיום התהליך, תועברו לדף הסקירה הכללית של פרויקט Firebase בFirebase מסוף.
שלב 0 (אופציונלי): יצירת מאגר ב-GitHub ואפליקציית אינטרנט
אם עדיין אין לכם אפליקציית אינטרנט במאגר GitHub, או אם אתם מעדיפים לנסות את התהליך עם אפליקציה לדוגמה, מתחילים באתחול אחת מהדוגמאות שלנו, ל-Next.js או ל-Angular:
npm init @apphosting
אפשר להריץ את אפליקציית הדוגמה באופן מקומי באמצעות next dev
או ng start
. כדי להמשיך, יוצרים מאגר GitHub חדש ומעבירים אליו את קוד הדוגמה שאותחל.
שלב 1: יצירת קצה עורפי App Hosting
קצה עורפי (backend) של App Hosting הוא אוסף של משאבים מנוהלים ש-App Hosting יוצר כדי לבנות ולהפעיל את אפליקציית האינטרנט שלכם.
מסוף Firebase: בתפריט Build (פיתוח), בוחרים באפשרות App Hosting (אירוח אפליקציות) ואז באפשרות Get started (תחילת העבודה).
CLI: (גרסה 13.15.4 ואילך) כדי ליצור קצה עורפי, מריצים את הפקודה הבאה מהספרייה הראשית של פרויקט מקומי, ומספקים את projectID כארגומנט:
firebase apphosting:backends:create --project PROJECT_ID
גם במסוף וגם ב-CLI, פועלים לפי ההנחיות כדי לבחור אזור, להגדיר חיבור ל-GitHub ולקבוע את הגדרות הפריסה הבסיסיות הבאות:
הגדרת ספריית הבסיס של האפליקציה (ברירת המחדל היא
/
)בדרך כלל זה המקום שבו נמצא קובץ ה-
package.json
.
הגדרת הענף של השידור החי
זו ההסתעפות במאגר GitHub שמתבצעת ממנה פריסה לכתובת ה-URL הפעילה. לרוב, זה הענף שאליו ממזגים ענפי תכונות או ענפי פיתוח.
אישור או דחייה של השקות אוטומטיות
ההשקה האוטומטית מופעלת כברירת מחדל. בסיום היצירה של ה-Backend, תוכלו לבחור אם לפרוס את האפליקציה ב-App Hosting באופן מיידי.
נותנים שם לשרת העורפי.
שלב 2: הצגת האפליקציה שנפרסה
כשיוצרים קצה עורפי, Firebase נותן לכם תת-דומיין ללא עלות שבו משתמשי הקצה יכולים לבקר באפליקציית האינטרנט שלכם. הפורמט שלו הוא backend-id--project-id.us-central1.hosted.app
.
כדי לראות את כתובת ה-URL של אפליקציית האינטרנט, בודקים במסוף Firebase או מריצים את פקודת ה-CLI הבאה:
firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}
שלב 3: הפעלת השקה על ידי שליחת שינוי
אחרי שיוצרים את ה-backend ומקבלים כתובת URL פעילה, אפשר להפעיל את ההשקה של גרסה חדשה של אפליקציית האינטרנט בכל פעם שמעלים שינויים לענף הפעיל של מאגר GitHub. כדי לבצע בדיקה של ההגדרה של App Hosting:
- ב-GitHub, דוחפים שינוי לענף הפעיל של אפליקציית האינטרנט.
- פותחים את הכרטיסייה App Hosting במסוף Firebase ולוחצים על View dashboard (הצגת לוח הבקרה) עבור העורף. ברשימת הטבלאות מוצג הקומיט הספציפי שמשויך להשקה שהופעלה על ידי השינוי.
השלבים הבאים
- רוצים להעמיק? כדאי לעבור על סדנת קוד של Firebase שמשלבת אפליקציה מתארחת עם אימות ב-Firebase ותכונות AI מבית Google: Next.js | Angular
- חיבור דומיין מותאם אישית.
- הגדרת ה-Backend – הגדרת משתני סביבה, אחסון פרמטרים סודיים ועוד.
- מעקב אחר השקות, שימוש באתר ויומנים.