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 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 (App-Hosting) und dann Get Started 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 für die Console oder die Befehlszeile den Aufforderungen, Ihrem Back-End 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.

  • Legen Sie den Live-Branch fest.

    Dies ist der Zweig Ihres GitHub-Repositorys, der in Ihrer Live-URL bereitgestellt wird. Häufig ist dies der Zweig, mit dem Feature- oder Entwicklungszweige 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 Back-End erstellen, erhalten Sie von Firebase eine kostenlose Subdomain, über die Endnutzer Ihre Web-App 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 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 Back-End 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