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:

Neu bei Firebase oder in der Cloud

Führen Sie diese Schritte aus, wenn Sie Firebase oder Google Cloud noch nicht kennen.
Sie können diese Schritte auch ausführen, wenn Sie ein völlig neues Firebase-Projekt (und das zugrunde liegende Google Cloud-Projekt) erstellen möchten.

  1. Melden Sie sich in der Firebase Console an.
  2. Klicken Sie auf die Schaltfläche, um ein neues Firebase-Projekt zu erstellen.

  3. Geben Sie in das Textfeld einen Projektnamen ein.

    Wenn Sie Mitglied einer Google Cloud-Organisation sind, können Sie optional auswählen, in welchem Ordner Sie Ihr Projekt erstellen.

  4. Lesen und akzeptieren Sie bei Aufforderung die Nutzungsbedingungen für Firebase und klicken Sie dann auf Weiter.
  5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet). Sie kann Ihnen den Einstieg erleichtern und Ihren Entwicklungsprozess optimieren.

  6. (Optional) Richten Sie Google Analytics für Ihr Projekt ein, um diese Firebase-Produkte optimal nutzen zu können: 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-Berichtsstandort aus, akzeptieren Sie die Datenfreigabeeinstellungen und die Google Analytics-Nutzungsbedingungen für Ihr Projekt.

  7. Klicken Sie auf Projekt erstellen.

Firebase erstellt Ihr Projekt, stellt einige erste Ressourcen bereit und aktiviert wichtige APIs. Nach Abschluss des Vorgangs werden Sie zur Übersichtsseite für Ihr Firebase-Projekt in der Firebase Console weitergeleitet.

Vorhandenes Cloud-Projekt

Folgen Sie dieser Anleitung, wenn Sie Firebase mit einem vorhandenen Google Cloud-Projekt verwenden möchten. Weitere Informationen zum Hinzufügen von Firebase zu einem vorhandenen Google Cloud-Projekt

  1. Melden Sie sich in der Firebase-Konsole mit dem Konto an, mit dem Sie auf das vorhandene Google Cloud-Projekt zugreifen können.
  2. Klicken Sie auf die Schaltfläche, um ein neues Firebase-Projekt zu erstellen.
  3. Klicken Sie unten auf der Seite auf Firebase dem Google Cloud-Projekt hinzufügen.
  4. Geben Sie im Textfeld den Projektnamen des vorhandenen Projekts ein und wählen Sie das Projekt aus der angezeigten Liste aus.
  5. Klicken Sie auf Projekt öffnen.
  6. Lesen und akzeptieren Sie bei Aufforderung die Nutzungsbedingungen für Firebase und klicken Sie dann auf Weiter.
  7. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet). Sie kann Ihnen den Einstieg erleichtern und Ihren Entwicklungsprozess optimieren.

  8. (Optional) Richten Sie Google Analytics für Ihr Projekt ein, um diese Firebase-Produkte optimal nutzen zu können: 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-Berichtsstandort aus, akzeptieren Sie die Datenfreigabeeinstellungen und die Google Analytics-Nutzungsbedingungen für Ihr Projekt.

  9. Klicken Sie auf Firebase hinzufügen.

Firebase fügt Firebase Ihrem vorhandenen Projekt hinzu. 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 ansehen

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 indem 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