Erste Schritte mit App Hosting

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

In dieser Anleitung wird beschrieben, wie Sie App Hosting in der Firebase Konsole einrichten, um die App automatisch bereitzustellen, wenn ein neuer Commit in einem GitHub-Repository erfolgt. Am Ende dieses Ablaufs haben Sie eine Live-Beispiel-App für Next.js oder Angular, die jedes Mal neu bereitgestellt wird, wenn Sie eine neue Änderung an den main-Zweig Ihres GitHub-Repositorys committen.

In dieser Anleitung wird zwar der emp0fohlenen Firebase Konsole beschrieben, es gibt andere Möglichkeiten zur Bereitstellung, z. B. die Verwendung der Firebase CLI zum Bereitstellen von lokalem Code ohne GitHub Verbindung.

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 & Serverless > App Hosting auf.

  2. Klicken Sie auf Jetzt starten.

  3. Wenn Sie dazu aufgefordert werden, führen Sie ein Upgrade auf den Blaze-Tarif (Pay as you go) durch, um App Hosting zu verwenden.

Screenshot der Backend-Einrichtung für App Hosting.

Folgen Sie der Anleitung, um diese Schritte auszuführen:

  • Wählen Sie eine primäre Region aus (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 Forken des Repositorys „firebase-framework-tools“ 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.
  • 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 End nutzer Ihre Web-App aufrufen können. Das Format ist backend-id--project-id.us-central1.hosted.app.

Wählen Sie in der Zeile Backend-Informationen im Dashboard für Ihr Backend 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 Push einer Änderung auslösen

Sobald Ihr Backend erstellt wurde und Sie eine Live-URL haben, können Sie den Roll-out einer neuen Version Ihrer Web-App auslösen, wenn Sie Änderungen in den Live-Zweig Ihres GitHub-Repositorys pushen. 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 pushen Sie die Änderung dann 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, wie App Hosting Ihre neue Änderung in der Produktionsumgebung bereitgestellt wird. Wenn der Roll-out abgeschlossen ist, können Sie die Änderung auf der Startseite der App sehen.

Nächste Schritte