Skonfiguruj zachowanie hostingu

Dzięki Hostingowi Firebase możesz skonfigurować niestandardowe zachowanie hostingu dla żądań do Twojej witryny.

Co możesz skonfigurować dla Hostingu?

  • Określ, które pliki w lokalnym katalogu projektu chcesz wdrożyć w Hostingu Firebase. Naucz się jak.

  • Podaj dostosowaną stronę 404/Nie znaleziono. Naucz się jak.

  • Konfigurowanie redirects do stron, które zostały przeniesione lub usunięte. Naucz się jak.

  • Konfigurowanie rewrites dla któregokolwiek z tych celów:

    • Pokaż tę samą treść dla wielu adresów URL. Naucz się jak.

    • Udostępniaj funkcję lub uzyskuj dostęp do kontenera Cloud Run z hostingu URL. Dowiedz się, jak: funkcja lub pojemnik .

    • Utwórz niestandardową domenę Dynamic Link. Naucz się jak.

  • Dodaj headers aby przejść dodatkowe informacje dotyczące żądania lub odpowiedzi, takie jak sposób przeglądarek powinien obsługiwać stronę i jej zawartość (uwierzytelnianie, buforowanie, kodowania, itp). Naucz się jak.

  • Skonfiguruj przepisywanie internacjonalizacji (i18n), aby wyświetlać określone treści w oparciu o preferencje językowe i/lub kraj użytkownika. Naucz (inna strona).

Gdzie definiujesz konfigurację hostingu?

Zdefiniować konfigurację Hosting Firebase w firebase.json pliku. Firebase automatycznie tworzy swój firebase.json plik w katalogu głównym katalogu projektu podczas uruchamiania firebase init polecenie.

Można znaleźć pełną firebase.json przykład konfiguracji (obejmujących tylko Firebase hosting) na dole tej strony. Zauważ, że firebase.json plik może zawierać również konfiguracje dla innych usług Firebase .

Można sprawdzić wdrożony firebase.json treści za pomocą Hosting REST API .

Priorytet odpowiedzi Hostingu

Różne opcje konfiguracji Hostingu Firebase opisane na tej stronie mogą czasami się pokrywać. W przypadku konfliktu Hosting określa odpowiedź, stosując następującą kolejność priorytetów:

  1. Reserved nazw, które zaczynają się w /__/* segmentu ścieżki
  2. skonfigurowane przekierowania
  3. Treść statyczna w ścisłym dopasowaniu
  4. skonfigurowane przepisuje
  5. Zwyczaj 404 strona
  6. Domyślna strona 404

Jeśli używasz przepisuje i18n , dokładna meczu i 404 obsługa priorytet rozkaz są rozszerzone w zakresie, aby pomieścić swoją zawartość „i18n”.

Określ, które pliki do wdrożenia

Domyślną atrybutów - public i ignore - zawarte w domyślnym firebase.json pliku określić, które pliki w katalogu projektu powinien zostać wdrożony do projektu Firebase.

Domyślną hosting konfiguracyjnych w firebase.json plików wygląda następująco:

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

publiczny

wymagany
Te public określa atrybut, który katalog wdrożyć do Firebase Hosting. Domyślną wartością jest katalog o nazwie public , ale można określić ścieżkę dowolnego katalogu na tak długo, jak istnieje w katalogu projektu.

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
ignore Określa atrybut pliki do ignorowania na wdrożenia. To może trwać globs w ten sam sposób, że Git uchwyty .gitignore .

Poniżej znajdują się wartości domyślne plików do zignorowania:

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

Dostosuj stronę 404/Nie znaleziono

Opcjonalny
Można służyć zwyczaj 404 Not Found error gdy próbuje użytkownikowi dostęp do strony, która nie istnieje.

Utwórz nowy plik w projekcie w public katalogu , nazwij go 404.html , następnie dodać niestandardowe 404 Not Found zawartość do pliku.

Firebase Hosting wyświetli zawartość tego niestandardowego 404.html stronie, jeśli przeglądarka uruchamia 404 Not Found błąd na swojej domenie lub subdomenie.

Skonfiguruj przekierowania

Opcjonalny
Użyj przekierowania adresu URL, aby zapobiec przerwanym linkom po przeniesieniu strony lub skrócić adresy URL. Na przykład, można przekierować przeglądarkę z example.com/team do example.com/about.html .

Określ przekierowania URL tworząc redirects atrybut zawierający tablicę obiektów (nazywane „przekierowania zasady”). W każdej regule określ wzorzec adresu URL, który po dopasowaniu do ścieżki adresu URL żądania powoduje, że Hosting odpowiada przekierowaniem do określonego docelowego adresu URL.

Oto podstawowe struktury dla redirects atrybutu. Ten przykład przekierowania żądań do /foo poprzez nowy wniosek do /bar .

"hosting": {
  // ...

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

redirects atrybut zawiera szereg przepisów przekierowanie, gdzie każda reguła musi zawierać pola w tabeli poniżej.

Firebase Hosting porównuje source lub regex wartości wobec wszystkich ścieżek URL na początku każdego żądania (przed przeglądarka sprawdza, czy istnieje plik lub folder na tej ścieżce). Jeśli zostanie znaleziony, serwer pochodzenie Hosting Firebase wysyła odpowiedź HTTPS przekierowania informujący przeglądarkę, aby nowy wniosek w destination adresie URL.

Pole Opis
redirects
source (zalecane)
lub regex

Wzorzec adresu URL, który po dopasowaniu do początkowego adresu URL żądania powoduje, że Hosting stosuje przekierowanie

destination

Statyczny adres URL, pod którym przeglądarka powinna wysłać nowe żądanie

Ten adres URL może być ścieżką względną lub bezwzględną.

type

Kod odpowiedzi HTTPS

  • Użyj typ 301 dla „Przeniesiony na stałe”
  • Użyj typ 302 dla 'Found' (Temporary Redirect)

Przechwytuj segmenty adresów URL do przekierowań

Opcjonalny
Czasami może być konieczne do uchwycenia konkretnych segmentów z reguły przekierowania URL wzoru ( source lub regex wartość), a następnie ponownego wykorzystania tych segmentów w regule w destination ścieżki.

Konfiguruj przepisywanie

Opcjonalny
Użyj przepisania, aby wyświetlić tę samą treść dla wielu adresów URL. Przepisywanie jest szczególnie przydatne w przypadku dopasowywania wzorca, ponieważ można zaakceptować dowolny adres URL pasujący do wzorca i pozwolić kodowi po stronie klienta zdecydować, co wyświetlić.

Można również użyć przepisuje wspierać aplikacje używające HTML5 pushState do nawigacji. Podczas próby przeglądarka otworzyć ścieżkę URL, który pasuje do określonego source lub regex wzorzec adresów URL, przeglądarka zostanie podana zawartość pliku na destination adresie URL zamiast.

Określ adres URL przepisuje tworząc rewrites atrybut zawierający tablicę obiektów (nazywane „przepisujące zasady”). W każdej regule określ wzorzec adresu URL, który po dopasowaniu do ścieżki adresu URL żądania powoduje, że usługa Hosting odpowiada tak, jakby usługa otrzymała określony docelowy adres URL.

Oto podstawowe struktury dla rewrites atrybutu. Przykład ten służy index.html żądań do 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"
  } ]
}

rewrites atrybut zawiera szereg reguł przepisywania, gdzie każda reguła musi zawierać pola w tabeli poniżej.

Firebase Hosting stosuje regułę przepisywania tylko jeśli plik lub katalog nie istnieje w ścieżce URL, który pasuje do określonego source lub regex URL wzór. Gdy żądanie wyzwala regułę przepisywania powraca przeglądarka rzeczywista zawartość określonego destination pliku zamiast przekierowania HTTP.

Pole Opis
rewrites
source (zalecane)
lub regex

Wzorzec adresu URL, który po dopasowaniu do początkowego adresu URL żądania powoduje, że Hosting stosuje przepisanie apply

destination

Plik lokalny, który musi istnieć

Ten adres URL może być ścieżką względną lub bezwzględną.

Bezpośrednie żądania do funkcji

Można użyć rewrites służyć funkcję z Firebase Hosting URL. Poniższy przykład jest fragmentem obsługujących dynamicznej zawartości przy użyciu funkcji Chmura .

Na przykład, aby skierować wszystkie żądania ze strony /bigben na swojej stronie Hosting do wykonania bigben funkcję:

"hosting": {
  // ...

  // Directs all requests from the page `/bigben` to execute the `bigben` function
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben"
  } ]
}

Po dodaniu tej zasady przepisywania i wdrażania do Firebase (używając firebase deploy ), czynność jest osiągalny za pośrednictwem następujących adresów URL:

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

  • Wszelkie podłączone niestandardowych domen :
    CUSTOM_DOMAIN /bigben

Kiedy przekierowanie żądania do funkcji z hosting, obsługiwane są metody żądania HTTP GET , POST , HEAD , PUT , DELETE , PATCH oraz OPTIONS . Inne metody, takie jak REPORT lub PROFIND nie są obsługiwane.

Kieruj żądania do kontenera Cloud Run

Można użyć rewrites uzyskać dostęp do pojemnika Chmura uruchomić z Firebase Hosting URL. Poniższy przykład jest fragmentem służąc zawartości dynamicznej przy użyciu Chmura Uruchom .

Na przykład, aby skierować wszystkie żądania ze strony /helloworld na swojej stronie Hosting aby wywołać rozruch i działa z helloworld przykład pojemnika:

"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 zasady przepisywania i wdrażania do Firebase (używając firebase deploy ), twój pojemnik obraz jest osiągalny za pośrednictwem następujących adresów URL:

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

  • Wszelkie podłączone niestandardowych domen :
    CUSTOM_DOMAIN /helloworld

Kiedy przekierowanie żądania do pojemników Chmura biegać z Hosting, obsługiwane są metody żądania HTTP GET , POST , HEAD , PUT , DELETE , PATCH oraz OPTIONS . Inne metody, takie jak REPORT lub PROFIND nie są obsługiwane.

Obecnie możesz używać przepisywania Cloud Run z Hostingiem w następujących regionach:

  • asia-east1
  • asia-east2
  • asia-northeast1
  • asia-northeast2
  • asia-northeast3
  • asia-south1
  • asia-southeast1
  • asia-southeast2
  • australia-southeast1
  • europe-north1
  • europe-west1
  • europe-west2
  • europe-west3
  • europe-west4
  • europe-west6
  • northamerica-northeast1
  • southamerica-east1
  • us-central1
  • us-east1
  • us-east4
  • us-west1

Można użyć rewrites do tworzenia niestandardowych domeny dynamiczne linki. Odwiedź dokumentację dynamiczne linki Szczegółowe informacje na temat konfigurowania domenę niestandardową dynamiczne linki .

  • Użyj niestandardowej domeny tylko dla dynamiczne linki

    "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
      } ]
    }
    
  • Określ niestandardowe prefiksy ścieżki domeny, które mają być używane dla 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
      } ]
    }
    

Konfigurowanie dynamiczne linki w firebase.json pliku wymaga:

Pole Opis
appAssociation

Musi być ustawiony na AUTO

  • Jeśli nie to ten atrybut w konfiguracji domyślnej dla appAssociation jest AUTO .
  • Poprzez ustawienie tego atrybutu na AUTO , Hosting może dynamicznie generować assetlinks.json i apple-app-site-association plików, gdy są one wymagane.
rewrites
source

Ścieżka, której chcesz użyć dla Dynamic Links

W przeciwieństwie do reguł przepisywania ścieżek do adresów URL reguły przepisywania linków dynamicznych nie mogą zawierać wyrażeń regularnych.

dynamicLinks Musi być ustawiony na true

Skonfiguruj nagłówki

Opcjonalny
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.

Określ zwyczaj, nagłówki odpowiedzi plików specyficzne tworząc headers atrybut zawierający tablicę obiektów cel. W każdym obiekcie określ wzorzec adresu URL, który w przypadku dopasowania do ścieżki adresu URL żądania powoduje, że Hosting stosuje określone niestandardowe nagłówki odpowiedzi.

Oto podstawowe struktury dla headers atrybutu. Ten przykład stosuje nagłówek CORS 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": "*"
    } ]
  } ]
}

headers atrybut zawiera szereg definicji, gdzie każda definicja musi zawierać pola w tabeli poniżej.

Pole Opis
headers
source (zalecane)
lub regex

Wzorzec adresu URL, który po dopasowaniu do początkowego adresu URL żądania powoduje, że Hosting stosuje niestandardowy nagłówek

Aby utworzyć nagłówek pasujące przeciwko swojej stronie zwyczaj 404 , korzystania 404.html jako source lub regex wartości.

Tablica (pod) headers

Niestandardowe nagłówki stosowane przez Hosting do ścieżki żądania

Każdy sub-header musi zawierać key i value pary (patrz następny dwa rzędy).

key Nazwa nagłówka, na przykład Cache-Control
value Wartość dla nagłówka, na przykład max-age=7200

Możesz dowiedzieć się więcej na temat Cache-Control w dziale Hosting że opisuje obsługującego zawartość dynamiczną i hosting microservices. Możesz również dowiedzieć się więcej o Cors nagłówków.

Kontrola .html rozszerzenia

Opcjonalny
cleanUrls atrybut pozwala kontrolować, czy adresy URL powinien zawierać .html rozszerzenie.

Kiedy true , Hosting automatycznie upuszcza .html rozszerzenie z przesłanych adresów URL plików. Jeśli .html Rozszerzenie dodaje we wniosku, Hosting wykonuje 301 przekierowanie do tej samej ścieżce, ale eliminuje .html rozszerzenie.

Oto jak kontrolować publikację .html w adresach URL przez włączenie cleanUrls atrybut:

"hosting": {
  // ...

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

Kontroluj końcowe ukośniki

Opcjonalny
trailingSlash atrybut pozwala kontrolować, czy statyczne adresy zawartość powinna zawierać końcowe ukośniki.

  • Kiedy true , Hosting przekierowania adresów URL, aby dodać końcowy ukośnik.
  • Kiedy false , Hosting przekierowania adresów URL, aby usunąć końcowy ukośnik.
  • Kiedy nieokreślone, hosting używa tylko końcowe ukośniki dla plików indeksu katalogu (na przykład about/index.html ).

Oto jak kontrolować końcowe ukośniki dodając trailingSlash atrybut:

"hosting": {
  // ...

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

trailingSlash atrybut nie wpływa przepisuje do dynamicznej zawartości obsługiwanej przez funkcje lub w chmurze chmura Run.

Dopasowanie wzorca glob

Firebase opcje konfiguracyjne Hosting szerokie wykorzystanie w pasującym glob wzorzec notacji z extglob, podobnie jak uchwyty do Git gitignore zasady i Bower uchwyty ignore zasady. Ta strona wiki jest bardziej szczegółowe odniesienie, ale dodaje się objaśnienia przykładów stosowanych na tej stronie:

  • firebase.json - Tylko dopasowuje firebase.json plik w katalogu głównym public katalogu

  • ** - Dopasowuje dowolny plik lub folder w dowolnym podkatalogu

  • * - Tylko mecze plików i folderów w głównym katalogu public katalogu

  • **/.* - wszystkie pliki rozpoczynające się od . (zazwyczaj ukryte pliki, podobnie jak w .git folderu) w dowolnym podkatalogu

  • **/node_modules/** - Dopasowuje dowolny plik lub folder w dowolnym podkatalogu node_modules folderu, która sama może być w dowolnym podkatalogu w public katalogu

  • **/*.@(jpg|jpeg|gif|png) - Dopasowuje dowolny plik w dowolnym podkatalogu, który kończy się dokładnie jeden z poniższych parametrów: .jpg , .jpeg , .gif lub .png

Przykład pełnej konfiguracji hostingu

Poniżej znajduje się pełna firebase.json Przykładowa konfiguracja dla Firebase Hosting. Zauważ, że firebase.json plik może zawierać również konfiguracje dla 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",

  }
}