Vor der Bereitstellung auf Ihrer Live-Site sollten Sie Ihre Änderungen anzeigen und testen. Mit Firebase Hosting können Sie Änderungen lokal anzeigen und testen sowie mit emulierten Backend-Projektressourcen interagieren. Wenn Sie möchten, dass Ihre Teamkollegen Ihre Änderungen anzeigen 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-Anfrage.
Bevor Sie beginnen
Führen Sie die auf der Seite „Erste Schritte beim Hosting“ 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 Backend-Projektressourcen interagiert, können Sie Ihren Hosting-Inhalt testen und lokal konfigurieren. 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 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.). Stattdessen können Sie Ihre App 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 lokalen URL, die von der CLI zurückgegeben wird (normalerweise
http://localhost:5000
).Um die lokale URL mit Änderungen zu aktualisieren, aktualisieren Sie Ihren Browser.
Testen Sie von anderen lokalen Geräten aus
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 über andere Geräte in Ihrem Netzwerk. Wenn Sie von anderen lokalen Geräten aus testen möchten, konfigurieren Sie Ihre firebase.json
wie folgt:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Schritt 2: Vorschau anzeigen und teilen
Wenn Sie möchten, dass andere Änderungen an Ihrer Web-App sehen können, bevor sie live geschaltet werden, 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 gemeinsam nutzbare, temporäre URL handelt. Wenn Sie eine Vorschau-URL verwenden, interagiert Ihre Web-App mit Ihrem echten Backend für alle Projektressourcen (mit Ausnahme aller „angehefteten“ Funktionen in Ihrer Rewrites-Konfiguration ).
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 also 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 Vorschau-URL zu erstellen, die dem Vorschaukanal zugeordnet ist.Öffnen Sie Ihre Web-App unter der von der CLI zurückgegebenen Vorschau-URL. Es wird ungefähr so aussehen:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Um Ihre Vorschau-URL mit den Änderungen zu aktualisieren, führen Sie denselben Befehl erneut aus. Stellen Sie sicher, dass Sie im Befehl dieselbe CHANNEL_ID
angeben.
Schritt 3: Live-Bereitstellung
Option 1: Klonen Sie von einem Vorschaukanal auf Ihren Live-Kanal
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 Standard-Hosting-Site Ihre Firebase-Projekt-ID. Sie können Sites 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 auf Ihrem Live-Kanal bereitstellen möchten. Für einen Live-Kanal verwenden Sie live
als Kanal-ID.
Sehen Sie sich Ihre Änderungen an (nächster Schritt).
Option 2: Bereitstellung aus Ihrem lokalen Projektverzeichnis auf Ihrem Live-Kanal
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: Sehen Sie sich Ihre Änderungen auf Ihrer Live-Site an
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 Domänen , die Sie mit Ihren Hosting-Sites verbunden haben.
Weitere Bereitstellungsaktivitäten und Informationen
Fügen Sie einen Kommentar für die Bereitstellung hinzu
firebase deploy --only hosting -m "Deploying the best new feature ever."
Fügen Sie skriptbasierte Aufgaben vor und nach der Bereitstellung hinzu
firebase deploy
-Befehl verbinden, um Aufgaben vor oder nach der Bereitstellung auszuführen. Beispielsweise könnte ein Postdeploy-Hook Administratoren über die Bereitstellung neuer Websiteinhalte informieren. Weitere Informationen finden Sie in der Firebase-CLI-Dokumentation .
Bereitgestellte Inhalte zwischenspeichern
Bereitstellung über HTTPS
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-Möglichkeiten: Sehen Sie sich die vollständige Dokumentation für die Firebase-CLI 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 einen Gesamtüberblick über die Nutzung Ihres Projekts über mehrere Firebase-Dienste hinweg zu erhalten. Sie können auch das Hosting- Nutzungs- Dashboard besuchen, um detailliertere Nutzungsinformationen zu erhalten. Sehen Sie sich die Checkliste für den Firebase-Start an.