Wenn Sie eine vorhandene Next.js- oder Angular-Anwendung (Next.js-Version 13 oder höher oder Angular 17.2 oder höher) in einem GitHub-Repository haben, ist die Einrichtung von App Hosting denkbar einfach. Sie müssen lediglich ein App Hosting-Backend erstellen und dann ein Roll-out mit einem Push in Ihren Live-Branch starten. Wenn Sie keine App haben, können Sie die in dieser Anleitung beschriebenen Schritte anhand einer unserer Beispiel-Apps durchgehen.
Hinweis
Bevor Sie Firebase App Hosting einrichten können, müssen Sie ein Firebase-Projekt erstellen (falls Sie noch keines haben) und auf den Blaze-Tarif umstellen.
So erstellen Sie ein Projekt:
-
Klicken Sie in der Firebase Console auf Projekt hinzufügen.
-
Wenn Sie einem vorhandenen Google Cloud-Projekt Firebase-Ressourcen hinzufügen möchten, geben Sie den Projektnamen ein oder wählen Sie ihn aus dem Drop-down-Menü aus.
-
Geben Sie den gewünschten Projektnamen ein, um ein neues Projekt zu erstellen. Optional können Sie auch die Projekt-ID bearbeiten, die unter dem Projektnamen angezeigt wird.
-
-
Lesen Sie sich die Firebase-Nutzungsbedingungen durch und akzeptieren Sie sie.
-
Klicken Sie auf Weiter.
-
Optional: Richten Sie Google Analytics für Ihr Projekt ein, um die folgenden Firebase-Produkte optimal nutzen zu können:
Wählen Sie entweder ein vorhandenes Google Analytics-Konto aus oder erstellen Sie ein neues Konto.
Wenn Sie ein neues Konto erstellen, wählen Sie Ihren AnalyticsSpeicherort für Berichte aus und akzeptieren Sie dann die Datenfreigabeeinstellungen und Google Analytics-Nutzungsbedingungen für Ihr Projekt.
-
Klicken Sie auf Projekt erstellen (oder auf Firebase hinzufügen, wenn Sie ein vorhandenes Google Cloud-Projekt verwenden).
Firebase stellt automatisch Ressourcen für Ihr Firebase-Projekt bereit. Nach Abschluss des Vorgangs werden Sie zur Übersichtsseite für Ihr Firebase-Projekt in der Firebase Console weitergeleitet.
Schritt 0 (optional): GitHub-Repository und Web-App erstellen
Wenn Sie noch keine Webanwendung in einem GitHub-Repository haben oder den Ablauf lieber mit einer Beispielanwendung ausprobieren möchten, initialisieren Sie zuerst eines unserer Beispiele für Next.js oder Angular:
npm init @apphosting
Sie können die Beispielanwendung lokal mit next dev
oder ng start
ausführen. Erstellen Sie ein neues GitHub-Repository und übertragen Sie den neu initialisierten Beispielcode dorthin.
Schritt 1: App Hosting-Backend erstellen
Ein App Hosting-Backend ist die Sammlung der verwalteten Ressourcen, die App Hosting zum Erstellen und Ausführen Ihrer Webanwendung erstellt. Sie können App Hosting-Backends mit der Firebase-Konsole oder der Firebase-Befehlszeile erstellen und auflisten.
Firebase Console: Wählen Sie im Menü Build die Option App-Hosting und dann Jetzt starten aus.
Befehlszeile: (Version 13.15.4 oder höher) Führen Sie zum Erstellen eines Backends den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses aus und geben Sie als Argumente die projectID und die bevorzugte Region an:
firebase apphosting:backends:create --project PROJECT_ID --location us-central1
Folgen Sie sowohl in der Console als auch in der Befehlszeile der Anleitung, um Ihrem Backend einen Namen zuzuweisen, eine GitHub-Verbindung einzurichten und die folgenden grundlegenden Bereitstellungseinstellungen zu konfigurieren:
Legen Sie das Stammverzeichnis Ihrer App fest (Standard:
/
).Hier befindet sich normalerweise die Datei
package.json
.
Live-Zweig festlegen
Dies ist der Branch Ihres GitHub-Repositories, der auf Ihrer Live-URL bereitgestellt wird. Häufig ist es der Branch, in den Feature-Branches oder Entwicklungs-Branches zusammengeführt werden.
Automatische Roll-outs akzeptieren oder ablehnen
Automatische Roll-outs sind standardmäßig aktiviert. Nach Abschluss der Backend-Erstellung können Sie festlegen, dass Ihre App sofort auf App Hosting bereitgestellt wird.
Schritt 2: Bereitgestellte App aufrufen
Wenn Sie ein Backend erstellen, erhalten Sie von Firebase eine kostenlose Subdomain, über die Endnutzer Ihre Webanwendung aufrufen können. Das Format ist backend-id--project-id.us-central1.hosted.app
.
Sie können die URL Ihrer Webanwendung in der Firebase Console oder mit dem folgenden Befehl in der Befehlszeile aufrufen:
firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1
Schritt 3: Roll-out durch Pushen einer Änderung auslösen
Sobald Ihr Backend erstellt ist und Sie eine Live-URL haben, können Sie das Roll-out einer neuen Version Ihrer Webanwendung auslösen, indem Sie Änderungen in den Live-Branch Ihres GitHub-Repositories pushen. So testen Sie Ihre App Hosting-Einrichtung:
- Übertragen Sie in GitHub eine Änderung in den Live-Branch der Webanwendung.
- Öffne in der Firebase-Konsole den Tab App Hosting und wähle für dein Backend Dashboard ansehen aus. In der Tabelle wird der Commit angezeigt, der mit dem Roll-out verknüpft ist, das durch Ihre Änderung ausgelöst wurde.
Nächste Schritte
- Weitere Informationen: In diesem Firebase-Codelab wird eine gehostete App mit Firebase Authentication und Google-KI-Funktionen integriert: Next.js | Angular
- Benutzerdefinierte Domain verbinden
- Konfigurieren Sie Ihr Backend.
- Roll-outs, Websitenutzung und Protokolle im Blick behalten