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

Bevor Sie die Änderungen auf Ihrer Livewebsite veröffentlichen, sollten Sie sie sich ansehen und testen. Mit Firebase Hosting können Sie Änderungen lokal ansehen, testen und interagieren mit emulierten Back-End-Projektressourcen. Wenn Sie möchten, dass Ihre Teammitglieder Änderungen testen, kann Hosting gemeinsam nutzbare temporäre Vorschau-URLs für für Ihre Website. Wir unterstützen sogar GitHub-Integration für die Bereitstellung aus einem Pull-Vorgang

Hinweis

Folgen Sie der Anleitung auf der Hosting-Seite „Erste Schritte“, insbesondere die folgende Aufgaben ausführen:

  1. Installieren oder aktualisieren Sie die Firebase-Befehlszeile auf die neueste Version.
  2. Verbinden Sie das lokale Projektverzeichnis (mit dem Inhalt 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 können Sie den Inhalt und die Konfiguration von Hosting testen lokal. Bei lokalen Tests stellt Firebase Ihre Web-App auf einem lokal gehosteten URL

Hosting gehört zu Firebase Local Emulator Suite, Dadurch kann Ihre App mit den emulierten Hosting-Inhalten interagieren und Konfiguration sowie optional Ihre emulierten Projektressourcen (Funktionen, Datenbanken und Regeln).

  1. Optional: Standardmäßig interagiert Ihre lokal gehostete App mit echten, nicht emulierten Projektressourcen (Funktionen, Datenbank, Regeln usw.). Sie können stattdessen Ihre Anwendung verbinden, um ein emuliertes Projekt zu verwenden Ressourcen, 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 Befehlszeile zurückgegeben wird (normalerweise http://localhost:5000.

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

Auf anderen lokalen Geräten testen

Standardmäßig reagieren die Emulatoren nur auf Anfragen von localhost. Dieses bedeutet, dass Sie über das Web auf Ihrem Computer auf Ihre gehosteten Inhalte zugreifen können. Browser, aber nicht von anderen Geräten in Ihrem Netzwerk. Wenn Sie von verschiedenen anderen lokalen Geräten konfigurieren, konfiguriere dein firebase.json so:

"emulators": {
    // ...

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

Schritt 2: Vorschau ansehen und freigeben

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

Nach der Bereitstellung auf einem Vorschaukanal stellt Firebase Ihre Webanwendung über eine „Vorschau-URL“ bereit, eine freigegebene temporäre URL. Wenn Sie eine Vorschau-URL verwenden, Ihre Webanwendung mit dem realen Back-End für alle Projektressourcen interagiert (mit mit Ausnahme von "angepinnten" Funktionen in Ihren Umschreibungen config.

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). Anhand dieser ID wird die URL der Vorschau erstellt, die mit dem Vorschaukanal verknüpft ist.

  2. Öffnen Sie Ihre Webanwendung unter der Vorschau-URL, die von der Befehlszeile zurückgegeben wurde. Sie könnte beispielsweise so aussehen: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

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

Weitere Informationen zur Verwaltung von Vorschaukanälen wie die Ablauffrist eines Kanals festlegen.

Firebase Hosting unterstützt eine GitHub-Aktion, die automatisch aktualisiert eine Vorschau-URL, wenn Sie einen Commit für Änderungen an einer Pull-Anfrage durchführen. Hier erfahren Sie, wie Sie diese GitHub-Aktion einrichten und verwenden.

Schritt 3: Live bereitstellen

Wenn Sie bereit sind, Ihre Änderungen mit der ganzen Welt zu teilen, stellen Sie die Hosting bereit. und Konfiguration deines Livekanals. Firebase bietet je nach Anwendungsfall verschiedene Optionen für diesen Schritt (siehe Optionen unten).

Option 1: Von einem Vorschaukanal in Ihren Livekanal klonen

Mit dieser Option kannst du dir sicher sein, dass du auf deinem Livekanal genau die Inhalte und die Konfiguration verwendest, die du in einem Vorschaukanal getestet hast. 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: Dies sind die IDs der Hosting Websites, die die Channels enthalten.

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

    • SOURCE_CHANNEL_ID: Das ist die Kennung für den Kanal, über den derzeit die Version gestreamt wird, die du auf deinem Livekanal bereitstellen möchtest.

      • Verwende bei einem Livekanal live als Kanal-ID.

  2. Änderungen ansehen (nächster Schritt)

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

Mit dieser Option können Sie Konfigurationen speziell für den Live-Kanal anpassen oder bereitstellen, auch wenn Sie keinen Vorschaukanal 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 der Website ansehen

Bei beiden Optionen werden die Hosting-Inhalte und die Hosting-Konfiguration an den folgenden Standorten bereitgestellt:

  • Die von Firebase bereitgestellten Subdomains für Ihre Hosting-Standardwebsite und alle Hosting weitere Websites:
    SITE_ID.web.app (ähnlich PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (ähnlich PROJECT_ID.firebaseapp.com)

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

So beschränken Sie die Bereitstellung auf eine bestimmte Hosting-Website: Bereitstellungsziel angeben in die Befehlszeile ein.

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 zusammen mit anderen Informationen zur Bereitstellung im Hosting-Dashboard in der Firebase-Konsole angezeigt. Beispiel:

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

Pre-Deploy- und Post-Deploy-Skriptaufgaben hinzufügen

Optional können Sie Shell-Skripts mit dem Befehl firebase deploy verbinden, Aufgaben vor oder nach der Bereitstellung auszuführen. Zum Beispiel könnte ein Hook nach der Bereitstellung Administratoren über neu bereitgestellte Websiteinhalte zu informieren. Weitere Informationen finden Sie in der Weitere Informationen finden Sie in der Dokumentation zur Firebase-Befehlszeile.

Bereitgestellte Inhalte im Cache speichern

Bei einer Anfrage für statische Inhalte wird Firebase Hosting automatisch wird der Inhalt im CDN gespeichert. Wenn Sie die Inhalte Ihrer Website neu bereitstellen, Ihre gesamten im Cache gespeicherten statischen Inhalte werden automatisch aus dem CDN gelöscht, sodass neue erhalten Ihre neuen Inhalte.

Beachten Sie, dass Sie die Dynamischen Content im Cache speichern.

Über HTTPS bereitstellen

Achten Sie darauf, dass alle externen Ressourcen, die nicht auf Firebase Hosting werden über SSL (HTTPS) geladen, einschließlich externer Skripts. Die meisten Browser lassen das Laden von "gemischten Inhalten" nicht zu (SSL und Nicht-SSL Zugriffe).

Dateien löschen

In Firebase Hosting können ausgewählte Dateien von einer bereitgestellten Website hauptsächlich lokal gelöscht und dann neu bereitgestellt werden.

Nächste Schritte