תחילת העבודה עם אירוח אפליקציות

אם יש לכם אפליקציית Next.js או Angular קיימת (גרסאות Next.js 13.5.x ומעלה או Angular 18.2.x ומעלה) במאגר GitHub, תהליך ההתחלה עם App Hosting הוא פשוט כמו יצירת קצה עורפי של App Hosting והפעלת השקה על ידי שליחת קוד לענף הפעיל. אם אין לכם אפליקציה, אתם יכולים להשתמש באחת מהאפליקציות לדוגמה שלנו כדי לבצע את השלבים שמתוארים במדריך הזה.

במדריך הזה נסביר איך להגדיר את App Hosting במסוף Firebase כדי לפרוס אוטומטית בכל פעם שמתבצעת התחייבות חדשה למאגר GitHub. בסוף התהליך הזה תהיה לכם אפליקציית דוגמה פעילה של Next.js או Angular שנפרסת מחדש בכל פעם שאתם מתחייבים לשינוי חדש בהסתעפות main של מאגר GitHub.

המדריך הזה מתמקד בתהליך המומלץ במסוף Firebase, אבל יש דרכים אחרות לפרוס, כולל שימוש ב-CLI של Firebase כדי לפרוס קוד מקומי בלי חיבור ל-GitHub.

שלב 1: יוצרים Fork למאגר ההדגמה

עוברים אל https://github.com/firebase/apphosting-adapters ובוחרים באפשרות Fork.

שלב 2: יצירת App Hosting backend

  1. במסוף Firebase, עוברים אל Hosting & Serverless >‏ App Hosting.

  2. לוחצים על שנתחיל?.

  3. אם מוצגת בקשה, שדרגו לתוכנית התמחור Blaze בתשלום לפי שימוש כדי להשתמש ב-App Hosting.

צילום מסך של הגדרת ה-backend של App Hosting.

פועלים לפי ההנחיות כדי לבצע את השלבים הבאים:

  • בוחרים אזור ראשי (בדרך כלל האזור שהכי קרוב למשתמשים).
  • מתחברים ל-GitHub. בוחרים את המאגר שיצרתם באמצעות יצירת Fork של המאגר firebase-framework-tools.
  • מגדירים את תיקיית השורש של האפליקציה לאחת מהאפשרויות הבאות:
  • מגדירים את הענף הפעיל כראשי.
  • הפעלת השקות אוטומטיות (ההגדרה הזו מופעלת כברירת מחדל).
  • נותנים שם לשרת העורפי.
  • בוחרים את סביבת זמן הריצה. כברירת מחדל, הגרסה המומלצת הכי חדשה של Node.js נבחרת מראש.
    • מגדירים עדכונים אוטומטיים של תמונת הבסיס (ABIU). התכונה ABIU מופעלת כברירת מחדל ומחילת תיקוני אבטחה באופן אוטומטי על הסביבה הבסיסית שלכם. כדי לבטל את ההסכמה לשימוש ב-ABIU, בוחרים באפשרות Not specified (לא צוין) עבור זמן הריצה.
  • יוצרים אפליקציית אינטרנט חדשה ב-Firebase.

לוחצים על סיום ופריסה.

שלב 3: צפייה באפליקציה שנפרסה

כשיוצרים קצה עורפי, Firebase נותן לכם תת-דומיין ללא עלות שבו משתמשי הקצה יכולים לבקר באפליקציית האינטרנט שלכם. הפורמט שלו הוא backend-id--project-id.us-central1.hosted.app.

בשורה Backend information בלוח הבקרה של הקצה העורפי, לוחצים על הקישור לקצה העורפי הפעיל כדי לראות את האתר החדש:

צילום מסך של שורת המידע על הקצה העורפי עם הקישור לאפליקציה הפעילה מודגש.

שלב 4: הפעלת השקת התכונה על ידי שליחת שינוי

אחרי שיוצרים את ה-Backend ומקבלים כתובת 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, עוקבים אחרי App Hosting בזמן שהשינוי החדש מופץ לסביבת הייצור. כשההשקה תסתיים, תוכלו לראות את השינוי בדף הבית של האפליקציה.

השלבים הבאים