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 automatisch Back-End-Code als Antwort auf HTTPS-Anfragen 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.

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

Verbinden Sie Cloud-Funktionen mit Firebase-Hosting

Dieser Abschnitt enthält ein exemplarisches Beispiel zum Verbinden einer Funktion mit Firebase Hosting.

Beachten Sie, dass Sie optional Ihre Cache-Einstellungen optimieren können, um die Leistung beim Bereitstellen dynamischer Inhalte zu verbessern.

Schritt 1: Cloud-Funktionen einrichten

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

    Ausführliche Anweisungen zum Installieren der Befehlszeilenschnittstelle und zum Initialisieren von Hosting finden Sie im Handbuch „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 fortfahren: HTTPS-Funktion erstellen und testen .

    • 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 Sie ein functions in Ihrem lokalen Projektverzeichnis haben (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 /functions/index.js in Ihrem bevorzugten Editor.

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

    Dieser Code erstellt eine HTTPS-Funktion (namens bigben ), die auf HTTPS-Anforderungen 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 auf die Funktion über die von der CLI zurückgegebene lokale URL zu, zum Beispiel: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

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

Der nächste Schritt führt Sie durch den Zugriff auf diese HTTPS-Funktion über eine Firebase-Hosting-URL , damit sie dynamische Inhalte für Ihre von Firebase gehostete Website generieren kann.

Schritt 3: Leiten Sie HTTPS-Anfragen an Ihre Funktion weiter

Mit Rewrite-Regeln können Sie Anforderungen, die mit bestimmten Mustern übereinstimmen, an ein einzelnes Ziel leiten. Die folgenden Schritte zeigen Ihnen, wie Sie alle Anfragen aus dem Pfad ../bigben auf Ihrer Hosting-Site weiterleiten, um die bigben Funktion auszuführen.

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

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

    "hosting": {
  // ...

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

  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. Wiederholen 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 von Antworten für verschiedene Hosting-Konfigurationen informieren.

Beachten Sie, dass Sie optional Ihre Cache-Einstellungen optimieren können, um die Leistung beim Bereitstellen dynamischer Inhalte zu verbessern.

Schritt 4: Stellen Sie Ihre Funktion bereit

Sobald Ihre Funktion im Emulator wie gewünscht funktioniert, können Sie sie mit echten Projektressourcen bereitstellen, testen und ausführen. Dies ist ein guter Zeitpunkt, um das Festlegen von Laufzeitoptionen in Betracht zu ziehen, um das Skalierungsverhalten für Funktionen zu steuern , die in der Produktion ausgeführt werden.

  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 unter den 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 Web-Framework

Sie können Web-Frameworks wie Express.js in Cloud Functions verwenden, um die dynamischen Inhalte 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-Funktionen.

  1. Installieren Sie Express.js in Ihrem lokalen Projekt, indem Sie den folgenden Befehl aus 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 firebase.json -Datei alle Anforderungen an die app -Funktion weiter. Diese Umschreibung ermöglicht es Express.js, die unterschiedlichen Unterpfade bereitzustellen, die wir konfiguriert haben (in diesem Beispiel / und /api ).

    {
 "hosting": {
   // ...

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

Fügen Sie Middleware hinzu

In Fortsetzung unseres Beispiels können Sie jetzt, da Sie Express.js verwenden, Express.js-Middleware auf die typische Weise hinzufügen. Beispielsweise können Sie 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 Datei /functions/index.js und fügen Sie dann cors wie folgt zu Ihrer Express.js-App hinzu:

    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