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

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

כדי לקבל עזרה מ-AI, מעתיקים את ההנחיה שבהמשך לסוכן התכנות מבוסס ה-AI (כמו Antigravity, ‏Claude Code, ‏Codex ו-Cursor). אתם יכולים להתאים אישית את ההנחיה ולשפר את הסוכן. מידע מפורט על ההתקנה זמין במאמר סקילים אג'נטיים ב-Firebase. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

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

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

שלב 1: יצירת עותק של מאגר ההדגמה (fork)

נכנסים לכתובת https://github.com/firebase/apphosting-adapters ולוחצים על Fork.

שלב 2: יוצרים בק-אנד של App Hosting

  1. במסוף Firebase, נכנסים לקטע Hosting & Serverless (אירוח וללא שרת) > App Hosting.

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

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

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

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

  • בוחרים אזור ראשי (בדרך כלל האזור שהכי קרוב למשתמשים).
  • מתחברים ל-GitHub. בוחרים את המאגר שיצרתם על ידי פיצול המאגר apphosting-adapters.
  • מגדירים את תיקיית השורש של האפליקציה לאחת מהאפשרויות הבאות:
  • מגדירים את הענף הפעיל כ-main.
  • מפעילים השקות אוטומטיות (ההשקות האוטומטיות מופעלות כברירת מחדל).
  • נותנים שם לקצה העורפי.
  • בוחרים את סביבת זמן הריצה. כברירת מחדל, הגרסה המומלצת החדשה ביותר של Node.js נבחרת בשבילכם.
  • יוצרים אפליקציית אינטרנט חדשה ב-Firebase.

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

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

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

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

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

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

השלבים הבאים