Catch up on highlights from Firebase at Google I/O 2023. Learn more

Stellen Sie mit Cloud Functions dynamische Inhalte bereit und hosten Sie Microservices

Kombinieren Sie Cloud Functions mit Firebase Hosting, um Ihre dynamischen Inhalte zu generieren und bereitzustellen, oder erstellen Sie REST-APIs als Microservices.

Mit Cloud Functions for Firebase können Sie Backend-Code als Reaktion auf HTTPS-Anfragen automatisch ausführen. Ihr Code wird in der Cloud von Google gespeichert und in einer verwalteten Umgebung ausgeführt. Sie müssen Ihre eigenen Server nicht verwalten und skalieren.

Beispiel-Anwendungsfälle und Beispiele für in Firebase Hosting integrierte Cloud-Funktionen finden Sie in unserer serverlosen Übersicht .

Verbinden Sie Cloud Functions mit Firebase Hosting

Dieser Abschnitt enthält ein exemplarisches Beispiel für die Verbindung einer Funktion mit Firebase Hosting.

Beachten Sie, dass Sie zur Verbesserung der Leistung bei der Bereitstellung dynamischer Inhalte optional Ihre Cache-Einstellungen optimieren können.

Schritt 1: Cloud-Funktionen einrichten

  1. Stellen Sie sicher, dass Sie über die neueste Version der Firebase-CLI verfügen und Firebase Hosting initialisiert haben.

    Ausführliche Anweisungen zur Installation der CLI und zur Initialisierung des Hostings finden Sie im Leitfaden „Erste Schritte“ für Hosting .

  2. Stellen Sie sicher, dass Sie Cloud Functions eingerichtet haben:

    • Wenn Sie Cloud Functions bereits eingerichtet haben, können Sie mit Schritt 2: Erstellen und Testen einer HTTPS-Funktion fortfahren.

    • Wenn Sie Cloud Functions nicht eingerichtet haben:

      1. Initialisieren Sie Cloud Functions, indem Sie den folgenden Befehl im Stammverzeichnis Ihres Projektverzeichnisses ausführen:

        firebase init functions

      2. Wenn Sie dazu aufgefordert werden, wählen Sie JavaScript aus (in diesem exemplarischen Beispiel wird JS verwendet).

      3. Überprüfen Sie, ob sich in Ihrem lokalen Projektverzeichnis ein functions befindet (erstellt durch den Firebase-Befehl, den Sie gerade ausgeführt haben). In diesem functions befindet sich der Code für Cloud Functions.

Schritt 2: Erstellen und testen Sie eine HTTPS-Funktion für Ihre Hosting-Site

  1. Öffnen Sie /functions/index.js in Ihrem bevorzugten Editor.

  2. Ersetzen Sie den Inhalt der Datei durch den folgenden Code.

    Dieser Code erstellt eine HTTPS-Funktion (mit dem Namen bigben ), die auf HTTPS-Anfragen mit einem BONG für jede Stunde des Tages antwortet, genau wie eine Uhr.

    const functions = require('firebase-functions');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1  // London is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

  3. Testen Sie Ihre Funktionen lokal mit der Firebase Local Emulator Suite .

    1. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:

      firebase emulators:start

    2. Greifen Sie über die von der CLI zurückgegebene lokale URL auf die Funktion zu, zum Beispiel: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

Besuchen Sie die Cloud Functions-Dokumentation, um mehr über HTTPS-Anfragen zu erfahren.

Im nächsten Schritt erfahren Sie, wie Sie über eine Firebase-Hosting-URL auf diese HTTPS-Funktion zugreifen, damit dynamische Inhalte für Ihre von Firebase gehostete Website generiert werden können.

Schritt 3: Leiten Sie HTTPS-Anfragen an Ihre Funktion

Mit Rewrite-Regeln können Sie Anfragen, die bestimmten Mustern entsprechen, an ein einzelnes Ziel weiterleiten. Die folgenden Schritte zeigen Ihnen, wie Sie alle Anfragen vom Pfad ../bigben auf Ihrer Hosting-Site so leiten, dass sie die bigben Funktion ausführen.

  1. Öffnen Sie Ihre firebase.json -Datei .

  2. Fügen Sie im Abschnitt hosting die folgende rewrite Konfiguration hinzu:

    "hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben",
    "region": "us-central1"  // optional (see note below)
    "pinTag": true           // optional (see note below)
  } ]
}

  3. Bestätigen Sie, dass Ihre Weiterleitung wie erwartet funktioniert, indem Sie sie erneut mit den Firebase-Emulatoren testen.

    1. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:

      firebase emulators:start

    2. Besuchen Sie die lokal gehostete URL für Ihre Website, wie sie von der CLI zurückgegeben wird (normalerweise localhost:5000 ), aber hängen Sie die URL mit bigben an, etwa so: http://localhost:5000/bigben

  4. Iterieren Sie Ihre Funktion und ihre Funktionalität für Ihre Website. Verwenden Sie die Firebase-Emulatoren, um diese Iterationen zu testen.

Besuchen Sie die Hosting-Konfigurationsseite für weitere Details zu Rewrite-Regeln . Sie können sich auch über die Prioritätsreihenfolge der Antworten für verschiedene Hosting-Konfigurationen informieren.

Beachten Sie, dass Sie zur Verbesserung der Leistung bei der Bereitstellung dynamischer Inhalte optional Ihre Cache-Einstellungen optimieren können.

Schritt 4: Stellen Sie Ihre Funktion bereit

Sobald Ihre Funktion im Emulator wie gewünscht funktioniert, können Sie mit der Bereitstellung, dem Testen und der Ausführung mit echten Projektressourcen fortfahren. Dies ist ein guter Zeitpunkt, über die Festlegung von Laufzeitoptionen nachzudenken, um das Skalierungsverhalten für in der Produktion ausgeführte Funktionen zu steuern .

  1. Stellen Sie Ihre Funktion sowie Ihren Hosting-Inhalt und Ihre Konfiguration auf Ihrer Site bereit, indem Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses ausführen:

    firebase deploy --only functions,hosting

  2. Greifen Sie über die folgenden URLs auf Ihre Live-Site und Ihre Funktion zu:

    • Ihre Firebase-Subdomains:
      PROJECT_ID .web.app/bigben und PROJECT_ID .firebaseapp.com/bigben

    • Alle verbundenen benutzerdefinierten Domänen :
      CUSTOM_DOMAIN /bigben

Verwenden Sie ein Webframework

Sie können Web-Frameworks wie Express.js in Cloud Functions verwenden, um den dynamischen Inhalt Ihrer App bereitzustellen und komplexe Web-Apps einfacher zu schreiben.

Der folgende Abschnitt enthält ein exemplarisches Beispiel für die Verwendung von Express.js mit Firebase Hosting und Cloud Functions.

  1. Installieren Sie Express.js in Ihrem lokalen Projekt, indem Sie den folgenden Befehl in Ihrem functions ausführen:

    npm install express --save

  2. Öffnen Sie Ihre Datei /functions/index.js , importieren und initialisieren Sie dann Express.js:

    const functions = require('firebase-functions');
const express = require('express');
const app = express();

  3. Fügen Sie die folgenden zwei Endpunkte hinzu:

    1. Fügen Sie den ersten Endpunkt hinzu, um den Index unserer Website unter / bereitzustellen.

      app.get('/', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.send(`
    <!doctype html>
    <head>
      <title>Time</title>
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js"></script>
    </head>
    <body>
      <p>In London, the clock strikes:
        <span id="bongs">${'BONG '.repeat(hours)}</span></p>
      <button onClick="refresh(this)">Refresh</button>
    </body>
  </html>`);
});

    2. Und ein weiterer Endpunkt, um die BONG Zählung als API im JSON-Format unter /api zurückzugeben:

      app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

  4. Exportieren Sie die Express.js-App als HTTPS-Funktion:

    exports.app = functions.https.onRequest(app);

  5. Leiten Sie in Ihrer Datei firebase.json alle Anfragen an die app Funktion. Durch diese Umschreibung kann Express.js die verschiedenen von uns konfigurierten Unterpfade bedienen (in diesem Beispiel / und /api ).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Fügen Sie Middleware hinzu

Wenn Sie unser Beispiel fortsetzen, können Sie nun, da Sie Express.js verwenden, die Express.js-Middleware auf die übliche Weise hinzufügen. Sie können beispielsweise CORS- Anfragen auf unseren Endpunkten aktivieren.

  1. Installieren Sie die cors -Middleware, indem Sie den folgenden Befehl ausführen:

    npm install --save cors

  2. Öffnen Sie Ihre /functions/index.js und fügen Sie dann cors zu Ihrer Express.js-App hinzu, etwa so:

    const cors = require('cors')({origin: true});
app.use(cors);

Besuchen Sie die Cloud Functions-Dokumentation, um mehr über die Verwendung von Firebase mit Express-Apps und Middleware-Modulen zu erfahren.

Nächste Schritte