בדיקה מקומית של אפליקציית האינטרנט, שיתוף שינויים עם אחרים ולאחר מכן פריסה בזמן אמת

לפני הפריסה באתר הפעיל, מומלץ להציג את השינויים ולבדוק אותם. Firebase Hosting מאפשר לכם להציג ולבדוק שינויים באופן מקומי ולנהל אינטראקציה עם משאבי פרויקטים של קצה עורפי שהועתקו. אם אתם רוצים שהחברים בצוות שלכם יוכלו לראות ולבדוק את השינויים, תוכלו ליצור ב-Hosting כתובות URL זמניות לתצוגה מקדימה של האתר שאפשר לשתף. אנחנו אפילו תומכים בשילוב של GitHub כדי לפרוס מתוך בקשת משיכה.

לפני שמתחילים

מבצעים את השלבים שמפורטים בHosting דף תחילת העבודה, ובמיוחד את המשימות הבאות:

  1. מתקינים או מעדכנים את ה-CLI של Firebase לגרסה האחרונה.
  2. מקשרים את ספריית הפרויקט המקומי (שמכילה את התוכן של האפליקציה) לפרויקט Firebase.

אפשר לפרוס את התוכן וההגדרות של Hosting של האפליקציה, אבל זה לא תנאי מוקדם לביצוע השלבים שמפורטים בדף הזה.

.

שלב 1: בדיקה מקומית

אם אתם מבצעים איטרציות מהירות או אם אתם רוצים שהאפליקציה תהיה באינטראקציה עם משאבי הפרויקט של הקצה העורפי, תוכלו לבדוק את התוכן וההגדרות של Hosting באופן מקומי. כשבודקים באופן מקומי, Firebase מציג את אפליקציית האינטרנט שלכם בכתובת URL שמתארח באופן מקומי.

Hosting הוא חלק מ-Firebase Local Emulator Suite, שמאפשר לאפליקציה שלכם לקיים אינטראקציה עם התוכן וההגדרות של Hosting המימים, וגם עם משאבי הפרויקט המימים (פונקציות, מסדי נתונים וכללים).

  1. (אופציונלי) כברירת מחדל, האפליקציה שמתארחת באופן מקומי תיצור אינטראקציה עם משאבי הפרויקט האמיתיים, ולא עם משאבי הפרויקט המעתיקים (פונקציות, מסדי נתונים, כללים וכו'). במקום זאת, אפשר לקשר את האפליקציה לשימוש במשאבי פרויקטים הדמיים שהגדרתם. מידע נוסף: Realtime Database | Cloud Firestore | Cloud Functions

  2. מריצים את הפקודה הבאה מהשורש של ספריית הפרויקט המקומית:

    firebase emulators:start

  3. פותחים את אפליקציית האינטרנט בכתובת ה-URL המקומית שהוחזרה על ידי ה-CLI (בדרך כלל http://localhost:5000).

  4. כדי לעדכן את השינויים בכתובת ה-URL המקומית, צריך לרענן את הדפדפן.

בדיקה ממכשירים מקומיים אחרים

כברירת מחדל, האמולטורים מגיבים רק לבקשות של localhost. כלומר, תוכלו לגשת לתוכן המתארח מהדפדפן האינטרנט של המחשב, אבל לא ממכשירים אחרים ברשת. אם רוצים לבדוק ממכשירים מקומיים אחרים, צריך להגדיר את firebase.json כך:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

שלב 2: תצוגה מקדימה ושיתוף

אם אתם רוצים שאנשים אחרים יראו את השינויים באפליקציית האינטרנט שלכם לפני שהיא תהיה זמינה לכולם, תוכלו להשתמש בערוצי תצוגה מקדימה.

אחרי שפורסים לערוץ תצוגה מקדימה, מערכת Firebase מציגה את אפליקציית האינטרנט ב-'preview URL', כתובת URL זמנית שניתנת לשיתוף. כשמשתמשים בכתובת URL של תצוגה מקדימה, אפליקציית האינטרנט יוצרת אינטראקציה עם הקצה העורפי האמיתי של כל משאבי הפרויקט (למעט פונקציות 'מוצמדות' בתצורת ה-rewrites).

חשוב לזכור שקשה לנחש את כתובות ה-URL של התצוגה המקדימה (כי הן מכילות גיבוב אקראי), אבל הן גלויות לכולם. כל מי שיודע את כתובת ה-URL יכול לגשת אליה.

  1. ברמה הבסיסית (root) של ספריית הפרויקט המקומית, מריצים את הפקודה הבאה:

    firebase hosting:channel:deploy CHANNEL_ID

    מחליפים את הערך CHANNEL_ID במחרוזת ללא רווחים (לדוגמה, feature_mission-2-mars). המזהה ישמש לבניית כתובת ה-URL של התצוגה המקדימה המשויכת לערוץ התצוגה המקדימה.

  2. פותחים את אפליקציית האינטרנט בכתובת ה-URL של התצוגה המקדימה שהוחזרה על ידי CLI. זה ייראה בערך כך: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. כדי לעדכן את כתובת ה-URL של התצוגה המקדימה עם השינויים, מריצים שוב את אותה הפקודה. חשוב לציין את אותו CHANNEL_ID בפקודה.

מידע נוסף על ניהול ערוצים בתצוגה מקדימה, כולל הנחיות להגדרת תפוגה של ערוצים.

Firebase Hosting תומך ב-GitHub Action שיוצר ומעדכן באופן אוטומטי כתובת URL לתצוגה מקדימה כשאתם מבצעים התחייבות לשינויים בבקשת משיכה. איך מגדירים את הפעולה הזו ב-GitHub ומשתמשים בה

שלב 3: פריסה בסביבת הייצור

כשתהיו מוכנים לשתף את השינויים עם כולם, תוכלו לפרוס את התוכן וההגדרות של Hosting בערוץ החי. ב-Firebase יש כמה אפשרויות שונות לשלב הזה, בהתאם לתרחיש לדוגמה שלכם (אפשרויות מפורטות בהמשך).

אפשרות 1: שכפול מערוץ תצוגה מקדימה לערוץ שלכם בשידור חי

האפשרות הזו מאפשרת לכם לדעת בוודאות שאתם פורסים בערוץ שלכם את התוכן וההגדרות המדויקים שבדקתם בערוץ התצוגה המקדימה. מידע נוסף על יצירת עותקים מקודמים

  1. מכל ספרייה, מריצים את הפקודה הבאה:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    מחליפים כל placeholder בקוד הבא:

    • SOURCE_SITE_ID ו-TARGET_SITE_ID: אלה המזהים של האתרים Hosting שמכילים את הערוצים.

      • באתר Hosting שמוגדר כברירת מחדל, צריך להשתמש במזהה הפרויקט ב-Firebase.
      • אפשר לציין אתרים שנמצאים באותו פרויקט Firebase או אפילו בפרויקטים שונים של Firebase.

    • SOURCE_CHANNEL_ID: זהו המזהה של הערוץ שמוצגת בו כרגע הגרסה שרוצים לפרוס בערוץ החי.

      • בערוץ בשידור חי, מזהה הערוץ הוא live.

  2. הצגת השינויים (השלב הבא).

אפשרות 2: פריסה מספריית הפרויקט המקומית לערוץ בשידור חי

האפשרות הזו מספקת גמישות להתאמה של הגדרות ספציפיות לערוץ החי, או לפריסה גם אם לא השתמשתם בערוץ תצוגה מקדימה.

  1. מריצים את הפקודה הבאה מהשורש של ספריית הפרויקט המקומית:

    firebase deploy --only hosting

  2. הצגת השינויים (השלב הבא).

שלב 4: הצגת השינויים באתר הפעיל

שתי האפשרויות שלמעלה פורסות את התוכן וההגדרות של Hosting באתרים הבאים:

  • תתי-הדומיינים שהוקצו על ידי Firebase לאתר Hosting שמוגדר כברירת מחדל ולאתרים נוספים של Hosting:
    SITE_ID.web.app (כמו PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (כמו PROJECT_ID.firebaseapp.com)

  • כל הדומיינים המותאמים אישית שקישרתם לאתרים של Hosting

כדי להגביל את הפריסה לאתר Hosting ספציפי, מציינים יעד פריסה בפקודת ה-CLI.

פעילויות פריסה ומידע נוסף

הוספת תגובה לפריסה

אפשר גם להוסיף תגובה לפריסה. התגובה הזו תוצג עם שאר פרטי הפריסה במרכז הבקרה Hosting במסוף Firebase. לדוגמה:

firebase deploy --only hosting -m "Deploying the best new feature ever."

הוספת משימות בסקריפט לטרום פריסה ולפריסה

אפשר גם לחבר סקריפטים של מעטפת לפקודה firebase deploy כדי לבצע משימות לפני הפריסה או אחרי הפריסה. לדוגמה, הוק (hook) לאחר פריסה יכול להודיע לאדמינים על פריסות של תוכן חדש באתר. פרטים נוספים זמינים במסמכי התיעוד של CLI של Firebase.

שמירת תוכן שנפרס במטמון

כשמתבצעת בקשה לתוכן סטטי, Firebase Hosting שומר את התוכן באופן אוטומטי במטמון ב-CDN. אם תפרסו מחדש את התוכן של האתר, מערכת Firebase תמחק באופן אוטומטי את כל התוכן הסטטי שנשמר במטמון ב-CDN, כדי שהבקשות החדשות יקבלו את התוכן החדש.

שימו לב שאפשר להגדיר את אחסון התוכן הדינמי במטמון.

הצגה באמצעות HTTPS

חשוב לוודא שכל המשאבים החיצוניים שלא מתארחים ב-Firebase Hosting נטענים באמצעות SSL (HTTPS),כולל סקריפטים חיצוניים. רוב הדפדפנים לא מאפשרים למשתמשים לטעון "תוכן מעורב" (תעבורת SSL ותנועה ללא SSL).

מחיקת קבצים

ב-Firebase Hosting, הדרך העיקרית למחוק קבצים נבחרים מאתר שנפרס היא למחוק את הקבצים באופן מקומי ואז לפרוס אותם מחדש.

השלבים הבאים