Web-App lokal testen, Änderungen mit anderen teilen und dann live bereitstellen

Bevor Sie die Bereitstellung auf Ihrer Live-Website vornehmen, sollten Sie Ihre Änderungen ansehen und testen. Firebase Hosting ermöglicht es Ihnen, Änderungen lokal anzusehen und zu testen und mit emulierten Backend-Projektressourcen zu interagieren. Wenn Ihre Teammitglieder Ihre Änderungen ansehen und testen sollen, kann Hosting freigabefähige, temporäre Vorschau-URLs für Ihre Website erstellen. Wir unterstützen sogar eine GitHub-Integration, um die Bereitstellung über eine Pull Anfrage vorzunehmen.

Hinweis

Führen Sie die Schritte auf der Hosting Seite Erste Schritte aus, insbesondere die folgenden Aufgaben:

  1. Installieren oder aktualisieren Sie die Firebase CLI auf die neueste Version.
  2. Verknüpfen Sie das lokale Projektverzeichnis (mit den Inhalten Ihrer App) mit Ihrem Firebase-Projekt.

Optional können Sie die Hosting Konfiguration und -Inhalte Ihrer App bereitstellen. Dies ist jedoch keine Voraussetzung für die Schritte auf dieser Seite.

Schritt 1:Lokal testen

Wenn Sie schnelle Iterationen vornehmen oder Ihre App mit emulierten Backend-Projektressourcen interagieren soll, können Sie die Hosting Konfiguration und Inhalte lokal testen. Beim lokalen Testen stellt Firebase Ihre Webanwendung über eine lokal gehostete URL bereit.

Hosting ist Teil der Firebase Local Emulator Suite, mit der Ihre App mit den emulierten Hosting-Inhalten und der emulierten Hosting-Konfiguration sowie optional mit den emulierten Projektressourcen (Funktionen, Datenbanken und Regeln) interagieren kann.

  1. (Optional) Standardmäßig interagiert Ihre lokal gehostete App mit echten, nicht emulierten, Projektressourcen (Funktionen, Datenbank, Regeln usw.). Sie können Ihre App optional stattdessen mit allen emulierten Projektressourcen verbinden, die Sie konfiguriert haben. Weitere Informationen: Realtime Database | Cloud Firestore | Cloud Functions

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

    firebase emulators:start

  3. Öffnen Sie Ihre Webanwendung unter der lokalen URL, die von der CLI zurückgegeben wurde (in der Regel http://localhost:5000).

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

Von anderen lokalen Geräten aus testen

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

"emulators": {
    // ...

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

Schritt 2:Vorschau und Freigabe

Wenn Sie möchten, dass andere sich Änderungen an Ihrer Webanwendung ansehen, bevor sie live gehen, können Sie Vorschaukanäle verwenden.

Nachdem Sie die Bereitstellung in einem Vorschaukanal vorgenommen haben, stellt Firebase Ihre Webanwendung über eine Vorschau-URL bereit. Das ist eine freigabefähige, temporäre URL. Wenn Sie eine Vorschau-URL verwenden, interagiert Ihre Webanwendung mit dem echten Backend für alle Projektressourcen (mit Ausnahme aller "angepinnten" Funktionen in Ihrer Konfiguration für das Umschreiben von URLs).

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

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

    firebase hosting:channel:deploy CHANNEL_ID

    Ersetzen Sie CHANNEL_ID durch einen String ohne Leerzeichen (z. B. feature_mission-2-mars). Diese ID wird verwendet, um die Vorschau-URL zu erstellen, die mit dem Vorschaukanal verknüpft ist.

  2. Öffnen Sie Ihre Webanwendung unter der Vorschau-URL, die von der CLI zurückgegeben wurde. Sie sieht in etwa so aus: something like this: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Führen Sie denselben Befehl noch einmal aus, um Ihre Vorschau-URL mit Änderungen zu aktualisieren. Geben Sie im Befehl dieselbe CHANNEL_ID an.

Informationen zum Verwalten von Vorschaukanälen, einschließlich des Festlegens des Ablaufs eines Kanals

Firebase Hosting unterstützt eine GitHub-Aktion, die automatisch eine Vorschau-URL erstellt und aktualisiert, wenn Sie Änderungen an einer Pull-Anfrage vornehmen. Informationen zum Einrichten und Verwenden dieser GitHub-Aktion .

Schritt 3:Live bereitstellen

Wenn Sie Ihre Änderungen für alle freigeben möchten, stellen Sie Ihre Hosting Konfiguration und -Inhalte in Ihrem Live-Kanal bereit. Firebase bietet für diesen Schritt je nach Anwendungsfall verschiedene Optionen (siehe unten).

Option 1: Von einem Vorschaukanal in Ihren Live-Kanal klonen

Mit dieser Option können Sie sicher sein, dass Sie genau die Konfiguration und Inhalte in Ihrem Live-Kanal bereitstellen, die Sie in einem Vorschaukanal getestet haben. Weitere Informationen über das Klonen von Versionen.

  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 die einzelnen Platzhalter durch Folgendes:

    • SOURCE_SITE_ID und TARGET_SITE_ID: Das sind die IDs der Hosting Websites, die die Kanäle enthalten.

      • Verwenden Sie für Ihre Standard-Hosting-Website Ihre Firebase-Projekt-ID.
      • Sie können Websites angeben, die sich im selben oder in verschiedenen Firebase-Projekten befinden.

    • SOURCE_CHANNEL_ID: Das ist die ID des Kanals, der derzeit die Version bereitstellt, die Sie in Ihrem Live-Kanal bereitstellen möchten.

      • Verwenden Sie für einen Live-Kanal live als Kanal-ID.

  2. Änderungen ansehen (nächster Schritt).

Option 2: Aus Ihrem lokalen Projektverzeichnis in Ihrem Live-Kanal bereitstellen

Mit dieser Option können Sie Konfigurationen speziell für den Live-Kanal anpassen oder die Bereitstellung auch dann vornehmen, wenn Sie keinen Vorschaukanal verwendet haben.

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

    firebase deploy --only hosting

  2. Änderungen ansehen (nächster Schritt).

Schritt 4:Änderungen auf Ihrer Live-Website ansehen

Bei beiden oben genannten Optionen werden Ihre Hosting Konfiguration und -Inhalte auf den folgenden Websites bereitgestellt:

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

  • Alle benutzerdefinierten Domains, die Sie mit Ihren Hosting Websites verknüpft haben

Wenn Sie die Bereitstellung auf eine bestimmte Hosting Website beschränken möchten, geben Sie in Ihrem CLI-Befehl ein Bereitstellungsziel an.

Weitere Bereitstellungsaktivitäten und Informationen

Kommentar für die Bereitstellung hinzufügen

Sie können optional einen Kommentar zu einer Bereitstellung hinzufügen. Dieser Kommentar wird zusammen mit den anderen Bereitstellungsinformationen im Hosting Dashboard in der Firebase Konsole angezeigt. Beispiel:

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

Skriptgesteuerte Aufgaben vor und nach der Bereitstellung hinzufügen

Sie können optional Shell-Skripts mit dem Befehl firebase deploy verknüpfen, um Aufgaben vor oder nach der Bereitstellung auszuführen. Mit einem Post-Deploy-Hook könnten beispielsweise Administratoren über neue Bereitstellungen von Websiteinhalten benachrichtigt werden. Weitere Informationen finden Sie in der Firebase CLI-Dokumentation.

Bereitgestellte Inhalte im Cache speichern

Wenn eine Anfrage für statische Inhalte gestellt wird, Firebase Hosting automatisch speichert die Inhalte im CDN im Cache. Wenn Sie die Inhalte Ihrer Website noch einmal bereitstellen, löscht Firebase automatisch alle im Cache gespeicherten statischen Inhalte im CDN, sodass bei neuen Anfragen Ihre neuen Inhalte bereitgestellt werden.

Sie können das Caching dynamischer Inhalte konfigurieren.

Bereitstellung über HTTPS

Achten Sie darauf, 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 Nutzern nicht, „gemischte Inhalte“ (SSL- und Nicht-SSL-Traffic) zu laden.

Dateien löschen

In Firebase Hosting können Sie ausgewählte Dateien von einer bereitgestellten Website löschen, indem Sie die Dateien lokal löschen und dann noch einmal bereitstellen.

Nächste Schritte