Dynamische Inhalte bereitstellen und Mikrodienste mit Cloud Functions hosten

Kombinieren Sie Cloud Functions mit Firebase Hosting, um dynamische Inhalte zu generieren und bereitzustellen oder REST APIs als Mikrodienste zu erstellen.

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

Beispiele für Anwendungsfälle und Beispiele für Cloud Functions in Kombination mit Firebase Hosting finden Sie in unserer Übersicht zu serverlosen Lösungen.

Cloud Functions mit Firebase Hosting verbinden

In diesem Abschnitt finden Sie ein Beispiel für das Herstellen einer Verbindung zwischen einer Funktion und Firebase Hosting.

Zur Verbesserung der Leistung bei der Bereitstellung dynamischer Inhalte können Sie optional Ihre Cache-Einstellungen anpassen.

Schritt 1:Cloud Functions einrichten

  1. Prüfen Sie, ob Sie die neueste Version der Firebase CLI haben und Firebase Hosting initialisiert haben.

    Eine detaillierte Anleitung zur Installation der CLI und zur Initialisierung von Hosting finden Sie in der Kurzanleitung für Hosting.

  2. Prüfen Sie, ob Sie Cloud Functions eingerichtet haben:

    • Wenn Sie Cloud Functions bereits eingerichtet haben, können Sie mit Schritt 2: HTTPS-Funktion erstellen und testen 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. Wählen Sie bei Aufforderung JavaScript aus (in diesem Beispiel wird JS verwendet).

      3. Prüfen Sie, ob sich in Ihrem lokalen Projektverzeichnis ein functions-Verzeichnis befindet (das durch den gerade ausgeführten Firebase-Befehl erstellt wurde). In diesem functions-Verzeichnis befindet sich der Code für Cloud Functions.

Schritt 2:HTTPS-Funktion für Ihre Hosting-Website erstellen und testen

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

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

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

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

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 dem Firebase Local Emulator Suite.

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

      firebase emulators:start

    2. Rufen Sie die Funktion über die lokale URL auf, die von der CLI zurückgegeben wird, z. B. http://localhost:5001/PROJECT_ID/us-central1/bigben.

Weitere Informationen zu HTTPS-Anfragen finden Sie in der Cloud Functions-Dokumentation.

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

Schritt 3:HTTPS-Anfragen direkt an Ihre Funktion weiterleiten

Mit Rewrite-Regeln können Sie Anfragen, die bestimmten Mustern entsprechen, an ein einzelnes Ziel weiterleiten. In den folgenden Schritten wird gezeigt, wie Sie alle Anfragen vom Pfad ../bigben auf Ihrer Hosting-Website so weiterleiten, dass die Funktion bigben ausgeführt wird.

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

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

    "hosting": {
  // ...

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

  3. Prüfen Sie noch einmal mit den Firebase-Emulatoren, ob Ihre Weiterleitung wie erwartet funktioniert.

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

      firebase emulators:start

    2. Rufen Sie die lokal gehostete URL für Ihre Website auf, die von der CLI zurückgegeben wird (normalerweise localhost:5000), hängen Sie aber bigben an die URL an, z. B.: http://localhost:5000/bigben

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

Für eine optimale Leistung sollten Sie Ihre Funktionen mit Hosting zusammenlegen. Wählen Sie dazu eine der folgenden Regionen aus:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1
verwenden.

Weitere Informationen zu Rewrite-Regeln finden Sie auf der Konfigurationsseite für Hosting. Weitere Informationen zur Prioritätsreihenfolge von Antworten für verschiedene Hosting-Konfigurationen

Zur Verbesserung der Leistung bei der Bereitstellung dynamischer Inhalte können Sie optional Ihre Cache-Einstellungen anpassen.

Schritt 4:Funktion bereitstellen

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

  1. Stellen Sie Ihre Funktion sowie die Inhalte und die Konfiguration von Hosting auf Ihrer Website bereit. Führen Sie dazu den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses aus:

    firebase deploy --only functions,hosting

  2. Sie können über die folgenden URLs auf Ihre Live-Website und Ihre Funktion zugreifen:

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

    • Alle verbundenen benutzerdefinierten Domains:
      CUSTOM_DOMAIN/bigben

Web-Framework verwenden

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.

Im folgenden Abschnitt finden Sie ein 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 Verzeichnis functions ausführen:

    npm install express --save

  2. Öffnen Sie die Datei /functions/index.js und importieren und initialisieren Sie Express.js:

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

  3. Fügen Sie die folgenden beiden 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. Ein weiterer Endpunkt gibt die Anzahl der BONG als API im JSON-Format unter /api zurück:

      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 Anfragen an die Funktion app weiter. Durch diese Überschreibung kann Express.js die verschiedenen konfigurierten Unterpfade (in diesem Beispiel / und /api) bereitstellen.

    {
 "hosting": {
   // ...

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

Middleware hinzufügen

Wenn Sie nun Express.js verwenden, können Sie Express.js-Middleware auf die übliche Weise hinzufügen. Sie können beispielsweise CORS-Anfragen für unsere Endpunkte aktivieren.

  1. Installieren Sie die cors-Middleware mit dem folgenden Befehl:

    npm install --save cors

  2. Öffnen Sie die Datei /functions/index.js und fügen Sie cors in Ihre Express.js-App ein, wie hier gezeigt:

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

Weitere Informationen zur Verwendung von Firebase mit Express-Apps und Middleware-Modulen finden Sie in der Cloud Functions-Dokumentation.

Nächste Schritte