Mit einer Next.js-App in Firebase App Hosting bereitstellen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie eine Next.js-Web-App namens Friendly Eats in Firebase App Hosting bereitstellen. Friendly Eats ist eine Website für Restaurantrezensionen.

Die fertige Web-App bietet nützliche Funktionen, die zeigen, wie Firebase Ihnen beim Erstellen von Next.js-Apps helfen kann.

• Automatisches Erstellen und Bereitstellen:In diesem Codelab erfahren Sie, wie Sie Firebase App Hosting verwenden, um Ihren Next.js-Code automatisch zu erstellen und bereitzustellen, wenn Sie ihn in einen konfigurierten Branch übertragen.
• An- und Abmeldung:Mit der fertigen Web-App können sich Nutzer über Google an- und abmelden. Nutzer-Log‑ins und ‑Persistenz werden vollständig über Firebase Authentication verwaltet.
• Bilder:In der fertigen Web-App können angemeldete Nutzer Restaurantbilder hochladen. Bild-Assets werden in Cloud Storage for Firebase gespeichert. Das Firebase JavaScript SDK stellt eine öffentliche URL für hochgeladene Bilder bereit. Diese öffentliche URL wird dann im entsprechenden Restaurantdokument in Cloud Firestore gespeichert.
• Filter:In der fertigen Web-App können angemeldete Nutzer die Liste der Restaurants nach Kategorie, Standort und Preis filtern. Sie können auch die verwendete Sortiermethode anpassen. Auf Daten wird über Cloud Firestore zugegriffen und Firestore-Abfragen werden basierend auf den verwendeten Filtern angewendet.
• Rezensionen:Mit der fertigen Web-App können angemeldete Nutzer Rezensionen von Restaurants in Form einer Sternebewertung und einer Textnachricht posten. Rezensionsinformationen werden in Cloud Firestore gespeichert.
• Zusammenfassungen von Rezensionen:Die fertige Web-App fasst Rezensionen automatisch mithilfe eines Gemini-Modells zusammen. KI-generierte Zusammenfassungen werden in Cloud Firestore gespeichert.

Vorbereitung

• Kenntnisse in Next.js und JavaScript

Lerninhalte

• Firebase mit dem Next.js-App-Router und serverseitigem Rendering verwenden
• Aufrufe der Gemini API nur mit serverseitigen Secrets autorisieren

Voraussetzungen

• Einen Browser Ihrer Wahl, z. B. Google Chrome
• Zugriff auf IDX.dev (ein webbasierter Arbeitsbereich)
• Ein Google-Konto zum Erstellen und Verwalten Ihres Firebase-Projekts
• Ein GitHub-Konto (es muss nicht dasselbe E‑Mail-Konto wie oben sein)

2. Entwicklungsumgebung und GitHub-Repository einrichten

In diesem Codelab wird die Starter-Codebasis der App bereitgestellt. Es wird die Firebase CLI und IDX.dev verwendet.

Neues GitHub-Repository erstellen und in IDX importieren

Mit Firebase App Hosting können Sie ein GitHub-Repository einrichten, damit Ihr Next.js-Code jedes Mal erstellt und bereitgestellt wird, wenn Sie Änderungen per Push an einen konfigurierten Branch übertragen.

1. Erstellen Sie ein neues GitHub-Repository für dieses Codelab: https://github.com/new. Geben Sie ihm einen beliebigen Namen, z. B. MyFriendlyEatsCodelab.
2. Kopieren Sie die URL Ihres neuen Repositorys. Das sieht so aus:
   https://github.com/USER_NAME/REPOSITORY_NAME.git
3. Rufen Sie https://idx.google.com auf und melden Sie sich an.
4. Klicken Sie auf Repository importieren und fügen Sie die kopierte GitHub-URL ein.
   IDX fordert Sie auf, eine Verknüpfung zu GitHub herzustellen, und klont dann Ihr (leeres) Repository.

Quellcode-Repository des Codelabs ansehen

Den Quellcode für das Codelab finden Sie unter https://github.com/firebase/friendlyeats-web. Das Repository friendlyeats-web enthält Beispielprojekte für mehrere Plattformen.

Dieses Codelab konzentriert sich nur auf Firebase App Hosting und die Gemini API. Es ist eine gekürzte Version des vollständigen Codelabs „Firebase in eine Next.js-App einbinden“. In diesem verkürzten Codelab arbeiten Sie nur mit dem Quellcode im #io-connect-Zweig des friendlyeats-web-Repositorys, insbesondere mit dem nextjs-step10-Verzeichnis.

Beachten Sie die folgenden zusätzlichen Verzeichnisse des friendlyeats-web-Repositorys. Auch wenn Sie diese Verzeichnisse für dieses Codelab nicht benötigen, ist es hilfreich zu wissen, was sie sind.

• nextjs-start: Enthält den Startcode für das vollständige Codelab „Firebase in eine Next.js-App einbinden“.
• nextjs-end: enthält den Lösungscode für die fertige Web-App.

Codelab-Quelle in das neue Repository kopieren

So kopieren Sie das Verzeichnis nextjs-step10 in Ihr eigenes Repository:

1. Öffnen Sie in IDX das Terminal über Menü > Terminal > Neues Terminal.
2. Mit dem npm-Paket giget können Sie nur das Verzeichnis nextjs-step10 aus dem Branch io-connect abrufen:

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
   

3. Änderungen lokal mit Git nachverfolgen:

   git add -A
   git commit -m "codelab starting point"
   git branch -M main
   git push -u origin main
   

Jetzt sollte der Startcode in Ihrem GitHub-Repository angezeigt werden.

3. Starter-Codebasis prüfen

In diesem Abschnitt sehen Sie sich einige Bereiche des Starter-Codes der App an, denen Sie in diesem Codelab Funktionen hinzufügen.

Ordner- und Dateistruktur

Die folgende Tabelle enthält eine Übersicht über die Ordner- und Dateistruktur der App:

Server- und Clientkomponenten

Die App ist eine Next.js-Webanwendung, die den App Router verwendet. Serverseitiges Rendering wird in der gesamten App verwendet. Die Datei src/app/page.js ist beispielsweise eine Serverkomponente, die für die Hauptseite zuständig ist. Die Datei src/components/RestaurantListings.jsx ist eine Clientkomponente, die durch die Anweisung "use client" am Anfang der Datei gekennzeichnet ist.

Importanweisungen

In einigen Dateien finden Sie möglicherweise Importanweisungen wie die folgenden:

import RatingPicker from "@/src/components/RatingPicker.jsx";

In der App wird das Symbol @ verwendet, um umständliche relative Importpfade zu vermeiden. Dies wird durch Pfad-Aliasse ermöglicht.

Firebase-spezifische APIs

Der gesamte Firebase API-Code befindet sich im Verzeichnis src/lib/firebase. Die einzelnen React-Komponenten importieren die umschlossenen Funktionen dann aus dem Verzeichnis src/lib/firebase, anstatt Firebase-Funktionen direkt zu importieren.

Simulierte Daten

Die Datei src/lib/randomData.js enthält Mock-Daten für Restaurants und Rezensionen. Die Daten aus dieser Datei werden im Code in der Datei src/lib/fakeRestaurants.js zusammengestellt.

4. Das Firebase-Projekt einrichten

In diesem Abschnitt richten Sie ein Firebase-Projekt ein und verknüpfen eine Firebase-Web-App damit. Außerdem richten Sie die Firebase-Dienste ein, die von der Beispiel-Web-App verwendet werden.

Firebase-Projekt erstellen

1. Melden Sie sich in der Firebase-Konsole mit demselben Google-Konto an, das Sie im vorherigen Schritt verwendet haben.
2. Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B. FriendlyEats Codelab).
   
3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Firebase-Tarif upgraden

Wenn Sie Firebase App Hosting und Cloud Storage for Firebase verwenden möchten, muss Ihr Firebase-Projekt den Blaze-Tarif (Pay as you go) nutzen. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft ist.

• Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode wie eine Kreditkarte erforderlich.
• Wenn Sie neu bei Firebase und Google Cloud sind, können Sie prüfen, ob Sie Anspruch auf ein Guthaben von 300$und ein Cloud-Rechnungskonto für den kostenlosen Testzeitraum haben.
• Wenn Sie dieses Codelab im Rahmen einer Veranstaltung durchführen, fragen Sie den Organisator, ob Cloud-Guthaben verfügbar ist.

So führen Sie für Ihr Projekt ein Upgrade auf den Tarif „Blaze“ durch:

1. Wählen Sie in der Firebase Console die Option zum Upgraden Ihres Abos aus.
2. Wählen Sie den Blaze-Tarif aus. Folgen Sie der Anleitung auf dem Bildschirm, um ein Cloud-Rechnungskonto mit Ihrem Projekt zu verknüpfen.
   Wenn Sie im Rahmen dieses Upgrades ein Cloud-Rechnungskonto erstellen mussten, müssen Sie möglicherweise zur Firebase-Konsole zurückkehren, um das Upgrade abzuschließen.

5. App-Hosting-Backend erstellen

In diesem Abschnitt richten Sie ein App Hosting-Backend ein, um einen Branch in Ihrem Git-Repository zu beobachten. Außerdem konfigurieren Sie alle Dienste, mit denen das Backend kommunizieren wird.

Am Ende dieses Abschnitts haben Sie ein App Hosting-Backend, das mit Ihrem Repository in GitHub verbunden ist. Es wird automatisch neu erstellt und eine neue Version Ihrer App wird bereitgestellt, wenn Sie einen neuen Commit in Ihren main-Branch übertragen.

Backend erstellen

1. Rufen Sie in der Firebase Console die App Hosting-Seite auf:
2. Klicken Sie auf Jetzt loslegen, um den Erstellungsvorgang für das Back-End zu starten.
3. Folgen Sie der Anleitung, um das zuvor erstellte GitHub-Repository zu importieren und zu verbinden.
4. Bereitstellungseinstellungen festlegen:
   • Behalten Sie das Stammverzeichnis als / bei.
   • Stelle den Live-Zweig auf main ein.
   • Automatische Roll-outs aktivieren
5. Geben Sie Ihrem Backend den Namen friendlyeats-codelab oder einen Namen Ihrer Wahl. Dies wird Teil der Domain, über die auf das Backend zugegriffen wird.
   Bei diesem Workflow wird auch automatisch eine Firebase Web-App in Ihrem Firebase-Projekt erstellt. Später in diesem Codelab verwenden Sie die Konfigurationswerte dieser Web-App, um Ihre Codebasis mit Ihrem Firebase-Projekt zu verbinden.
6. Klicken Sie auf Fertigstellen und bereitstellen. Nach kurzer Zeit werden Sie zu einer neuen Seite weitergeleitet, auf der Sie den Status Ihres neuen App Hosting-Back-Ends sehen.
7. Kopieren Sie im App-Hosting-Dashboard Ihre neue Domain.
   Sie hat ein Muster wie BACKEND_ID--PROJECT_ID.REGION.hosted.app. Sie benötigen diese Domain später, um die Firebase-Authentifizierung einzurichten.

Es kann einige Minuten dauern, bis die Domain funktioniert, da DNS-Änderungen und die Erstellung von SSL-Zertifikaten Zeit in Anspruch nehmen. Während Ihr Backend erstellt wird, können Sie mit der Einrichtung des restlichen Firebase-Projekts und der Konfiguration Ihres Backends fortfahren (nächste Schritte dieses Codelabs).

Jedes Mal, wenn Sie einen neuen Commit in den main-Branch Ihres GitHub-Repositorys übertragen, wird in der Firebase-Konsole ein neuer Build und Roll-out gestartet. Ihre Website wird automatisch aktualisiert, sobald der Roll-out abgeschlossen ist.

6. Andere Firebase-Dienste einrichten

In diesem Codelab geht es zwar nur um Firebase App Hosting und die Gemini API, aber die funktionierende Web-App erfordert andere Firebase-Dienste. Der Code, mit dem alle diese Dienste in Ihrer App funktionieren, ist Teil der Codebasis, die Sie in Ihr eigenes GitHub-Repository kopiert haben. Sie müssen diese Dienste jedoch weiterhin in Ihrem Firebase-Projekt einrichten.

Authentifizierung einrichten

1. Rufen Sie in der Firebase Console Authentifizierung auf.
2. Klicken Sie auf Jetzt starten.
3. Klicken Sie in der Spalte Zusätzliche Anbieter auf Google > Aktivieren.
   1. Geben Sie im Textfeld Öffentlicher Name für Projekt einen Namen ein, z. B. My FriendlyEatsCodelab app.
   2. Wählen Sie im Drop-down-Menü Support-E-Mail-Adresse für Projekt Ihre E-Mail-Adresse aus.
   3. Klicken Sie auf Speichern.
4. Klicken Sie auf der Seite Authentifizierung auf den Tab Einstellungen.
   1. Klicken Sie im Menü auf der linken Seite auf Autorisierte Domains.
   2. Klicken Sie auf Domain hinzufügen und fügen Sie dann die neu erstellte App-Hosting-Domain hinzu (sie endet mit .hosted.app).
   3. Klicken Sie zum Speichern auf Hinzufügen.

Cloud Firestore einrichten

1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Firestore-Datenbank aus.
2. Klicken Sie auf Datenbank erstellen.
3. Belassen Sie die Database ID (Datenbank-ID) auf (default).
4. Wählen Sie einen Speicherort für Ihre Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort auswählen, der sich in der Nähe Ihrer Nutzer befindet.
5. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen Sie eine App nicht öffentlich, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
6. Klicken Sie auf Erstellen.

Cloud Storage for Firebase einrichten

1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Storage aus.
2. Klicken Sie auf Jetzt starten.
3. Wählen Sie einen Standort für Ihren standardmäßigen Storage-Bucket aus.
   Für Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 kann die kostenlose Stufe für Google Cloud Storage genutzt werden. Für Buckets an allen anderen Standorten gelten die Preise und die Nutzung von Google Cloud Storage.
4. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen Sie keine App öffentlich, ohne Sicherheitsregeln für Ihren Storage-Bucket hinzuzufügen.
5. Klicken Sie auf Erstellen.

7. Webanwendung konfigurieren

Nachdem Sie ein Firebase-Projekt erstellt und alle in Ihrer App verwendeten Firebase-Dienste aktiviert haben, können Sie in IDX mit der Konfiguration Ihrer Web-App für die Verwendung dieser Dienste beginnen.

In der Firebase CLI in IDX anmelden

In IDX sind Node.js und die Firebase CLI bereits installiert. Sie können die Installation also überspringen und direkt mit der Einrichtung der CLI beginnen.

1. Führen Sie im Terminal in IDX die folgenden Befehle aus, um die CLI für die Verwendung des Firebase-Projekts zu konfigurieren, das Sie zuvor erstellt haben:

   firebase login --no-localhost
   firebase use --add
   

   Geben Sie bei Aufforderung codelab als Alias ein.
2. Geben Sie Y oder N ein, je nachdem, ob Firebase Daten erheben soll. Beide Optionen funktionieren für dieses Codelab.
3. Wählen Sie in Ihrem Browser Ihr Google-Konto aus und klicken Sie dann auf Zulassen.

Sicherheitsregeln und Indexe bereitstellen

Der Code, den Sie in Ihr GitHub-Repository kopiert haben, enthält bereits Sätze von Sicherheitsregeln für Firestore (in firestore.rules) und für Cloud Storage für Firebase (in storage.rules). Nachdem Sie die Sicherheitsregeln bereitgestellt haben, sind die Daten in Ihrer Datenbank und Ihrem Bucket besser vor Missbrauch geschützt.

Sie können die CLI auch verwenden, um eine Reihe von Indexen für Firestore (in firestore.indexes.json) bereitzustellen, um erweiterte Abfragen zu ermöglichen.

1. Führen Sie im Terminal in IDX den folgenden Befehl aus, um diese Sicherheitsregeln und Indexe bereitzustellen:

   firebase deploy --only firestore,storage
   

2. Wenn Sie gefragt werden: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", drücken Sie Enter, um Ja auszuwählen.

Firebase-Konfiguration zu Ihrem Web-App-Code hinzufügen

1. Gehen Sie in der Firebase Console so vor:
   1. Rufen Sie die Projekteinstellungen auf.
   2. Scrollen Sie nach unten zum Bereich Meine Apps und wählen Sie dann die App mit demselben Namen wie Ihr App Hosting-Backend aus.
   3. Wählen Sie unter SDK-Einrichtung und -Konfiguration die Option Konfiguration aus und kopieren Sie dann die Eigenschaften der Variablen firebaseConfig und ihre Werte.
2. Gehen Sie in IDX so vor:
   1. Öffnen Sie die Datei apphosting.yaml. Hier richten Sie Ihre Umgebungsvariablen in App Hosting sowie Secrets und die Laufzeitkonfiguration ein.
   2. Ersetzen Sie die angegebenen Umgebungsvariablenwerte durch die Konfigurationswerte, die Sie aus der Firebase Console kopiert haben.Beispiel (durch Ihre eigenen Werte ersetzen):

      runConfig:
          minInstances: 0
          maxInstances: 2
      env:
          # Get these values from the Firebase console
          - variable: NEXT_PUBLIC_FIREBASE_API_KEY
              value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
          - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
              value: project-id.firebaseapp.com
          - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
              value: project-id
          - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
              value: project-id.firebasestorage.app
          - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
              value: 111111111111
          - variable: NEXT_PUBLIC_FIREBASE_APP_ID
              value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
      

   3. Speichern Sie die Datei. Führen Sie dann im Terminal in IDX die folgenden Befehle aus, um die Änderungen an GitHub zu übertragen:

      git commit -a -m "Setup Firebase Config"
      
      git push
      

3. Kehren Sie zur Firebase Console zurück, rufen Sie die App Hosting-Seite auf und gehen Sie dann so vor:
   1. Klicken Sie für Ihr Backend auf Dashboard ansehen.
   2. Beachten Sie, dass durch Ihren Git-Push ein neuer Build ausgelöst wurde. Es dauert etwa 3 Minuten, bis der Build abgeschlossen und die Bereitstellung in Cloud Run erfolgt ist. Sie können den Fortschritt des Vorgangs verfolgen, indem Sie auf den Chip build-ID klicken.
   3. Aktualisieren Sie die Konsolenseite, um zu prüfen, ob die Einführung abgeschlossen ist. Klicken Sie nach Abschluss des Vorgangs unter Domains auf den Link für Ihre Domain (endet mit .hosted.app), um sie zu öffnen und die neu bereitgestellte App anzusehen.

Sie haben die erste Web-App bereitgestellt. Sehen wir uns das genauer an.

8. Web-App in einem Browser ausprobieren

Prüfen, ob Sie sich mit Firebase Authentication anmelden können

1. Aktualisieren Sie in Ihrem Browser die Seite, auf der Ihre Web-App angezeigt wird.
2. Klicken Sie auf Sign in with Google (Über Google anmelden).
3. Melden Sie sich ab und wieder an. Die Seite wird in Echtzeit aktualisiert, ohne dass sie neu geladen werden muss. Sie können diesen Schritt mit verschiedenen Nutzern wiederholen.
4. Optional: Aktualisieren Sie die Web-App in Ihrem Browser. Klicken Sie mit der rechten Maustaste auf die Web-App, wählen Sie Seitenquelltext anzeigen aus und suchen Sie nach dem Anzeigenamen. Es ist im Roh-HTML-Quellcode enthalten, der vom Server zurückgegeben wird.

Restaurantinformationen ansehen

Die Web-App enthält Beispieldaten für Restaurants und Rezensionen.

Wenn Sie Mock-Restaurantdaten in Ihre Cloud Firestore-Datenbank einfügen möchten, wählen Sie  > Beispielrestaurants hinzufügen aus.

Prüfen, ob die Restaurantinformationen beim Ausführen des Servers geladen werden

Wenn Sie das Next.js-Framework verwenden, ist es möglicherweise nicht offensichtlich, wann Daten zur Serverlaufzeit oder zur clientseitigen Laufzeit geladen werden.

So prüfen Sie, ob Restaurant-Einträge zur Serverlaufzeit geladen werden:

1. Öffnen Sie in der Web-App die Entwicklertools und deaktivieren Sie JavaScript.
2. Aktualisieren Sie die Web-App. Die Restaurantinformationen werden weiterhin geladen. Restaurantinformationen werden in der Serverantwort zurückgegeben. Wenn JavaScript aktiviert ist, werden die Restaurantinformationen über den clientseitigen JavaScript-Code bereitgestellt.
3. Aktivieren Sie JavaScript in den Entwicklertools wieder.
4. Wählen Sie in der Web-App  > Beispielrestaurants hinzufügen aus. Wenn die Snapshot-Funktion richtig implementiert ist, werden die Restaurants in Echtzeit ohne Seitenaktualisierung angezeigt.

Rezensionen für ein Restaurant hinzufügen

So fügen Sie eine Rezension hinzu und prüfen, ob sie in Cloud Firestore eingefügt wurde:

1. Aktualisieren Sie die Web-App und wählen Sie auf der Startseite ein Restaurant aus.
2. Klicken Sie auf der Seite des Restaurants auf .
3. Wählen Sie eine Bewertung aus.
4. Schreiben Sie eine Rezension.
5. Klicken Sie auf Senden. Ihre Rezension wird oben in der Liste der Rezensionen angezeigt.

9. Restaurantrezensionen mit generativer KI zusammenfassen

In diesem Abschnitt fügen Sie eine Funktion für die Zusammenfassung von Rezensionen hinzu, damit Nutzer schnell sehen können, was andere über ein Restaurant denken, ohne jede Rezension lesen zu müssen.

Gemini API-Schlüssel in Cloud Secret Manager speichern

App Hosting ist in Cloud Secret Manager eingebunden, damit Sie vertrauliche Werte wie API-Schlüssel sicher speichern können.

1. Zur Verwendung der Gemini API benötigen Sie einen API-Schlüssel. Erstellen Sie einen Schlüssel in Google AI Studio.
   Wählen Sie bei Aufforderung dasselbe Projekt aus, das Sie für dieses Codelab verwendet haben. Im Hintergrund ist ein Firebase-Projekt ein Google Cloud-Projekt.
2. Führen Sie im Terminal in IDX den folgenden Befehl aus, um ein neues Secret zu erstellen:

   firebase apphosting:secrets:set gemini-api-key
   

3. Wenn Sie nach dem Secret-Wert gefragt werden, kopieren Sie Ihren Gemini API-Schlüssel aus Google AI Studio und fügen Sie ihn ein.
4. Wenn Sie gefragt werden: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", drücken Sie Enter, um Ja auszuwählen.
5. Wenn Sie gefragt werden, ob das neue Secret zu apphosting.yaml hinzugefügt werden soll, geben Sie Y ein, um die Frage zu bejahen, und drücken Sie dann Enter, um GEMINI_API_KEY als Namen der Umgebungsvariable auszuwählen.

Ihr Gemini-API-Schlüssel wird jetzt sicher in Cloud Secret Manager gespeichert und ist für Ihr App-Hosting-Backend zugänglich. Sie können den Wert auch im Secrets Manager-Dashboard in der Google Cloud Console aufrufen.

6. Öffnen Sie die Datei apphosting.yaml. Der Name Ihres Secrets wurde aufgezeichnet, nicht aber die Werte. Die Datei sollte so aussehen:

   runConfig:
       minInstances: 0
       maxInstances: 2
   env:
       # Get these values from the Firebase console
       - variable: NEXT_PUBLIC_FIREBASE_API_KEY
           value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
       - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
           value: project-id.firebaseapp.com
       - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
           value: project-id
       - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
           value: project-id.firebasestorage.app
       - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
           value: 111111111111
       - variable: NEXT_PUBLIC_FIREBASE_APP_ID
           value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
       - variable: GEMINI_API_KEY
           secret: gemini-api-key
   

Komponente für die Rezensionszusammenfassung implementieren

1. Öffnen Sie src/components/Reviews/ReviewSummary.jsx in IDX.
2. Ersetzen Sie die Funktion GeminiSummary durch den folgenden Code:

   export async function GeminiSummary({ restaurantId }) {
       const { firebaseServerApp } = await getAuthenticatedAppForUser();
       const reviews = await getReviewsByRestaurantId(
           getFirestore(firebaseServerApp),
           restaurantId
       );
   
       const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
       const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
       safety_settings: [
           {
           category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
           threshold: HarmBlockThreshold.BLOCK_NONE,
           },
       ],
       });
       const reviewSeparator = "@";
       const prompt = `
           Based on the following restaurant reviews,
           where each review is separated by a '${reviewSeparator}' character,
           create a one-sentence summary of what people think of the restaurant.
   
           Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
       `;
   
       try {
           const result = await model.generateContent(prompt);
           const response = await result.response;
           const text = response.text();
   
           return (
               <div className="restaurant__review_summary">
                   <p>{text}</p>
                   <p>✨ Summarized with Gemini</p>
               </div>
           );
       } catch (e) {
           console.error(e);
           return <p>Error contacting Gemini</p>;
       }
   }
   

3. Führen Sie im Terminal in IDX die folgenden Befehle aus, um einen Commit zu erstellen und ihn in Ihr GitHub-Repository zu übertragen.

   git commit -a -m "Use AI to summarize reviews"
   
   git push
   

4. Öffnen Sie in der Firebase Console die Seite App Hosting und warten Sie, bis die neue Bereitstellung abgeschlossen ist.
5. Klicken Sie in Ihrem Browser auf eine Restaurantkarte. Oben auf dem Bildschirm sehen Sie eine Zusammenfassung aller Rezensionen für das Restaurant in einem Satz.
6. Fügen Sie eine neue Rezension hinzu und aktualisieren Sie die Seite. Die Zusammenfassung der Änderung sollte angezeigt werden.

10. Fazit

Glückwunsch! Sie haben gelernt, wie Sie mit Firebase App Hosting eine Next.js-App bereitstellen und die Gemini API verwenden, um Text zusammenzufassen. Konkret haben Sie Folgendes verwendet:

• Firebase App Hosting, um Ihren Next.js-Code automatisch zu erstellen und bereitzustellen, wenn Sie ihn in einen konfigurierten GitHub-Branch übertragen.
• Cloud Secret Manager (in App Hosting integriert), um Ihren Gemini API-Schlüssel sicher zu speichern, damit Sie generative KI-Funktionen in Ihre App einbauen können.

Weitere Informationen

Im vollständigen Codelab „Firebase in eine Next.js-App einbinden“ erfahren Sie, wie wir Firebase Authentication, Cloud Firestore und Cloud Storage für Firebase in diese App eingebunden haben.

Weitere Codelabs:

• Cloud Firestore Web-Codelab
• Codelab zu Firebase Angular Web Frameworks
• Firestore-Daten mit Firebase-Sicherheitsregeln schützen