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 loslegen. Erstellen Sie dazu ein App Hosting-Backend und starten Sie dann die Einführung mit einem Push in Ihren Live-Zweig. 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 benötigen, kopieren Sie den Prompt unten in Ihren KI-Coding-Agenten (z. B. Antigravity, Claude Code, Codex und Cursor). Sie können den Prompt anpassen und mit Ihrem Agenten interagieren. Weitere Informationen zur Installation 

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 einrichten, um die Bereitstellung automatisch auszuführen, wenn ein neuer Commit an ein GitHub-Repository gesendet wird. Am Ende dieses Ablaufs haben Sie eine aktive Next.js- oder Angular-Beispiel-App, die jedes Mal neu bereitgestellt wird, wenn Sie eine neue Änderung im main-Zweig Ihres GitHub-Repositorys committen.

In dieser Anleitung wird der empfohlene Firebase-Konsolenablauf beschrieben. Es gibt jedoch weitere Möglichkeiten zum Bereitstellen, z. B. die Firebase-Befehlszeile, um lokalen Code ohne GitHub-Verbindung bereitzustellen.

Schritt 1: Demorepository 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 & Serverless > App-Hosting auf.

  2. Klicken Sie auf Jetzt starten.

  3. Wenn Sie dazu aufgefordert werden, führen Sie 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 diese Schritte auszuführen:

  • Wählen Sie eine primäre Region aus. Das ist in der Regel die Region, die Ihren Nutzern am nächsten ist.
  • Verbinden Sie sich mit GitHub. Wählen Sie das Repository aus, das Sie gerade durch Forking des apphosting-adapters-Repositorys erstellt haben.
  • Legen Sie das Stammverzeichnis Ihrer App auf eines der folgenden Verzeichnisse fest:
  • Legen Sie den Live-Zweig als main fest.
  • Aktivieren Sie automatische Roll-outs (automatische Roll-outs sind standardmäßig aktiviert).
  • Weisen Sie Ihrem Backend einen Namen zu.
  • Wählen Sie Ihre Laufzeitumgebung aus. Standardmäßig ist die neueste empfohlene Node.js-Version für Sie vorausgewählt.
    • Konfigurieren Sie automatische Basis-Image-Updates (ABIU). ABIU ist standardmäßig aktiviert und wendet automatisch Sicherheitspatches auf Ihre 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 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.

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 Backend-Informationszeile mit hervorgehobenem Link zur Live-App.

Schritt 4: Roll-out durch Änderung auslösen

Sobald Ihr Backend erstellt ist und Sie eine Live-URL haben, können Sie die Einführung 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 Demo-GitHub-Repositorys den Quellcode der Startseite der Demo-App auf, nehmen Sie eine beliebige erkennbare Änderung vor und übertragen Sie die Änderung dann per Push-Befehl an 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. Behalten Sie in der Firebase-Konsole App Hosting im Blick, während Ihre 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