הגדר התנהגות אירוח

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

מה אתה יכול להגדיר עבור אירוח?

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

• הצג דף 404/לא נמצא מותאם אישית. ללמוד איך.

• הגדר redirects לדפים שהעברת או מחקת. ללמוד איך.

• הגדר rewrites לכל אחת מהמטרות הבאות:

  • הצג את אותו תוכן עבור מספר כתובות אתרים. ללמוד איך.

  • שרת פונקציה או גש למיכל Cloud Run מכתובת אתר אירוח. למד כיצד: פונקציה או מיכל .

  • צור קישור דינמי של דומיין מותאם אישית. ללמוד איך.

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

• הגדר שכתובים בינלאומיים (i18n) כדי להציג תוכן ספציפי על סמך העדפת השפה ו/או המדינה של המשתמש. למד כיצד (דף אחר).

איפה אתה מגדיר את תצורת האחסון שלך?

אתה מגדיר את תצורת Firebase Hosting שלך בקובץ firebase.json שלך. Firebase יוצר אוטומטית את קובץ firebase.json שלך בשורש ספריית הפרויקט שלך כאשר אתה מפעיל את פקודת firebase init .

תוכל למצוא דוגמה מלאה לתצורה firebase.json (המכסה רק את Firebase Hosting) בתחתית דף זה. שים לב שקובץ firebase.json יכול להכיל גם תצורות עבור שירותי Firebase אחרים .

אתה יכול לבדוק את תוכן firebase.json שנפרס באמצעות ה- Hosting REST API .

סדר עדיפות של תגובות אירוח

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

1. מרחבי שמות שמורים שמתחילים בקטע נתיב /__/*
2. הפניות מחדש מוגדרות
3. תוכן סטטי בהתאמה מדויקת
4. שכתובים מוגדרים
5. עמוד 404 מותאם אישית
6. עמוד 404 ברירת מחדל

אם אתה משתמש בשכתובים של i18n , סדר העדיפות של התאמה מדויקת ו-404 מורחבת בהיקף כדי להתאים ל"תוכן i18n" שלך.

ציין אילו קבצים לפרוס

תכונות ברירת המחדל - public ignore - הכלולים בקובץ ברירת המחדל firebase.json מגדירים אילו קבצים בספריית הפרויקט שלך יש לפרוס לפרויקט Firebase שלך.

תצורת ברירת המחדל hosting בקובץ firebase.json נראית כך:

"hosting": {
  "public": "public",  // the only required attribute for Hosting
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

פּוּמְבֵּי

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

להלן שם ברירת המחדל שצוין של הספרייה לפריסה:

"hosting": {
  "public": "public"

  // ...
}

אתה יכול לשנות את ערך ברירת המחדל לספרייה שברצונך לפרוס:

"hosting": {
  "public": "dist/app"

  // ...
}

להתעלם

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

להלן ערכי ברירת המחדל עבור הקבצים להתעלם מהם:

"hosting": {
  // ...

  "ignore": [
    "firebase.json",  // the Firebase configuration file (the file described on this page)
    "**/.*",  // files with a leading period should be hidden from the system
    "**/node_modules/**"  // contains dependencies used to create your site but not run it
  ]
}

התאם אישית דף 404/לא נמצא

אופציונאלי
אתה יכול להציג שגיאה מותאמת אישית 404 Not Found כאשר משתמש מנסה לגשת לדף שאינו קיים.

צור קובץ חדש בספרייה public של הפרויקט שלך, שם לו 404.html , ולאחר מכן הוסף את תוכן 404 Not Found המותאם אישית שלך לקובץ.

Firebase Hosting יציג את התוכן של דף 404.html מותאם אישית זה אם דפדפן מפעיל שגיאת 404 Not Found בדומיין או בתת-הדומיין שלך.

הגדר הפניות מחדש

אופציונאלי
השתמש בהפניה מחדש של כתובת אתר כדי למנוע קישורים שבורים אם העברת דף או כדי לקצר כתובות אתרים. לדוגמה, תוכל להפנות דפדפן מ- example.com/team אל example.com/about.html .

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

להלן המבנה הבסיסי של תכונת redirects . דוגמה זו מפנה מחדש בקשות אל /foo על ידי ביצוע בקשה חדשה אל /bar .

"hosting": {
  // ...

  // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
  "redirects": [ {
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  } ]
}

"hosting": {
  // ...

  // Add the "redirects" attribute within "hosting"
  "redirects": [ {
    // Returns a permanent redirect to "/bar" for requests to "/foo" (but not "/foo/**")
    "source": "/foo",
    "destination": "/bar",
    "type": 301
  }, {
    // Returns a permanent redirect to "/bar" for requests to both "/foo" and "/foo/**"
    "source": "/foo{,/**}"
    "destination": "/bar"
    "type": 301
  }, {
    // Returns a temporary redirect for all requests to files or directories in the "firebase" directory
    "source": "/firebase/**",
    "destination": "https://firebase.google.com/",
    "type": 302
  }, {
    // A regular expression-based redirect equivalent to the above behavior
    "regex": "/firebase/.*",
    "destination": "https://firebase.google.com/",
    "type": 302
  } ]
}

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

Firebase Hosting משווה את ערך source או regex מול כל נתיבי ה-URL בתחילת כל בקשה (לפני שהדפדפן קובע אם קיימים קובץ או תיקיה בנתיב זה). אם נמצאה התאמה, שרת המקור של Firebase Hosting שולח תגובת HTTPS להפניה מחדש ואומרת לדפדפן לבצע בקשה חדשה בכתובת אתר destination .

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

אופציונאלי
לפעמים, ייתכן שיהיה עליך ללכוד פלחים ספציפיים של דפוס כתובת האתר של כלל הפניה מחדש ( source או ערך regex ), ולאחר מכן להשתמש מחדש בפלחים אלה בנתיב destination של הכלל.

"hosting": {
  // ...

  "redirects": [ {
    "source": "/blog/:post*",  // captures the entire URL segment beginning at "post"
    "destination": "https://blog.myapp.com/:post", // includes the entire URL segment identified and captured by the "source" value
    "type": 301
  }, {
    "source": "/users/:id/profile",  // captures only the URL segment "id", but nothing following
    "destination": "/users/:id/newProfile",  // includes the URL segment identified and captured by the "source" value
    "type": 301
  } ]
}

"hosting": {
  // ...

  "redirects": [ {
    "regex": "/blog/(?P<post>.+)",  // if you're familiar with PCRE, be aware that RE2 requires named capture groups to begin with ?P
    "destination": "https://blog.myapp.com/:post",  // includes the entire URL segment identified and captured by the `regex` value
    "type": 301
  }, {
    "regex": "/users/(\d+)/profile",  // uses the \d directive to only match numerical path segments
    "destination": "/users/:1/newProfile",  // the first capture group to be seen in the `regex` value is named 1, and so on
    "type": 301
  } ]
}

הגדר שכתובים מחדש

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

אתה יכול גם להשתמש בשכתובים כדי לתמוך באפליקציות המשתמשות ב- HTML5 pushState לניווט. כאשר דפדפן מנסה לפתוח נתיב כתובת אתר שתואם את source שצוין או דפוס כתובת ה-URL regex , הדפדפן יקבל במקום זאת את תוכן הקובץ בכתובת אתר destination .

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

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

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

"hosting": {
// ...

// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
  // Serves index.html for requests to files or directories that do not exist
  "source": "**",
  "destination": "/index.html"
}, {
  // Serves index.html for requests to both "/foo" and "/foo/**"
  // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
  "source": "/foo{,/**}",
  "destination": "/index.html"
}, {
  // A regular expression-based rewrite equivalent to the above behavior
  "regex": "/foo(/.*)?",
  "destination": "/index.html"
}, {
  // Excludes specified pathways from rewrites
  "source": "!/@(js|css)/**",
  "destination": "/index.html"
} ]
}

התכונה rewrites מכילה מערך של כללי שכתוב, כאשר כל כלל חייב לכלול את השדות בטבלה למטה.

Firebase Hosting מחיל כלל שכתוב רק אם קובץ או ספרייה אינם קיימים בנתיב כתובת אתר שתואם את source או regex כתובת ה-URL שצוין. כאשר בקשה מפעילה כלל שכתוב, הדפדפן מחזיר את התוכן בפועל של קובץ destination שצוין במקום הפניית HTTP.

הפנה בקשות לפונקציה

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

לדוגמה, כדי להפנות את כל הבקשות מהדף /bigben באתר האירוח שלך לביצוע הפונקציה bigben :

"hosting": {
  // ...

  // Directs all requests from the page `/bigben` to execute the `bigben` function
  "rewrites": [ {
    "source": "/bigben",
    "function": {
      "functionId": "bigben",
      "region": "us-central1"  // optional (see note below)
      "pinTag": true           // optional (see note below)
    }
  } ]
}

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

• תת-הדומיינים שלך ב-Firebase:
  PROJECT_ID .web.app/bigben ו- PROJECT_ID .firebaseapp.com/bigben

• כל דומיינים מותאמים אישית מחוברים:
  CUSTOM_DOMAIN /bigben

בעת הפניית בקשות לפונקציות עם אירוח, שיטות בקשת HTTP נתמכות הן GET , POST , HEAD , PUT , DELETE , PATCH ו- OPTIONS . שיטות אחרות כמו REPORT או PROFIND אינן נתמכות.

פניות ישירות לקונטיינר של Cloud Run

אתה יכול להשתמש rewrites כדי לגשת למיכל Cloud Run מכתובת אתר לאירוח של Firebase. הדוגמה הבאה היא קטע מהגשת תוכן דינמי באמצעות Cloud Run .

לדוגמה, כדי להפנות את כל הבקשות מהדף /helloworld באתר האירוח שלך כדי להפעיל את ההפעלה וההפעלה של מופע מכיל helloworld :

"hosting": {
 // ...

 // Directs all requests from the page `/helloworld` to trigger and run a `helloworld` container
 "rewrites": [ {
   "source": "/helloworld",
   "run": {
     "serviceId": "helloworld",  // "service name" (from when you deployed the container image)
     "region": "us-central1"  // optional (if omitted, default is us-central1)
   }
 } ]
}

לאחר הוספת כלל השכתוב הזה ופריסה ל-Firebase (באמצעות firebase deploy ), ניתן להגיע לתמונת המכולה שלך דרך כתובות האתרים הבאות:

• תת-הדומיינים שלך ב-Firebase:
  PROJECT_ID .web.app/helloworld ו- PROJECT_ID .firebaseapp.com/helloworld

• כל דומיינים מותאמים אישית מחוברים:
  CUSTOM_DOMAIN /helloworld

בעת הפניית בקשות למכולות Cloud Run עם אירוח, שיטות בקשת HTTP נתמכות הן GET , POST , HEAD , PUT , DELETE , PATCH ו- OPTIONS . שיטות אחרות כמו REPORT או PROFIND אינן נתמכות.

לקבלת הביצועים הטובים ביותר, אתר את שירות Cloud Run שלך יחד עם אירוח באמצעות האזורים הבאים:

• us-west1
• us-central1
• us-east1
• europe-west1
• asia-east1

שכתובים ל-Cloud Run מארח נתמכים באזורים הבאים:

• asia-east1
• asia-east2
• asia-northeast1
• asia-northeast2
• asia-northeast3
• asia-south1
• asia-south2
• asia-southeast1
• asia-southeast2
• australia-southeast1
• australia-southeast2
• europe-central2
• europe-north1
• europe-southwest1
• europe-west1
• europe-west12
• europe-west2
• europe-west3
• europe-west4
• europe-west6
• europe-west8
• europe-west9
• me-central1
• me-west1
• northamerica-northeast1
• northamerica-northeast2
• southamerica-east1
• southamerica-west1
• us-central1
• us-east1
• us-east4
• us-east5
• us-south1
• us-west1
• us-west2
• us-west3
• us-west4
• us-west1
• us-central1
• us-east1
• europe-west1
• asia-east1

צור קישורים דינמיים לתחום מותאם אישית

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

• השתמש בדומיין המותאם אישית שלך רק עבור קישורים דינמיים

  "hosting": {
    // ...
  
    "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
  
    // Add the "rewrites" attribute within "hosting"
    "rewrites": [ {
      "source": "/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/"
      "dynamicLinks": true
    } ]
  }
  

• ציין קידומות נתיב תחום מותאמות אישית לשימוש עבור קישורים דינמיים

  "hosting": {
    // ...
  
    "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)
  
    // Add the "rewrites" attribute within "hosting"
    "rewrites": [ {
      "source": "/promos/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/promos/"
      "dynamicLinks": true
    }, {
      "source": "/links/share/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/links/share/"
      "dynamicLinks": true
    } ]
  }
  

הגדרת קישורים דינמיים בקובץ firebase.json שלך דורשת את הדברים הבאים:

הגדר כותרות

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

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

להלן המבנה הבסיסי של תכונת headers . דוגמה זו מחילה כותרת CORS עבור כל קובצי הגופן.

"hosting": {
  // ...

  // Applies a CORS header for all font files
  "headers": [ {
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "Access-Control-Allow-Origin",
      "value": "*"
    } ]
  } ]
}

"hosting": {
  // ...

  // Add the "headers" attribute within "hosting"
  "headers": [ {
    // Applies a CORS header for all font files
    "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
    "headers": [ {
      "key": "Access-Control-Allow-Origin",
      "value": "*"
    } ]
  }, {
    // Overrides the default 1 hour browser cache with a 2 hour cache for all image files
    "source": "**/*.@(jpg|jpeg|gif|png)",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=7200"
    } ]
  }, {
    // A regular expression-based rewrite equivalent to the above behavior
    "regex": ".+/\w+\.(jpg|jpeg|gif|png)$",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=7200"
    } ]
  }, {
    // Sets the cache header for 404 pages to cache for 5 minutes
    "source": "404.html",
    "headers": [ {
      "key": "Cache-Control",
      "value": "max-age=300"
    } ]
  } ]
}

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

תוכל ללמוד עוד על Cache-Control בסעיף אירוח המתאר הגשת תוכן דינמי ואירוח מיקרו-שירותים. אתה יכול גם ללמוד עוד על כותרות CORS .

שליטה בהרחבות .html

אופציונאלי
התכונה cleanUrls מאפשרת לך לקבוע אם כתובות אתרים צריכות לכלול את סיומת .html .

כאשר true , Hosting מסיר אוטומטית את סיומת .html מכתובות האתרים של קבצים שהועלו. אם תוסף סיומת .html לבקשה, Hosting מבצע הפניה 301 לאותו נתיב אך מבטל את סיומת .html .

הנה איך לשלוט בהכללה של .html בכתובות אתרים על ידי הכללת מאפיין cleanUrls :

"hosting": {
  // ...

  // Drops `.html` from uploaded URLs
  "cleanUrls": true
}

שליטה באלכסונים נגררים

אופציונאלי
התכונה trailingSlash מאפשרת לך לשלוט אם כתובות אתרים של תוכן סטטי צריכות לכלול קו נטוי.

• כאשר true , אירוח מפנה מחדש כתובות אתרים כדי להוסיף לוכסן נגרר.
• כאשר false , אירוח מפנה מחדש כתובות אתרים כדי להסיר קו נטוי.
• כאשר לא צוין, אירוח משתמש רק באלכסונים נגררים עבור קבצי אינדקס של ספריות (לדוגמה, about/index.html ).

להלן כיצד לשלוט על קו נטוי נגרר על ידי הוספת תכונת trailingSlash :

"hosting": {
  // ...

  // Removes trailing slashes from URLs
  "trailingSlash": false
}

התכונה trailingSlash אינה משפיעה על שכתובים לתוכן דינמי המוגש על ידי Cloud Functions או Cloud Run.

התאמת דפוס גלוב

אפשרויות התצורה של Firebase Hosting עושות שימוש נרחב בסימון התאמת דפוסי גלוב עם extglob, בדומה לאופן שבו Git מטפל בכללי gitignore ו- Bower מטפל בכללי ignore . דף ויקי זה הוא הפניה מפורטת יותר, אך להלן הסברים על דוגמאות המשמשות בדף זה:

• firebase.json - תואם רק לקובץ firebase.json בשורש הספרייה public

• ** - מתאים לכל קובץ או תיקיה בספריית משנה שרירותית

• * — תואם רק קבצים ותיקיות בשורש הספרייה public

• **/.* — מתאים לכל קובץ שמתחיל ב- . (בדרך כלל קבצים מוסתרים, כמו בתיקיית .git ) בספריית משנה שרירותית

• **/node_modules/** - מתאים לכל קובץ או תיקיה בספריית משנה שרירותית של תיקיית node_modules , שיכולה להיות בעצמה בספריית משנה שרירותית של הספרייה public

• **/*.@(jpg|jpeg|gif|png) — מתאים לכל קובץ בספריית משנה שרירותית שמסתיימת בדיוק באחד מהבאים: .jpg , .jpeg , .gif או .png

דוגמה לתצורת אירוח מלאה

להלן דוגמה מלאה לתצורה firebase.json עבור Firebase Hosting. שים לב שקובץ firebase.json יכול להכיל גם תצורות עבור שירותי Firebase אחרים .

{
  "hosting": {

    "public": "dist/app",  // "public" is the only required attribute for Hosting

    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],

    "redirects": [ {
      "source": "/foo",
      "destination": "/bar",
      "type": 301
    }, {
      "source": "/firebase/**",
      "destination": "https://www.firebase.com",
      "type": 302
    } ],

    "rewrites": [ {
      // Shows the same content for multiple URLs
      "source": "/app/**",
      "destination": "/app/index.html"
    }, {
      // Configures a custom domain for Dynamic Links
      "source": "/promos/**",
      "dynamicLinks": true
    }, {
      // Directs a request to Cloud Functions
      "source": "/bigben",
      "function": "bigben"
    }, {
      // Directs a request to a Cloud Run containerized app
      "source": "/helloworld",
      "run": {
        "serviceId": "helloworld",
        "region": "us-central1"
      }
    } ],

    "headers": [ {
      "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers": [ {
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      } ]
    }, {
      "source": "**/*.@(jpg|jpeg|gif|png)",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=7200"
      } ]
    }, {
      "source": "404.html",
      "headers": [ {
        "key": "Cache-Control",
        "value": "max-age=300"
      } ]
    } ],

    "cleanUrls": true,

    "trailingSlash": false,

    // Required to configure custom domains for Dynamic Links
    "appAssociation": "AUTO",

  }
}