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

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

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

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

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

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

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

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

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

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

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

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

שימו לב: קשה לנחש כתובות 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. מהרמה הבסיסית (root) של ספריית הפרויקט המקומית, מריצים את הפקודה הבאה:

    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 אחרי פריסה כדי לשלוח הודעה לאדמינים על פריסות חדשות של תוכן באתר. פרטים נוספים מופיעים בFirebaseמאמרי העזרה בנושא CLI.

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

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

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

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

‫

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

מחיקת קבצים

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

השלבים הבאים