Erste Schritte mit App Hosting

Wenn Sie eine vorhandene Next.js- oder Angular-App (Next.js-Version 13.5.x+ oder Angular-Version 18.2.x+) in einem GitHub-Repository haben, können Sie ganz einfach mit App Hosting beginnen, indem Sie ein App Hosting-Backend erstellen und dann mit einem Push in Ihren Live-Zweig mit der Einführung beginnen. Wenn Sie keine App haben, können Sie eine unserer Beispiel-Apps verwenden, um die in dieser Anleitung beschriebenen Schritte durchzugehen.

Hinweis

Bevor Sie Firebase App Hosting einrichten können, müssen Sie ein Firebase-Projekt erstellen (falls noch keines vorhanden ist) und ein Upgrade auf den Blaze-Tarif durchführen.

So erstellen Sie ein Projekt:

  1. Klicken Sie in der Firebase-Konsole 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 das Projekt aus dem Drop-down-Menü aus.

    • Wenn Sie ein neues Projekt erstellen möchten, geben Sie einen Projektnamen ein. Optional können Sie auch die Projekt-ID bearbeiten, die unter dem Projektnamen angezeigt wird.

  2. Lesen Sie sich die Nutzungsbedingungen von Firebase durch und akzeptieren Sie sie.

  3. Klicken Sie auf Weiter.

  4. (Optional) Richten Sie Google Analytics für Ihr Projekt ein. So können Sie die folgenden Firebase-Produkte optimal nutzen: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging und Remote Config (einschließlich Personalisierung).

    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 den Analytics-Berichtsspeicherort aus und akzeptieren Sie dann die Datenfreigabeeinstellungen und die Google Analytics-Nutzungsbedingungen für Ihr Projekt.

  5. Klicken Sie auf Projekt erstellen (oder auf Firebase hinzufügen, wenn Sie Firebase einem vorhandenen Google Cloud-Projekt hinzufügen).

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 per Push dorthin.

Schritt 1: App Hosting-Backend erstellen

Ein App Hosting-Backend ist die Sammlung verwalteter Ressourcen, die von App Hosting erstellt werden, um Ihre Web-App zu erstellen und auszuführen.

Firebase Console: Wählen Sie im Menü Build die Option App Hosting und dann Jetzt starten aus.

CLI (Version 13.15.4 oder höher): Führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses aus und geben Sie Ihre Projekt-ID als Argument an, um ein Backend zu erstellen:

firebase apphosting:backends:create --project PROJECT_ID

Folgen Sie in der Console oder CLI der Anleitung, um eine Region auszuwählen, eine GitHub-Verbindung einzurichten und die folgenden grundlegenden Bereitstellungseinstellungen zu konfigurieren:

  • Stammverzeichnis Ihrer App festlegen (Standardwert: /)

    Hier befindet sich üblicherweise die Datei package.json.

  • Live-Zweig festlegen

    Dies ist der Branch Ihres GitHub-Repositorys, der unter Ihrer Live-URL bereitgestellt wird. Häufig ist es der Branch, in den Feature- oder Entwicklungs-Branches zusammengeführt werden.

  • Automatische Roll-outs akzeptieren oder ablehnen

    Automatische Roll-outs sind standardmäßig aktiviert. Nachdem das Backend erstellt wurde, können Sie festlegen, dass Ihre App sofort in App Hosting bereitgestellt wird.

  • Weisen Sie Ihrem Backend einen Namen zu.

Schritt 2: Bereitgestellte App aufrufen

Wenn Sie ein Backend erstellen, stellt Firebase Ihnen eine kostenlose Subdomain zur Verfügung, über die Endnutzer Ihre Web-App aufrufen können. Das Format ist backend-id--project-id.us-central1.hosted.app.

Die URL Ihrer Web-App finden Sie in der Firebase Console oder wenn Sie den folgenden CLI-Befehl ausführen:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}

Schritt 3: Roll-out durch das Übertragen einer Änderung auslösen

Sobald Ihr Backend erstellt wurde und Sie eine Live-URL haben, können Sie den Roll-out einer neuen Version Ihrer Web-App auslösen, wenn Sie Änderungen in den Live-Branch Ihres GitHub-Repositorys übertragen. So testen Sie die Einrichtung von App Hosting:

  1. Übertragen Sie in GitHub eine Änderung in den Live-Branch der Web-App.
  2. Öffnen Sie in der Firebase-Konsole den Tab App Hosting und wählen Sie für Ihr Backend Dashboard ansehen aus. In der Tabellenliste wird der spezifische Commit angezeigt, der mit dem Roll-out verknüpft ist, der durch Ihre Änderung ausgelöst wurde.

Nächste Schritte