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 und testen und mit emulierten Back-End-Projektressourcen interagieren. Wenn Sie möchten, dass Ihre Teammitglieder Ihre Änderungen ansehen und testen können, können Sie mit Hosting freigegebene, temporäre Vorschau-URLs für Ihre Website erstellen. Wir unterstützen sogar eine GitHub-Integration, um über eine Pull-Anfrage bereitzustellen.

Hinweis

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

  1. Installieren oder aktualisieren Sie die Firebase-Befehlszeile 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 durchführen oder möchten, dass Ihre App mit emulierten Backend-Projektressourcen interagiert, können Sie Ihre Hosting-Inhalte und ‑Konfiguration lokal testen. Bei lokalen Tests stellt Firebase Ihre Webanwendung unter einer lokal gehosteten URL bereit.

Hosting ist Teil des Firebase Local Emulator Suite, über das die Anwendung mit den emulierten Hosting-Inhalten und -Konfigurationen 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.). Optional können Sie Ihre App so verbinden, dass sie alle von Ihnen konfigurierten emulierten Projektressourcen verwendet. 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 von der Befehlszeile zurückgegebenen lokalen URL (in der Regel http://localhost:5000).

  4. Wenn Sie die lokale URL mit den Änderungen aktualisieren möchten, aktualisieren Sie Ihren Browser.

Test von anderen lokalen Geräten

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, aber nicht ü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 Nutzer Änderungen an Ihrer Webanwendung sehen, bevor sie online gehen, können Sie Vorschaukanäle verwenden.

Nachdem Sie die Bereitstellung auf einem Vorschaukanal durchgeführt haben, stellt Firebase Ihre Webanwendung über eine „Vorschau-URL“ bereit. Das ist eine freigegebene temporäre URL. Wenn Sie eine Vorschau-URL verwenden, interagiert Ihre Webanwendung für alle Projektressourcen mit Ihrem echten Backend, mit Ausnahme von angepinnten Funktionen in Ihrer Rewrites-Konfiguration.

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 sieht ungefähr so aus: 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. Achten Sie darauf, im Befehl denselben CHANNEL_ID anzugeben.

Informieren Sie sich über die Verwaltung 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 einem Pull-Request committen. GitHub-Aktion einrichten und verwenden

Schritt 3: Live-Bereitstellung

Wenn du bereit bist, deine Änderungen der Öffentlichkeit zugänglich zu machen, kannst du den Inhalt und die Konfiguration von Hosting auf deinem Live-Kanal bereitstellen. Firebase bietet für diesen Schritt je nach Anwendungsfall verschiedene Optionen (siehe Optionen unten).

Option 1: Von einem Vorschaukanal in den 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 Standard-Hosting-Website Ihre Firebase-Projekt-ID.
      • Sie können Websites aus demselben oder aus verschiedenen Firebase-Projekten angeben.

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

      • Verwende für einen 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 die Konfigurationen flexibel an den Live-Kanal anpassen oder bereitstellen, selbst 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 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 Website(s) verknüpft haben

Wenn Sie das Deployment auf eine bestimmte Hosting-Website beschränken möchten, geben Sie in Ihrem Befehl ein Deployment-Ziel an.

Sonstige Bereitstellungsaktivitäten und -informationen

Fügen Sie einen Kommentar zum Deployment hinzu.

Optional können Sie einem Deployment 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."

Skriptaufgaben vor und nach der Bereitstellung hinzufügen

Optional können Sie Shell-Scripts mit dem Befehl firebase deploy verknüpfen, um Aufgaben vor oder nach der Bereitstellung auszuführen. Ein Post-Deploy-Hook könnte beispielsweise Administratoren über das Bereitstellen neuer Websiteinhalte informieren. Weitere Informationen finden Sie in der Firebase-CLI-Dokumentation.

Bereitstellen von Inhalten im Cache

Wenn eine Anfrage für statische Inhalte gestellt wird, speichert Firebase Hosting die Inhalte automatisch im CDN. Wenn Sie die Inhalte Ihrer Website neu bereitstellen, werden in Firebase automatisch alle im Cache gespeicherten statischen Inhalte im CDN gelöscht, damit bei neuen Anfragen Ihre neuen Inhalte zurückgegeben 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 Scripts. Die meisten Browser erlauben Nutzern nicht, gemischte Inhalte (SSL- und nicht SSL-Traffic) zu laden.

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