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

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

כדי לקבל עזרה מ-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: יצירת עותק של מאגר ההדגמה

אם כבר יש לכם אפליקציית Next.js או Angular במאגר GitHub, אתם יכולים לדלג על השלב הזה ולעבור לשלב 2: יצירת בקצה עורפי של App Hosting. לא צריך ליצור עותק של המאגר apphosting-adapters או להתקין אותו כדי לפרוס את האפליקציה.

אם אין לכם אפליקציה קיימת ואתם רוצים לפרוס אפליקציה לדוגמה, היכנסו לכתובת https://github.com/firebase/apphosting-adapters ובחרו באפשרות Fork. בנוסף לכלי המתאם של ה-framework, המאגר הזה כולל את תבניות ההתחלה הרשמיות של Next.js ו-Angular בספרייה /starters.

שלב 2: יצירת קצה עורפי של App Hosting

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

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

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

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

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

  • בוחרים אזור ראשי (בדרך כלל האזור שהכי קרוב למשתמשים).

  • מתחברים ל-GitHub. בוחרים את המאגר שיצרתם על ידי פיצול המאגר apphosting-adapters, או בוחרים את מאגר האפליקציות הקיים.

  • מגדירים את תיקיית השורש של האפליקציה:

    • אם אתם פורסים אפליקציה משלכם, ציינו את תיקיית השורש של האפליקציה (ברירת המחדל היא /). בדרך כלל, בתיקייה הזו נמצא הקובץ package.json.

    • אם אתם משתמשים במאגר ההדגמה apphosting-adapters, הגדירו את תיקיית השורש של האפליקציה לאחד מהנתיבים הבאים:

    • /starters/nextjs/basic

    • /starters/angular/basic

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

השלבים הבאים