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

Bevor Sie die Änderungen auf Ihrer Livewebsite bereitstellen, sollten Sie sie sich ansehen und testen. Mit Firebase Hosting können Sie Änderungen lokal ansehen und testen und mit emulierten Backend-Projektressourcen interagieren. Wenn Ihre Teammitglieder Ihre Änderungen ansehen und testen sollen, kann Hosting freigegebene, temporäre Vorschau-URLs für Ihre Website erstellen. Wir unterstützen sogar eine GitHub-Integration, um die Bereitstellung über eine Pull-Anfrage zu ermöglichen.

Hinweis

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

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

Sie können optional die Hosting-Inhalte und ‑Konfiguration 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 Ihre Hosting-Inhalte und -Konfiguration lokal testen. Bei lokalen Tests stellt Firebase Ihre Web-App über eine lokal gehostete URL bereit.

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

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

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

    firebase emulators:start

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

  4. Wenn Sie die lokale URL mit Änderungen aktualisieren möchten, 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, nicht aber über andere Geräte in Ihrem Netzwerk. Wenn Sie Tests von anderen lokalen Geräten aus durchführen möchten, konfigurieren Sie firebase.json so:

"emulators": {
    // ...

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

Schritt 2:Vorschau ansehen und teilen

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

Nachdem Sie die Bereitstellung auf einem Vorschaukanal vorgenommen haben, stellt Firebase Ihre Web-App über eine „Vorschau-URL“ bereit. Das ist eine temporäre URL, die Sie freigeben können. Wenn Sie eine Vorschau-URL verwenden, interagiert Ihre Web-App für alle Projektressourcen mit Ihrem echten Backend (mit Ausnahme von „angepinnten“ Funktionen in Ihrer Konfiguration für das Umschreiben).

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 Projektverzeichnisses 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 dem Vorschaukanal zugeordnet ist.

  2. Öffnen Sie Ihre Webanwendung unter der von der CLI zurückgegebenen Vorschau-URL. Dies sieht ungefähr so aus: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Wenn Sie die Vorschau-URL mit Änderungen aktualisieren möchten, führen Sie denselben Befehl noch einmal aus. Achten Sie darauf, dass Sie im Befehl dieselbe CHANNEL_ID angeben.

Weitere Informationen zum Verwalten von Preview-Kanälen, einschließlich des Festlegens eines Ablaufdatums für einen Kanal.

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

Schritt 3:Live bereitstellen

Wenn du deine Änderungen mit anderen teilen möchtest, kannst du deine Hosting-Inhalte und -Konfiguration auf deinem Live-Kanal bereitstellen. Je nach Anwendungsfall bietet Firebase verschiedene Optionen für diesen Schritt (siehe unten).

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

Diese Option gibt Ihnen die Sicherheit, dass Sie auf Ihrem Live-Kanal genau die Inhalte und Konfiguration bereitstellen, die Sie auf einem Vorschaukanal getestet haben. Weitere Informationen zum 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 jeden Platzhalter durch Folgendes:

    • SOURCE_SITE_ID und TARGET_SITE_ID: Das sind die IDs der Hosting-Websites, die die Channels enthalten.

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

    • SOURCE_CHANNEL_ID: Dies ist die Kennung für den Channel, über den derzeit die Version bereitgestellt wird, die Sie auf Ihrem Live-Channel bereitstellen möchten.

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

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

Option 2: Aus dem lokalen Projektverzeichnis auf dem Live-Kanal bereitstellen

Mit dieser Option können Sie Konfigurationen anpassen, die für den Live-Channel spezifisch sind, oder die Bereitstellung auch dann vornehmen, wenn Sie keinen Vorschau-Channel verwendet haben.

  1. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses 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-Inhalte und -Konfiguration 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 ein Bereitstellungsziel in Ihrem CLI-Befehl an.

Weitere Bereitstellungsaktivitäten und ‑informationen

Kommentar für den Einsatz hinzufügen

Sie können optional einen Kommentar zu einem Bereitstellungsvorgang 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."

Scripted Tasks vor und nach der Bereitstellung hinzufügen

Optional können Sie Shell-Skripts mit dem firebase deploy-Befehl verbinden, um Aufgaben vor oder nach der Bereitstellung auszuführen. Ein Post-Deployment-Hook könnte beispielsweise Administratoren über die Bereitstellung neuer Websiteinhalte benachrichtigen. Weitere Informationen finden Sie in der Dokumentation zur Firebase-Befehlszeile.

Bereitgestellte Inhalte im Cache speichern

Wenn eine Anfrage für statische Inhalte gestellt wird, speichert Firebase Hosting die Inhalte automatisch im CDN-Cache. Wenn Sie die Inhalte Ihrer Website neu bereitstellen, löscht Firebase automatisch alle Ihre statischen Inhalte im Cache im gesamten CDN, sodass bei neuen Anfragen Ihre neuen Inhalte abgerufen 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 werden ausgewählte Dateien auf einer bereitgestellten Website in erster Linie gelöscht, indem Sie die Dateien lokal löschen und dann neu bereitstellen.

Nächste Schritte