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

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

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

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

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

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

.

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

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

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

  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. מריצים את הפקודה הבאה מהשורש של ספריית הפרויקט המקומית:

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

השלבים הבאים