Skonfiguruj zachowanie Hostingu

Firebase Hosting umożliwia skonfigurowanie niestandardowego działania hostingu do Twojej witryny.

Co możesz skonfigurować w usłudze Hosting?

• Określ, które pliki w lokalnym katalogu projektu chcesz wdrożyć Firebase Hosting Więcej informacji

• wyświetlać niestandardową stronę 404/Nie znaleziono; Więcej informacji

• Skonfiguruj redirects dla przeniesionych lub usuniętych stron. Więcej informacji

• Skonfiguruj usługę rewrites w dowolnym z tych celów:

  • Wyświetlaj tę samą treść pod wieloma adresami URL. Więcej informacji

  • Obsługuj funkcję lub uzyskaj dostęp do kontenera Cloud Run z poziomu Hosting Adres URL. Dowiedz się, jak funkcji lub container

  • Utwórz niestandardową domenę Dynamic Link. Więcej informacji

• Dodaj headers, aby przekazać dodatkowe informacje o żądaniu lub odpowiedź, np. jak przeglądarki powinny obsługiwać stronę i jej zawartość (uwierzytelnianie, pamięć podręczna, kodowanie itp.). Dowiedz się, jak to zrobić

• Skonfiguruj przekształcanie treści na potrzeby międzynarodowości (i18n), aby wyświetlać określone treści na podstawie preferowanego języka lub kraju użytkownika. Dowiedz się, jak to zrobić (inna strona).

Gdzie możesz zdefiniować konfigurację usługi Hosting?

Konfigurację Firebase Hosting określasz w firebase.json. Firebase automatycznie tworzy plik firebase.json w katalogu głównym projektu po uruchomieniu firebase init.

Na stronie przykład pełnej konfiguracji firebase.json (obejmujące tylko Firebase Hosting) na dole tej strony. Pamiętaj, że firebase.json plik może też zawierać konfiguracje innych usług Firebase.

Wdrożoną treść firebase.json możesz sprawdzić za pomocą Hosting API typu REST.

Priorytet Hosting odpowiedzi

Opcje konfiguracji usługi Firebase Hosting opisane na tej stronie mogą się czasami pokrywać. Jeśli wystąpi konflikt, Hosting określa odpowiedź zgodnie z tym priorytetem:

1. Zarezerwowane przestrzenie nazw, które zaczynają się od segmentu ścieżki /__/*
2. Skonfigurowane przekierowania
3. Treści statyczne z dopasowaniem ścisłym
4. Skonfigurowane przepisy
5. Strona Niestandardowa strona 404
6. Domyślna strona 404

Jeśli korzystasz z funkcji i18n rewrite, dokładny odpowiednik i kolejności priorytetu błędów 404, aby uwzględnić treści”.

Określ pliki do wdrożenia

Domyślne atrybuty public i ignore zawarte w domyślnym pliku firebase.json określają, które pliki w katalogu projektu powinny zostać wdrożone do projektu Firebase.

Domyślna konfiguracja hosting w pliku firebase.json wygląda tak:

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

publiczna

Wymagany
Atrybut public określa katalog, w którym nastąpi wdrożenie Firebase Hosting Wartość domyślna to katalog o nazwie public, ale może podać ścieżkę dowolnego katalogu, jeśli istnieje on w projekcie katalogu.

Poniżej znajduje się domyślna określona nazwa katalogu do wdrożenia:

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

  // ...
}

Możesz zmienić wartość domyślną na katalog, który chcesz wdrożyć:

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

  // ...
}

ignorować

Opcjonalny
Atrybut ignore określa pliki, które mają być ignorowane podczas wdrażania. Może ona obsługiwać globy w taki sam sposób, w jaki Git obsługuje .gitignore.

Oto domyślne wartości plików, które mają być ignorowane:

"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
  ]
}

Dostosowywanie strony 404/nie znaleziono

Opcjonalny
Możesz wyświetlać niestandardowy błąd 404 Not Found, gdy użytkownik próbuje uzyskać dostęp do strony które nie istnieją.

Utwórz nowy plik w katalogu public projektu i nadaj mu nazwę 404.html, a następnie dodaj niestandardową zawartość z 404 Not Found do tego pliku.

Firebase Hosting wyświetli zawartość tej niestandardowej strony 404.html, jeśli przeglądarka powoduje wystąpienie błędu 404 Not Found w Twojej domenie lub subdomenie.

Konfigurowanie przekierowań

Opcjonalnie
Użyj przekierowania adresu URL, aby zapobiec niedziałającym linkom w przypadku przeniesienia strony lub skrócenia adresów URL. Możesz na przykład przekierować przeglądarkę z example.com/team na example.com/about.html.

Określ przekierowania adresów URL, tworząc atrybut redirects, który zawiera tablicę obiektów (nazywanych „regułami przekierowań”). W każdej regule określ wzorzec adresu URL, który jeśli pasuje do ścieżki adresu URL żądania, powoduje, że Hosting odpowiada z przekierowaniem na określony docelowy adres URL.

Oto podstawowa struktura atrybutu redirects. W tym przykładzie żądania do /foo są przekierowywane przez wysłanie nowego żądania do /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
  } ]
}

Atrybut redirects zawiera tablicę reguł przekierowania, przy czym każda reguła musi zawierać pola z poniższej tabeli.

Firebase Hosting porównuje wartość source lub regex ze wszystkimi ścieżkami adresów URL na początku każdej prośby (zanim przeglądarka zweryfikuje, czy plik lub folder istnieje na tej ścieżce). Jeśli znajdziemy dopasowanie, Serwer pierwotny Firebase Hosting wysyła odpowiedź przekierowania HTTPS informującą aby wysłać nowe żądanie pod adresem URL destination.

Rejestrowanie segmentów adresów URL na potrzeby przekierowań

Opcjonalny
Czasami może być konieczne przechwycenie określonych segmentów adresu URL reguły przekierowania (wartość source lub regex), użyj tych segmentów ponownie ścieżki destination reguły.

"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
  } ]
}

Konfigurowanie przekierowań

Opcjonalny
Użyj przepisywania, aby wyświetlać tę samą treść pod różnymi adresami URL. Przeredagowane wersje szczególnie przydatną w przypadku dopasowywania do wzorca, ponieważ można zaakceptować dowolny adres URL, pasuje do wzorca i niech kod po stronie klienta decyduje, co ma się wyświetlać.

Możesz też używać przekierowań do obsługi aplikacji, które do nawigacji korzystają z pushState HTML5. Gdy przeglądarka próbuje otworzyć ścieżkę adresu URL pasującą do source lub regex, przeglądarka otrzyma parametr jest dostępna pod adresem URL destination.

Określ przepisywanie adresów URL, tworząc atrybut rewrites zawierający tablicę obiektów (nazywanych „regułami przepisywania”). W każdej regule określ wzorzec adresu URL, który jeśli pasuje do ścieżki adresu URL żądania, powoduje, że Hosting odpowiada, jak gdyby usługa otrzymała określony docelowy adres URL.

Oto podstawowa struktura atrybutu rewrites. Ten przykład udostępnia index.html w przypadku żądań plików lub katalogów, które nie istnieją.

"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"
} ]
}

Atrybut rewrites zawiera tablicę reguł przepisywania, gdzie każda reguła musi zawierać pola z poniższej tabeli.

Firebase Hosting stosuje regułę przepisywania tylko wtedy, gdy plik lub katalog nie istnieją w ścieżce adresu URL pasującej do określonego wzorca adresu URL source lub regex. Gdy żądanie aktywuje regułę przepisywania, przeglądarka zwraca rzeczywistą treść. określonego pliku destination zamiast przekierowania HTTP.

Bezpośrednie żądania do funkcji

Możesz użyć funkcji rewrites, aby wywołać funkcję z adresu URL Firebase Hosting. następujący przykład to fragment z wyświetlania treści dynamicznych za pomocą Cloud Functions.

Aby np. kierować wszystkie żądania ze strony /bigben na Hosting witryny do wykonania funkcji 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)
    }
  } ]
}

Po dodaniu tej reguły przepisywania i wdrożeniu jej w Firebase (przy użyciu firebase deploy), Twoja funkcja jest dostępna pod tymi adresami URL:

• Twoje subdomeny Firebase:
  PROJECT_ID.web.app/bigben i PROJECT_ID.firebaseapp.com/bigben

• Wszystkie połączone domeny niestandardowe:
  CUSTOM_DOMAIN/bigben

Podczas przekierowywania żądań do funkcji z użyciem Hosting obsługiwane żądanie HTTP to GET, POST, HEAD, PUT, DELETE, PATCH i OPTIONS. Inne metody, takie jak REPORT czy PROFIND, nie są obsługiwane.

Bezpośrednie żądania do kontenera Cloud Run

Za pomocą rewrites możesz uzyskać dostęp do kontenera Cloud Run z poziomu Firebase Hosting. Ten przykład to fragment kodu służącego do wyświetlania treści dynamicznych za pomocą funkcji Cloud Run.

Aby np. kierować wszystkie żądania ze strony /helloworld na Hosting witryna do uruchamiania i uruchamiania kontenera helloworld instancja:

"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)
   }
 } ]
}

Po dodaniu tej reguły przepisywania i wdrożeniu jej w Firebase (przy użyciu firebase deploy), obraz kontenera jest dostępny pod tymi adresami URL:

• Twoje subdomeny Firebase:
  PROJECT_ID.web.app/helloworld i PROJECT_ID.firebaseapp.com/helloworld

• Wszystkie połączone domeny niestandardowe:
  CUSTOM_DOMAIN/helloworld

Podczas przekierowywania żądań do Cloud Run kontenerów z parametrem Hosting: obsługiwane metody żądań HTTP to GET, POST, HEAD, PUT, DELETE, PATCH i OPTIONS. Inne metody, takie jak REPORT czy PROFIND, nie są dozwolone obsługiwane.

Aby uzyskać najlepszą wydajność, umieść usługę Cloud Run w usługach Hosting w tych regionach:

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

Przepisywanie na Cloud Run z: Hosting jest obsługiwane w te regiony:

• 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

Utwórz domenę niestandardową Dynamic Links

Aby utworzyć domenę niestandardową Dynamic Links, możesz użyć adresu rewrites. Odwiedź Dynamic Links dokumentacji ze szczegółowymi informacjami na temat skonfigurować domenę niestandardową dla: Dynamic Links.

• Użyj własnej domeny tylko w domenie Dynamic Links

  "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
    } ]
  }

• Podaj niestandardowe prefiksy ścieżek domeny, które mają być używane w przypadku Dynamic Links

  "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
    } ]
  }

Aby skonfigurować Dynamic Links w pliku firebase.json, musisz wykonać te czynności:

Skonfiguruj nagłówki

Opcjonalne
Nagłówki umożliwiają klientowi i serwerowi przekazywanie dodatkowych informacji wraz z żądaniem lub odpowiedzią. Niektóre zestawy nagłówków mogą wpływać na sposób, w jaki przeglądarka obsługuje stronę i jej zawartość, w tym kontrolę dostępu, uwierzytelnianie, buforowanie i kodowanie.

Aby określić niestandardowe nagłówki odpowiedzi zależnie od pliku, utwórz atrybut headers który zawiera tablicę obiektów nagłówka. W każdym obiekcie określ wzorzec adresu URL który po dopasowaniu do ścieżki adresu URL żądania powoduje, że Hosting stosuje tag określonych niestandardowych nagłówków odpowiedzi.

Oto podstawowa struktura atrybutu headers. W tym przykładzie nagłówek CORS jest stosowany do wszystkich plików czcionek.

"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"
    } ]
  } ]
}

Atrybut headers zawiera tablicę definicji, z których każda musi zawierać pola podane w tabeli poniżej.

Więcej informacji o Cache-Control znajdziesz w Sekcja Hosting opisująca wyświetlanie treści dynamicznych i hostingu do tworzenia mikroserwisów. Więcej informacji na temat Nagłówki CORS.

Zarządzaj rozszerzeniami .html

Opcjonalny
Atrybut cleanUrls pozwala określić, czy adresy URL powinien zawierać rozszerzenie .html.

Gdy true, Hosting automatycznie usuwa rozszerzenie .html z przesłanego adresów URL plików. Jeśli w żądaniu zostanie dodane rozszerzenie .html, parametr Hosting uzyskuje skuteczność 301 przekierowuje na tę samą ścieżkę, ale eliminuje rozszerzenie .html.

Jak określić, czy .html ma być uwzględniane w adresach URL, umieszczając w adresach URL parametr Atrybut cleanUrls:

"hosting": {
  // ...

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

Steruj ukośnikami na końcu

Opcjonalny
Atrybut trailingSlash pozwala określić, czy adresy URL treści statycznych mają zawierać ukośniki.

• Gdy true, Hosting przekierowuje adresy URL, aby dodać na końcu ukośnik.
• Gdy false, Hosting przekierowuje adresy URL tak, aby usunąć na końcu ukośnik.
• Jeśli nie określono inaczej, Hosting używa ukośników tylko do określenia indeksu katalogu (np. about/index.html).

Oto jak kontrolować ukośniki końcowe przez dodanie atrybutu trailingSlash:

"hosting": {
  // ...

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

Atrybut trailingSlash nie ma wpływu na przepisywanie treści dynamicznych obsługiwane przez: Cloud Functions lub Cloud Run.

Dopasowywanie wzorców glob

Opcje konfiguracji Firebase Hosting wykorzystują dopasowywanie wzorców glob z notacją z extglob, podobny do tego, jak obsługuje się Git gitignore reguły i Bower obsługuje reguły ignore. Ta strona wiki zawiera bardziej szczegółowe informacje, , ale ich przykłady podano na tej stronie:

• firebase.json – pasuje tylko do pliku firebase.json w katalogu głównym z katalogu public

• ** – pasuje do dowolnego pliku lub folderu w dowolnym podkatalogu.

• * – dopasowuje tylko pliki i foldery w katalogu głównym Katalog public

• **/.* – dopasowuje każdy plik rozpoczynający się od . (zwykle pliki ukryte, np. .git) w dowolnym podkatalogu,

• **/node_modules/** – dopasowuje dowolny plik lub folder w dowolnej lokalizacji folderu node_modules, który może się znajdować w dowolnym podkatalogu public

• **/*.@(jpg|jpeg|gif|png) – dopasowuje dowolny plik w przypadku dowolnego pliku z podkatalogiem, który kończy się dokładnie jednym z tych ciągów: .jpg, .jpeg, .gif lub .png

Przykład pełnej konfiguracji Hosting

Oto pełny przykład konfiguracji firebase.json dla Firebase Hosting Pamiętaj, że plik firebase.json może też zawierać konfiguracje innych usług 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",

  }
}