Erste Schritte mit App Hosting

Wenn Sie eine vorhandene Next.js- oder Angular-Anwendung (Next.js-Versionen 13.5.x+ oder Angular 18.2.x+) in einem GitHub-Repository haben, können Sie mit App Hosting ganz einfach ein App Hosting-Backend erstellen und dann einen Roll-out mit einem Push in Ihren Live-Zweig starten. Wenn Sie keine App haben, können Sie eine unserer Beispiel-Apps verwenden, um die in diesem Leitfaden beschriebenen Schritte auszuführen.

Wenn Sie KI-Unterstützung nutzen möchten, kopieren Sie den Prompt unten in Ihren KI-Coding-Agenten (z. B. Antigravity, Claude Code, Codex oder Cursor). Sie können den Prompt anpassen und mit Ihrem Agenten iterieren. Ausführliche Informationen zur Installation finden Sie unter Firebase-Agenten-Skills. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

In diesem Leitfaden wird beschrieben, wie Sie App Hosting in der Firebase Console so einrichten, dass jedes Mal, wenn ein neuer Commit an ein GitHub-Repository gesendet wird, automatisch eine Bereitstellung erfolgt. Am Ende dieses Ablaufs haben Sie eine Next.js- oder Angular-Beispielanwendung, die jedes Mal neu bereitgestellt wird, wenn Sie eine neue Änderung am main-Zweig Ihres GitHub-Repositorys vornehmen.

In diesem Leitfaden wird der empfohlene Firebase-Konsolenablauf beschrieben. Es gibt jedoch auch andere Möglichkeiten für die Bereitstellung, z. B. die Verwendung der Firebase-Befehlszeile, um lokalen Code ohne GitHub-Verbindung bereitzustellen.

Schritt 1: Demo-Repository forken

Rufen Sie https://github.com/firebase/apphosting-adapters auf und wählen Sie Fork aus.

Schritt 2: App Hosting-Backend erstellen

  1. Rufen Sie in der Firebase-Konsole Hosting und serverlos > App Hosting auf.

  2. Klicken Sie auf Jetzt starten.

  3. Führen Sie bei Aufforderung ein Upgrade auf das Blaze-Preismodell (Pay as you go) durch, um App Hosting zu verwenden.

Screenshot der Einrichtung des App Hosting-Backends.

Folgen Sie der Anleitung, um die folgenden Schritte auszuführen:

  • Wählen Sie eine primäre Region aus (normalerweise die Region, die Ihren Nutzern am nächsten ist).
  • Verbindung zu GitHub herstellen Wählen Sie das Repository aus, das Sie gerade durch Verzweigen des Repositorys apphosting-adapters erstellt haben.
  • Legen Sie das Stammverzeichnis Ihrer Anwendung auf eine der folgenden Optionen fest:
  • Legen Sie den Live-Zweig als main fest.
  • Aktivieren Sie automatische Roll-outs (automatische Roll-outs sind standardmäßig aktiviert).
  • Weisen Sie dem Backend einen Namen zu.
  • Wählen Sie Ihre Laufzeitumgebung aus. Standardmäßig ist die neueste empfohlene Node.js-Version für Sie vorausgewählt.
    • Automatische Basis-Image-Updates (ABIU) konfigurieren ABIU ist standardmäßig aktiviert und wendet automatisch Sicherheitspatches auf die zugrunde liegende Umgebung an. Sie können ABIU deaktivieren, indem Sie für Ihre Laufzeit „Nicht angegeben“ auswählen.
  • Erstellen Sie eine neue Firebase-Web-App.

Wählen Sie Fertigstellen und bereitstellen aus.

Schritt 3: Bereitgestellte Anwendung ansehen

Wenn Sie ein Backend 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.

Wählen Sie im Dashboard für Ihr Backend in der Zeile Backend-Informationen den Link zu Ihrem Live-Backend aus, um Ihre neue Website aufzurufen:

Screenshot der Zeile mit den Backend-Informationen, in der der Link zur Live-App hervorgehoben ist.

Schritt 4: Roll-out durch Übertragen 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 Web-App auslösen, wenn Sie Änderungen in den Live-Zweig Ihres GitHub-Repositorys übertragen. So testen Sie Ihre App Hosting-Einrichtung:

  1. Rufen Sie in Ihrem Fork des GitHub-Demo-Repositorys die Quelle der Startseite der Demo-App auf, nehmen Sie eine beliebige erkennbare Änderung vor und übertragen Sie die Änderung dann per Push in den Hauptzweig. So rufen Sie Ihre Startseite auf:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. Beobachten Sie in der Firebase-Konsole App Hosting, während die neue Änderung in der Produktion eingeführt wird. Wenn die Einführung abgeschlossen ist, können Sie die Änderung auf der Startseite der App sehen.

Nächste Schritte