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

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

לפני שאתה מתחיל

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

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

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

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

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

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

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

  2. מהשורש של ספריית הפרויקט המקומית שלך, הפעל את הפקודה הבאה:

    firebase emulators:start

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

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

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

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

"emulators": {
    // ...

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

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

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

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

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

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

למד על ניהול ערוצי תצוגה מקדימה , כולל כיצד להגדיר תפוגה של ערוץ.

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

שלב 3: פרוס בשידור חי

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

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

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

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

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    החלף כל מציין מיקום בדברים הבאים:

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

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

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

      • לערוץ חי, השתמש live כמזהה הערוץ.

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

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

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

  1. מהשורש של ספריית הפרויקט המקומית שלך, הפעל את הפקודה הבאה:

    firebase deploy --only hosting

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

שלב 4: הצג את השינויים שלך באתר החי שלך

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

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

  • כל הדומיינים המותאמים אישית שחיברת לאתרי האירוח שלך

כדי להגביל את הפריסה לאתר אירוח ספציפי, ציין יעד פריסה בפקודת ה-CLI שלך.

פריסה אחרת של פעילויות ומידע

הוסף הערה עבור הפריסה

ניתן להוסיף הערה לפריסה באופן אופציונלי. הערה זו תוצג יחד עם מידע הפריסה האחר בלוח המחוונים של אירוח במסוף Firebase. לדוגמה:

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

הוסף משימות סקריפטים מראש ואחרי פריסה

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

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

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

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

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

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

הצעדים הבאים