Vor der Bereitstellung auf Ihrer Live-Site sollten Sie Ihre Änderungen anzeigen und testen. Firebase Hosting ermöglicht es Ihnen, Änderungen lokal anzuzeigen und zu testen und mit emulierten Back-End-Projektressourcen zu interagieren. Wenn Sie möchten, dass Ihre Teamkollegen Ihre Änderungen sehen und testen, kann Hosting gemeinsam nutzbare, temporäre Vorschau-URLs für Ihre Website erstellen. Wir unterstützen sogar eine GitHub-Integration zur Bereitstellung über eine Pull-Anforderung.
Bevor Sie beginnen
Führen Sie die auf der Seite "Hosting – Erste Schritte" aufgeführten Schritte aus, insbesondere die folgenden Aufgaben:
- Installieren oder aktualisieren Sie die Firebase CLI auf die neueste Version.
- 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 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 Back-End-Projektressourcen interagiert, können Sie Ihren Hosting-Inhalt und Ihre Konfiguration lokal testen. Beim lokalen Testen stellt Firebase Ihre Web-App unter einer lokal gehosteten URL bereit.
Hosting ist Teil der Firebase Local Emulator Suite , die es Ihrer App ermöglicht, mit Ihren emulierten Hosting-Inhalten und -Konfigurationen sowie optional mit Ihren emulierten Projektressourcen (Funktionen, Datenbanken und Regeln) zu interagieren.
(Optional) Standardmäßig interagiert Ihre lokal gehostete App mit echten , nicht emulierten , Projektressourcen (Funktionen, Datenbank, Regeln usw.). Sie können Ihre App stattdessen optional verbinden, um alle emulierten Projektressourcen zu verwenden, die Sie konfiguriert haben. Erfahren Sie mehr: Echtzeitdatenbank | Cloud Firestore | Cloud-Funktionen
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:
firebase emulators:start
Öffnen Sie Ihre Web-App unter der von der CLI zurückgegebenen lokalen URL (normalerweise
http://localhost:5000
).Um die lokale URL mit Änderungen zu aktualisieren, aktualisieren Sie Ihren Browser.
Testen Sie 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, jedoch nicht von anderen Geräten in Ihrem Netzwerk. Wenn Sie von anderen lokalen Geräten testen möchten, konfigurieren Sie Ihre firebase.json
wie folgt:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Wenn Sie firebase serve
verwenden, interagiert Ihre App mit einem emulierten Back-End für Ihre Hosting-Inhalte und -Konfigurationen (und optionalen Funktionen), aber mit Ihrem echten Back-End für alle anderen Projektressourcen.
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:
firebase serve --only hosting
Öffnen Sie Ihre Web-App unter der von der CLI zurückgegebenen lokalen URL (normalerweise
http://localhost:5000
).Um die lokale URL mit Änderungen zu aktualisieren, aktualisieren Sie Ihren Browser.
Verwenden Sie firebase serve
zum Testen von anderen lokalen Geräten
Standardmäßig antwortet firebase serve
nur auf Anfragen von localhost
. Das bedeutet, dass Sie über den Webbrowser Ihres Computers auf Ihre gehosteten Inhalte zugreifen können, jedoch nicht von anderen Geräten in Ihrem Netzwerk. Wenn Sie von anderen lokalen Geräten testen möchten, verwenden Sie das Flag --host
wie folgt:
firebase serve --host 0.0.0.0 // accepts requests to any host
Schritt 2: Vorschau anzeigen und teilen
Wenn Sie möchten, dass andere Änderungen an Ihrer Web-App sehen können, 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 teilbare, temporäre URL handelt. Wenn Sie eine Vorschau-URL verwenden, interagiert Ihre Webanwendung mit Ihrem echten Back-End 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 darauf zugreifen.
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:
firebase hosting:channel:deploy CHANNEL_ID
Ersetzen Sie CHANNEL_ID durch eine Zeichenfolge ohne Leerzeichen (z. B.
feature_mission-2-mars
). Diese ID wird verwendet, um die mit dem Vorschaukanal verknüpfte Vorschau-URL zu erstellen.Öffnen Sie Ihre Web-App unter der von der CLI zurückgegebenen Vorschau-URL. Es sieht etwa so aus:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Um Ihre Vorschau-URL mit Änderungen zu aktualisieren, führen Sie denselben Befehl erneut aus. Stellen Sie sicher, dass Sie im Befehl dieselbe
CHANNEL_ID
angeben.
Erfahren Sie mehr über das 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-Anforderung festschreiben. Erfahren Sie, wie Sie diese GitHub-Aktion einrichten und verwenden .
Schritt 3: Live bereitstellen
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 ein paar verschiedene Optionen für diesen Schritt (siehe Optionen unten).
Option 1: Klonen Sie von einem Vorschaukanal zu Ihrem Live-Kanal
Diese Option gibt Ihnen die Gewissheit, dass Sie in Ihrem Live-Kanal genau den Inhalt und die Konfiguration bereitstellen, die Sie in einem Vorschaukanal getestet haben. Erfahren Sie mehr über das Klonen von Versionen .
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 standardmäßige Hosting-Site Ihre Firebase-Projekt-ID.
- Sie können Websites angeben, die sich im selben Firebase-Projekt oder sogar in verschiedenen Firebase-Projekten befinden.
SOURCE_CHANNEL_ID : Dies ist die Kennung für den Kanal, 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.
- Verwenden Sie für einen Live-Kanal
Sehen Sie sich Ihre Änderungen an (nächster Schritt).
Option 2: Bereitstellung aus Ihrem lokalen Projektverzeichnis in Ihrem Live-Kanal
Diese Option bietet Ihnen die Flexibilität, Konfigurationen speziell für den Livekanal anzupassen oder bereitzustellen, selbst wenn Sie keinen Vorschaukanal verwendet haben.
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:
firebase deploy --only hosting
Sehen Sie sich Ihre Änderungen an (nächster Schritt).
Schritt 4: Zeigen Sie Ihre Änderungen auf Ihrer Live-Website an
Beide oben genannten Optionen stellen Ihren Hosting-Inhalt und Ihre Konfiguration auf den folgenden Websites bereit:
Die von Firebase bereitgestellten Subdomains für Ihre Standard-Hosting-Site und alle zusätzlichen Hosting-Sites:
SITE_ID .web.app
(wiePROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(wiePROJECT_ID .firebaseapp.com
)Alle benutzerdefinierten Domains , die Sie mit Ihrer/Ihren Hosting-Site(s) verbunden haben
Um die Bereitstellung auf eine bestimmte Hosting-Site zu beschränken, geben Sie in Ihrem CLI-Befehl ein Bereitstellungsziel an .
Andere Bereitstellungsaktivitäten und -informationen
Fügen Sie einen Kommentar für die Bereitstellung hinzu
Optional können Sie einer Bereitstellung einen Kommentar hinzufügen. Dieser Kommentar wird zusammen mit den anderen Bereitstellungsinformationen im Hosting-Dashboard in der Firebase-Konsole angezeigt. Zum Beispiel:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Fügen Sie skriptgesteuerte Tasks vor und nach der Bereitstellung hinzu
Sie können optional Shell-Skripts mit dem firebase deploy
verbinden, um Aufgaben vor der Bereitstellung oder nach der Bereitstellung auszuführen. Beispielsweise könnte ein Postdeploy-Hook Administratoren über die Bereitstellung neuer Site-Inhalte benachrichtigen. Weitere Informationen finden Sie in der Firebase-CLI-Dokumentation .
Bereitgestellte Inhalte zwischenspeichern
Wenn eine Anfrage für statische Inhalte erfolgt , speichert Firebase Hosting die Inhalte automatisch im CDN zwischen. Wenn Sie den Inhalt Ihrer Website erneut bereitstellen, löscht Firebase automatisch alle zwischengespeicherten statischen Inhalte im CDN, sodass neue Anfragen Ihre neuen Inhalte erhalten.
Beachten Sie, dass Sie das Caching dynamischer Inhalte konfigurieren können.
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 Benutzern nicht, "gemischte Inhalte" (SSL- und Nicht-SSL-Datenverkehr) zu laden.
Nächste Schritte
Integrieren Sie GitHub und iterieren Sie Ihre in der Vorschau angezeigten Inhalte, indem Sie die GitHub-Aktion einrichten .
Erfahren Sie mehr über weitere Hosting-Funktionen:
Sehen Sie sich die vollständige Dokumentation für die Firebase-Befehlszeilenschnittstelle an.
Bereiten Sie den Start Ihrer App vor:
- Richten Sie Budgetbenachrichtigungen für Ihr Projekt in der Google Cloud Console ein.
- Überwachen Sie das Nutzungs- und Abrechnungs- Dashboard in der Firebase-Konsole, um sich einen Überblick über die Nutzung Ihres Projekts über mehrere Firebase-Dienste hinweg zu verschaffen. Sie können auch das Hosting- Nutzungs- Dashboard besuchen, um detailliertere Nutzungsinformationen zu erhalten.
- Überprüfen Sie die Firebase-Startcheckliste .