Erste Schritte mit App Hosting

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:

  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.

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

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

  5. 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 verwalteter Ressourcen, die App Hosting zum Erstellen und Ausführen Ihrer Webanwendung erstellt. Jeder Projektinhaber kann das erste App Hosting-Backend für ein Projekt mit der Firebase Console oder der Firebase CLI erstellen. Nach dieser Ersteinrichtung können App Hosting-Administratoren auch zusätzliche Backends erstellen und verwalten. Weitere Informationen finden Sie unter Firebase App Hosting IAM-Rollen.

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

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:

  1. Übertragen Sie in GitHub eine Änderung in den Live-Branch der Webanwendung.
  2. Ö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