Erste Schritte mit App Hosting

Wenn Sie eine vorhandene Next.js- oder Angular-Anwendung (Next.js-Versionen 13.5.x oder höher oder Angular 18.2.x 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 mit 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:

  1. 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.

    • 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 Firebase-Nutzungsbedingungen 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 Ihren AnalyticsSpeicherort für Berichte aus und akzeptieren Sie dann die Datenfreigabeeinstellungen und Google Analytics-Nutzungsbedingungen für Ihr Projekt.

  5. Klicken Sie auf Projekt erstellen oder 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 Webanwendung 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 verwalteter Ressourcen, die App Hosting zum Erstellen und Ausführen Ihrer Webanwendung erstellt.

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) Wenn Sie ein Backend erstellen möchten, führen Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses aus und geben Sie Ihre Projekt-ID als Argument an:

firebase apphosting:backends:create --project PROJECT_ID

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

  • Legen Sie das Stammverzeichnis Ihrer App fest (standardmäßig /).

    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.

  • Weisen Sie Ihrem Backend einen Namen zu.

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}

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 führen Sie einen Test Ihrer App Hosting-Einrichtung durch:

  1. Übertragen Sie in GitHub eine Änderung in den Live-Branch der Webanwendung.
  2. Öffnen Sie in der Firebase-Konsole den Tab App Hosting und wählen Sie für Ihr 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