Lokal testen, Änderungen teilen und dann live bereitstellen

Vor der Bereitstellung auf Ihrer Live-Site sollten Sie Ihre Änderungen anzeigen und testen. Mit Firebase Hosting können Sie Änderungen lokal anzeigen und testen und mit emulierten Back-End-Projektressourcen interagieren. Wenn Ihre Teamkollegen Ihre Änderungen anzeigen und testen müssen, kann Hosting gemeinsam nutzbare, temporäre Vorschau-URLs für Ihre Site erstellen. Wir unterstützen auch eine GitHub Integration zu implementierende aus einer Pull - Anforderung.

Bevor Sie beginnen

Führen Sie die Schritte auf der genannten Hosting loszulegen Seite , insbesondere die folgenden Aufgaben:

  1. Installieren oder aktualisieren Sie die Firebase-CLI auf die neueste Version.
  2. Verbinden Sie das lokale Projektverzeichnis (das den Inhalt Ihrer App enthält) mit Ihrem Firebase-Projekt.

Sie können optional den Hosting-Inhalt und die Hosting-Konfiguration Ihrer App bereitstellen, dies ist jedoch keine Voraussetzung für die Schritte auf dieser Seite.

Schritt 1: Test vor Ort

Wenn Sie schnelle Iterationen durchführen oder Ihre App mit emulierten Back-End-Projektressourcen interagieren soll, können Sie Ihren Hosting-Inhalt testen und lokal konfigurieren. Beim lokalen Testen stellt Firebase Ihre Web-App unter einer lokal gehosteten URL bereit.

Hosting ist ein Teil der Firebase Local Emulator Suite , die Ihre Anwendung ermöglicht mit Ihrem emulierten Hosting Inhalt und Konfiguration, sowie ggf. Ihre emuliert Projektressourcen (Funktionen, Datenbanken und Regeln) zu interagieren.

  1. (Optional) Standardmäßig wird Ihre lokal gehostete App wird mit echten interagieren, nicht emuliert, Projektressourcen (Funktionen, Datenbank, Regeln, etc.). Sie können stattdessen verbinden Ihre Anwendung optional alle emulierten Projektressourcen zu verwenden , die Sie konfiguriert haben. Weitere Informationen: Echtzeit - Datenbank | Cloud Firestor | Cloud-Funktionen

  2. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:

    firebase emulators:start
  3. Öffnen Sie Ihren Web - App auf der lokalen URL von der CLI zurückgegeben ( in der Regel http://localhost:5000 ).

  4. Um die lokale URL mit Änderungen zu aktualisieren, aktualisieren Sie Ihren Browser.

Von anderen lokalen Geräten testen

Standardmäßig reagieren die Emulatoren nur auf Anfragen von localhost . Das bedeutet, dass Sie über den Webbrowser Ihres Computers auf Ihre gehosteten Inhalte zugreifen können, jedoch nicht über andere Geräte in Ihrem Netzwerk. Wenn Sie Test von anderen lokalen Geräten möchten, konfigurieren Sie Ihre firebase.json etwa so:

"emulators": {
    // ...

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

Schritt 2: Vorschau und Aktie

Wenn Sie möchten, dass andere Änderungen an Ihrer Web-App sehen, bevor sie live gehen, können Sie Vorschaukanäle verwenden.

Nach der Bereitstellung in einem Vorschaukanal stellt Firebase Ihre Web-App unter einer "Vorschau-URL" bereit, bei der es sich um eine gemeinsam nutzbare, temporäre URL handelt. Bei Verwendung einer Vorschau - URL, Ihren Web - App interagiert mit Ihrem realen Backend für alle Projektressourcen.

Beachten Sie, dass Vorschau-URLs zwar schwer zu erraten sind (da sie einen zufälligen Hash enthalten), aber öffentlich sind. Jeder, der die URL kennt, kann also darauf zugreifen.

  1. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:

    firebase hosting:channel:deploy CHANNEL_ID

    Ersetzen CHANNEL_ID mit einer Zeichenkette ohne Leerzeichen (beispielsweise feature_mission-2-mars ). Diese ID wird verwendet, um die Vorschau-URL zu erstellen, die dem Vorschaukanal zugeordnet ist.

  2. Öffnen Sie Ihre Web-App unter der von der CLI zurückgegebenen Vorschau-URL. Es wird in etwa so aussehen: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. Um Ihre Vorschau-URL mit Änderungen zu aktualisieren, führen Sie denselben Befehl erneut aus. Stellen Sie sicher , das gleiche zu spezifizieren CHANNEL_ID in dem Befehl.

Erfahren Sie mehr über Vorschau Kanäle verwalten , darunter , wie ein Kanals Ablauf einzustellen.

Firebase Hosting unterstützt eine GitHub-Aktion, die automatisch eine Vorschau-URL erstellt und aktualisiert, wenn Sie Änderungen an einer Pull-Anforderung festschreiben. Erfahren Sie, wie die Einrichtung und Verwendung dieses GitHub Aktion .

Schritt 3: Bereitstellen von Live

Wenn Sie bereit sind, Ihre Änderungen mit der Welt zu teilen, stellen Sie Ihre Hosting-Inhalte und Konfigurationen in Ihrem Live-Kanal bereit. Firebase bietet je nach Anwendungsfall verschiedene Optionen für diesen Schritt (siehe Optionen unten).

Option 1: Klonen Sie von einem Vorschaukanal in Ihren Live-Kanal

Diese Option bietet das Vertrauen , dass Sie Ihren Live - Kanal den genauen Inhalt und Konfiguration sind die Bereitstellung , dass Sie in einem Vorschaukanal getestet. Weitere Informationen zu Versionen klonen .

  1. Führen Sie in einem beliebigen Verzeichnis den folgenden Befehl aus:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Ersetzen Sie jeden Platzhalter durch Folgendes:

    • SOURCE_SITE_ID und TARGET_SITE_ID : Dies sind die IDs der Hosting - Sites , die die Kanäle enthalten.

      • Verwenden Sie für Ihre Standard-Hosting-Site Ihre Firebase-Projekt-ID.
      • Sie können Sites angeben, die sich im selben Firebase-Projekt oder sogar in verschiedenen Firebase-Projekten befinden.
    • SOURCE_CHANNEL_ID : Dies ist der Identifikator für den Kanal, der zur Zeit die Version dient Sie Ihren Live - Kanal bereitstellen möchten.

      • Für einen Live - Kanal verwendet live als Kanal - ID.
  2. Sehen Sie Ihre Änderungen (nächster Schritt).

Option 2: Bereitstellung von Ihrem lokalen Projektverzeichnis auf Ihrem Live-Kanal

Diese Option bietet Ihnen die Flexibilität, Konfigurationen speziell für den Live-Kanal anzupassen oder bereitzustellen, auch wenn Sie keinen Vorschau-Kanal verwendet haben.

  1. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:

    firebase deploy --only hosting
  2. Sehen Sie Ihre Änderungen (nächster Schritt).

Schritt 4: Zeigen Sie Ihre Änderungen auf Ihrer Live - Website

Beide oben genannten Optionen stellen Ihre Hosting-Inhalte und -Konfigurationen auf den folgenden Sites bereit:

  • Die von Firebase bereitgestellten Subdomains für Ihre Standard-Hosting-Site und alle zusätzlichen Hosting-Sites:
    SITE_ID .web.app (wie PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (wie PROJECT_ID .firebaseapp.com )

  • Irgendwelche benutzerdefinierte Domains , die Sie haben mit Ihrem Hosting - Website (s)

Um die Implementierung auf eine bestimmten Hosting - Website zu beschränken, geben Sie ein deploy Ziel im CLI - Befehl.

Andere Bereitstellungsaktivitäten und -informationen

Kommentar für die Bereitstellung hinzufügen

Sie können einer Bereitstellung optional einen Kommentar hinzufügen. Dieser Kommentar wird mit den anderen Deployment - Informationen auf dem Display Hosting Armaturenbrett in der Konsole Firebase. Beispielsweise:

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

Fügen Sie skriptgesteuerte Aufgaben vor und nach der Bereitstellung hinzu

Optional können Sie connect Shell - Skripten auf die firebase deploy Befehl predeploy oder postdeploy Aufgaben auszuführen. Beispielsweise könnte ein Postdeploy-Hook Administratoren über neue Bereitstellungen von Siteinhalten informieren. Beachten Sie die Firebase CLI - Dokumentation für weitere Details.

Zwischenspeichern bereitgestellter Inhalte

Wenn eine Anforderung für statische Inhalte gemacht wird, speichert Hosting Firebase automatisch den Inhalt auf dem CDN. Wenn Sie die Inhalte Ihrer Website erneut bereitstellen, löscht automatisch alle Firebase im Cache befindlichen statischen Inhalten über das CDN , so dass neue Anfragen Ihre neue Inhalte erhalten.

Beachten Sie, dass Sie das so konfigurieren , dass das Caching von dynamischen Inhalten .

Bereitstellung über HTTPS

Stellen Sie sicher, dass alle externen Ressourcen, die nicht auf Firebase Hosting gehostet werden, über SSL (HTTPS) geladen werden, einschließlich aller externen Skripts. Die meisten Browser erlauben es Benutzern nicht, "gemischte Inhalte" (SSL- und Nicht-SSL-Datenverkehr) zu laden.

Nächste Schritte