Google is committed to advancing racial equity for Black communities. See how.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Konfigurieren Sie das Hosting-Verhalten

Mit Firebase Hosting können Sie das angepasste Hosting-Verhalten für Anforderungen an Ihre Site konfigurieren.

Was können Sie für das Hosting konfigurieren?

  • Geben Sie an, welche Dateien in Ihrem lokalen Projektverzeichnis Sie für Firebase Hosting bereitstellen möchten. Lernen wie.

  • Stellen Sie eine angepasste 404 / Not Found-Seite bereit. Lernen wie.

  • Richten Sie redirects für Seiten ein, die Sie verschoben oder gelöscht haben. Lernen wie.

  • Richten Sie rewrites für einen der folgenden Zwecke ein:

    • Zeigen Sie denselben Inhalt für mehrere URLs an. Lernen wie.

    • Stellen Sie eine Funktion bereit oder greifen Sie über eine Hosting-URL auf einen Cloud Run-Container zu. Erfahren Sie, wie: Funktion oder Container .

    • Erstellen Sie eine benutzerdefinierte Domäne Dynamic Link. Lernen wie.

  • Fügen Sie headers , um zusätzliche Informationen zu einer Anfrage oder Antwort weiterzugeben, z. B. wie Browser mit der Seite und ihrem Inhalt umgehen sollen (Authentifizierung, Caching, Codierung usw.). Lernen wie.

  • Richten Sie das Umschreiben der Internationalisierung (i18n) ein, um bestimmte Inhalte basierend auf den Sprachpräferenzen und / oder dem Land eines Benutzers bereitzustellen. Erfahren Sie wie (andere Seite).

Wo definieren Sie Ihre Hosting-Konfiguration?

Sie definieren Ihre Firebase-Hosting-Konfiguration in Ihrer Datei firebase.json . Firebase erstellt automatisch Ihre Datei firebase.json im Stammverzeichnis Ihres Projektverzeichnisses, wenn Sie den Befehl firebase init ausführen.

Sie können einen finden volles firebase.json Konfigurationsbeispiel (für nur Firebase Hosting) am Ende der Seite. Beachten Sie, dass eine firebase.json Datei auch Konfigurationen für andere Firebase-Dienste enthalten kann .

Sie können den bereitgestellten Inhalt von firebase.json mithilfe der Hosting-REST-API überprüfen.

Prioritätsreihenfolge der Hosting-Antworten

Die verschiedenen auf dieser Seite beschriebenen Konfigurationsoptionen für Firebase Hosting können sich manchmal überschneiden. Wenn ein Konflikt vorliegt, bestimmt Hosting seine Antwort anhand der folgenden Prioritätsreihenfolge:

  1. Reservierte Namespaces, die mit einem /__/* beginnen
  2. Konfigurierte Weiterleitungen
  3. Genau passender statischer Inhalt
  4. Konfigurierte Umschreibungen
  5. Benutzerdefinierte 404- Seite
  6. Standard 404 Seite

Wenn Sie i18n-Umschreibungen verwenden , werden die Reihenfolge der exakten Übereinstimmung und der 404-Verarbeitungspriorität erweitert, um Ihren "i18n-Inhalten" Rechnung zu tragen.

Geben Sie an, welche Dateien bereitgestellt werden sollen

Die in der Standarddatei firebase.json enthaltenen Standardattribute " public und " ignore definieren, welche Dateien in Ihrem Projektverzeichnis für Ihr Firebase-Projekt bereitgestellt werden sollen.

Die Standard- hosting Konfiguration in einer firebase.json Datei sieht folgendermaßen aus:

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

Öffentlichkeit

Erforderlich
Das public Attribut gibt an, welches Verzeichnis für Firebase Hosting bereitgestellt werden soll. Der Standardwert ist ein Verzeichnis mit dem Namen public . Sie können jedoch den Pfad eines beliebigen Verzeichnisses angeben, sofern dieser in Ihrem Projektverzeichnis vorhanden ist.

Der Standardname des zu implementierenden Verzeichnisses lautet:

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

  // ...
}

Sie können den Standardwert in das Verzeichnis ändern, das Sie bereitstellen möchten:

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

  // ...
}

ignorieren

Optional
Das Attribut ignore gibt die Dateien an, die bei der Bereitstellung ignoriert werden sollen. Es kann Globs genauso dauern wie Git .gitignore .

Die folgenden Standardwerte müssen von den Dateien ignoriert werden:

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

Passen Sie eine 404 / Not Found-Seite an

Optional
Sie können einen benutzerdefinierten 404 Not Found Fehler 404 Not Found , wenn ein Benutzer versucht, auf eine nicht vorhandene Seite zuzugreifen.

Erstellen Sie eine neue Datei im public Verzeichnis Ihres Projekts, nennen Sie sie 404.html und fügen Sie der Datei Ihren benutzerdefinierten 404 Not Found Inhalt hinzu.

Firebase Hosting zeigt den Inhalt dieser benutzerdefinierten 404.html Seite an, wenn ein Browser einen 404 Not Found Fehler in Ihrer Domain oder Subdomain auslöst.

Konfigurieren Sie Weiterleitungen

Optional
Verwenden Sie eine URL-Umleitung, um fehlerhafte Links zu vermeiden, wenn Sie eine Seite verschoben haben, oder um URLs zu kürzen. Sie können beispielsweise einen Browser von example.com/team zu example.com/about.html umleiten.

Geben Sie URL-Weiterleitungen an, indem Sie ein redirects erstellen, das ein Array von Objekten enthält (sogenannte "Umleitungsregeln"). Geben Sie in jeder Regel ein URL-Muster an, das bei Übereinstimmung mit dem Anforderungs-URL-Pfad das Hosting dazu veranlasst, mit einer Umleitung auf die angegebene Ziel-URL zu antworten.

Hier ist die Grundstruktur für ein redirects . In diesem Beispiel werden Anforderungen an /foo umgeleitet, indem eine neue Anforderung an /bar /foo wird.

"hosting": {
  // ...

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

Das redirects Attribut enthält ein Array von Redirect-Regeln, wobei jede Regel die Felder in der folgenden Tabelle enthalten muss.

Firebase Hosting vergleicht den source oder regex Wert zu Beginn jeder Anforderung mit allen URL-Pfaden (bevor der Browser feststellt, ob eine Datei oder ein Ordner unter diesem Pfad vorhanden ist). Wenn eine Übereinstimmung gefunden wird, sendet der Firebase Hosting-Ursprungsserver eine HTTP-Umleitungsantwort, in der der Browser aufgefordert wird, eine neue Anforderung an die destination URL zu stellen.

Feld Beschreibung
redirects
source (empfohlen)
oder regex

Ein URL-Muster, das, wenn es mit der ursprünglichen Anforderungs-URL übereinstimmt, das Hosting dazu veranlasst, die Umleitung anzuwenden

destination

Eine statische URL, unter der der Browser eine neue Anfrage stellen soll

Diese URL kann ein relativer oder ein absoluter Pfad sein.

type

Der HTTP-Antwortcode

  • Verwenden Sie einen Typ von 301 für "Dauerhaft verschoben".
  • Verwenden Sie einen Typ von 302 für 'Gefunden' (Temporäre Umleitung).

Erfassen Sie URL-Segmente für Weiterleitungen

Optional
Manchmal könnten, müssen Sie Capture bestimmte Segmente einer URL - Muster der Redirect - Regel ( source oder regex - Wert), dann wieder verwenden , um diese Segmente in der Herrschaft destination

Konfigurieren Sie das Umschreiben

Optional
Verwenden Sie ein Umschreiben, um denselben Inhalt für mehrere URLs anzuzeigen. Umschreibungen sind besonders nützlich beim Mustervergleich, da Sie jede URL akzeptieren können, die dem Muster entspricht, und den clientseitigen Code entscheiden lassen können, was angezeigt werden soll.

Sie können auch Umschreibungen verwenden, um Apps zu unterstützen, die HTML5 pushState für die Navigation verwenden. Wenn ein Browser versucht, einen URL-Pfad zu öffnen, der dem angegebenen source oder regex URL-Muster entspricht, erhält der Browser stattdessen den Inhalt der Datei unter der destination URL.

Geben Sie URL-Umschreibungen an, indem Sie ein rewrites erstellen, das ein Array von Objekten enthält ("Umschreiberegeln" genannt). Geben Sie in jeder Regel ein URL-Muster an, das bei Übereinstimmung mit dem Anforderungs-URL-Pfad das Hosting dazu veranlasst, so zu antworten, als hätte der Dienst die angegebene Ziel-URL erhalten.

Hier ist die Grundstruktur für ein rewrites . In diesem Beispiel wird index.html für Anforderungen an Dateien oder Verzeichnisse index.html , die nicht vorhanden sind.

"hosting": {
  // ...

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

Das Attribut " rewrites enthält ein Array von Umschreiberegeln, wobei jede Regel die Felder in der folgenden Tabelle enthalten muss.

Firebase Hosting wendet nur dann eine Umschreiberegel an, wenn eine Datei oder ein Verzeichnis nicht in einem URL-Pfad vorhanden ist, der dem angegebenen source oder regex URL-Muster entspricht. Wenn eine Anforderung löst eine Rewrite - Regel, der Browser gibt den tatsächlichen Inhalt der angegebenen destination statt einer HTTP - Umleitung.

Feld Beschreibung
rewrites
source (empfohlen)
oder regex

Ein URL-Muster, das, wenn es mit der ursprünglichen Anforderungs-URL übereinstimmt, Hosting dazu veranlasst, das Umschreiben anzuwenden

destination

Eine lokale Datei, die vorhanden sein muss

Diese URL kann ein relativer oder ein absoluter Pfad sein.

Direkte Anfragen an eine Funktion

Sie können rewrites , um eine Funktion über eine Firebase-Hosting-URL bereitzustellen. Das folgende Beispiel ist ein Auszug aus der Bereitstellung dynamischer Inhalte mithilfe von Cloud-Funktionen .

So leiten Sie beispielsweise alle Anforderungen von der Seite /bigben auf Ihrer Hosting-Site zur Ausführung der bigben Funktion weiter:

"hosting": {
  // ...

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

Nachdem Sie diese Umschreiberegel hinzugefügt und in Firebase bereitgestellt haben (mithilfe von firebase deploy Deployment), ist Ihre Funktion über die folgenden URLs erreichbar:

  • Ihre Firebase-Subdomains:
    PROJECT_ID .web.app/bigben und PROJECT_ID .firebaseapp.com/bigben

  • Alle verbundenen benutzerdefinierten Domänen :
    CUSTOM_DOMAIN /bigben

Direkte Anforderungen an einen Cloud Run-Container

Sie können rewrites um über eine Firebase-Hosting-URL auf einen Cloud Run-Container zuzugreifen. Das folgende Beispiel ist ein Auszug aus der Bereitstellung dynamischer Inhalte mithilfe von Cloud Run .

So können Sie beispielsweise alle Anforderungen von der Seite /helloworld auf Ihrer Hosting-Site /helloworld , um den Start und die Ausführung einer helloworld Containerinstanz 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)
   }
 } ]
}

Nach dem Hinzufügen dieser Umschreiberegel und der Bereitstellung in Firebase (mithilfe der firebase deploy ) ist Ihr Container-Image über die folgenden URLs erreichbar:

  • Ihre Firebase-Subdomains:
    PROJECT_ID .web.app/helloworld und PROJECT_ID .firebaseapp.com/helloworld

  • Alle verbundenen benutzerdefinierten Domänen :
    CUSTOM_DOMAIN /helloworld

Sie können rewrites , um benutzerdefinierte dynamische Domänenlinks zu erstellen. Ausführliche Informationen zum Einrichten einer benutzerdefinierten Domäne für dynamische Links finden Sie in der Dokumentation zu dynamischen Links .

  • Verwenden Sie Ihre benutzerdefinierte Domain nur für dynamische 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
      } ]
    }
    
  • Geben Sie benutzerdefinierte Domänenpfadpräfixe an, die für dynamische Links verwendet werden sollen

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

Das Konfigurieren von dynamischen Links in Ihrer Datei firebase.json erfordert Folgendes:

Feld Beschreibung
appAssociation

Muss auf AUTO

  • Wenn Sie dieses Attribut nicht in Ihre Konfiguration aufnehmen, lautet der Standardwert für appAssociation AUTO .
  • Wenn Sie dieses Attribut auf AUTO , kann Hosting auf assetlinks.json dynamisch die assetlinks.json und " apple-app-site-association generieren.
rewrites
source

Ein Pfad, den Sie für dynamische Links verwenden möchten

Im Gegensatz zu Regeln, die Pfade zu URLs umschreiben, dürfen Umschreiberegeln für dynamische Links keine regulären Ausdrücke enthalten.

dynamicLinks Muss auf true

Konfigurieren Sie Header

Optional
Überschriften ermöglichen es dem Client und dem Server, zusätzliche Informationen zusammen mit einer Anfrage oder einer Antwort zu übergeben. Einige Headersätze können sich darauf auswirken, wie der Browser mit der Seite und ihrem Inhalt umgeht, einschließlich Zugriffskontrolle, Authentifizierung, Caching und Codierung.

Geben Sie benutzerdefinierte, dateispezifische Antwortheader an, indem Sie ein headers erstellen, das ein Array von Headerobjekten enthält. Geben Sie in jedem Objekt ein URL-Muster an, das bei Übereinstimmung mit dem Anforderungs-URL-Pfad das Hosting dazu veranlasst, die angegebenen benutzerdefinierten Antwortheader anzuwenden.

Hier ist die Grundstruktur für ein headers Attribut. In diesem Beispiel wird ein CORS-Header für alle Schriftdateien angewendet.

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

Das headers Attribut enthält ein Array von Definitionen, wobei jede Definition die Felder in der folgenden Tabelle enthalten muss.

Feld Beschreibung
headers
source (empfohlen)
oder regex

Ein URL-Muster, das, wenn es mit der ursprünglichen Anforderungs-URL übereinstimmt, Hosting dazu veranlasst, den benutzerdefinierten Header anzuwenden

Verwenden Sie 404.html als source oder regex Wert, um einen Header zu erstellen, der mit Ihrer benutzerdefinierten 404-Seite übereinstimmt.

Array von (Unter-) headers

Die benutzerdefinierten Header, die Hosting auf den Anforderungspfad anwendet

Jeder Unter Header muss einen umfassen key und value (siehe nächsten zwei Zeilen).

key Der Name des Headers, zum Beispiel Cache-Control
value Der Wert für den Header, zum Beispiel max-age=7200

Weitere Cache-Control zur Cache-Control im Abschnitt Hosting, in dem das Bereitstellen dynamischer Inhalte und das Hosting von Microservices beschrieben werden. Sie können auch mehr über CORS- Header erfahren.

Steuern Sie .html Erweiterungen

Optional
Mit cleanUrls Attribut cleanUrls können Sie steuern, ob URLs die Erweiterung .html .

Wenn true , löscht Hosting automatisch die Erweiterung .html aus den hochgeladenen Datei-URLs. Wenn der Anforderung eine .html Erweiterung hinzugefügt wird, führt Hosting eine 301 Umleitung auf denselben Pfad durch, entfernt jedoch die .html Erweiterung.

So steuern Sie die Aufnahme von .html in URLs durch cleanUrls eines cleanUrls Attributs:

"hosting": {
  // ...

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

Kontrollieren Sie nachgestellte Schrägstriche

Optional
Mit dem Attribut trailingSlash können Sie steuern, ob statische Inhalts-URLs nachgestellte Schrägstriche enthalten sollen.

  • Wenn true , leitet Hosting URLs um, um einen abschließenden Schrägstrich hinzuzufügen.
  • Wenn false , leitet Hosting URLs um, um einen abschließenden Schrägstrich zu entfernen.
  • Wenn nicht angegeben, verwendet Hosting nur abschließende Schrägstriche für Verzeichnisindexdateien (z. B. about/index.html ).

So steuern Sie nachgestellte Schrägstriche durch Hinzufügen eines Attributs " trailingSlash :

"hosting": {
  // ...

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

Das Attribut trailingSlash wirkt sich nicht auf das Umschreiben dynamischer Inhalte aus, die von Cloud-Funktionen oder Cloud Run bereitgestellt werden.

Glob Pattern Matching

In den Konfigurationsoptionen für Firebase-Hosting wird die Glob-Pattern-Matching- Notation mit extglob in großem Umfang verwendet, ähnlich wie Git mit gitignore Regeln gitignore und Bower- Regeln Regeln ignore . Diese Wiki-Seite ist eine detailliertere Referenz, aber im Folgenden werden die auf dieser Seite verwendeten Beispiele erläutert:

  • firebase.json - firebase.json nur der Datei firebase.json im Stammverzeichnis des public Verzeichnisses

  • ** - Entspricht einer Datei oder einem Ordner in einem beliebigen Unterverzeichnis

  • * - Stimmt nur mit Dateien und Ordnern im Stammverzeichnis des public Verzeichnisses überein

  • **/.* - Entspricht jeder Datei, die mit beginnt . (normalerweise versteckte Dateien, wie im Ordner .git ) in einem beliebigen Unterverzeichnis

  • **/node_modules/** - **/node_modules/** jeder Datei oder jedem Ordner in einem beliebigen Unterverzeichnis eines node_modules Ordners, der sich selbst in einem beliebigen Unterverzeichnis des public Verzeichnisses befinden kann

  • **/*.@(jpg|jpeg|gif|png) - Entspricht jeder Datei in einem beliebigen Unterverzeichnis, die mit genau einer der folgenden .jpeg endet: .jpg , .jpeg , .gif oder .png

Beispiel für eine vollständige Hosting-Konfiguration

Hier finden Sie ein vollständiges firebase.json Konfigurationsbeispiel für Firebase Hosting. Beachten Sie, dass eine firebase.json Datei auch Konfigurationen für andere Firebase-Dienste enthalten kann .

{
  "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",

  }
}