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 automatisch Back-End-Code als Reaktion auf HTTPS-Anfragen ausführen. Ihr Code wird in der 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, die in Firebase Hosting eingebunden sind, finden Sie in unserer Übersicht über serverlose Funktionen.

Cloud Functions mit Firebase Hosting verbinden

In diesem Abschnitt finden Sie ein Beispiel für die Verbindung einer Funktion mit Firebase Hosting.

Zur Verbesserung der Leistung 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 ausführliche Anleitung zum Installieren der Befehlszeile und zum Initialisieren von Hosting finden Sie im Einstiegsleitfaden 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 im Stammverzeichnis Ihres Projektverzeichnisses den folgenden Befehl ausführen:

        firebase init functions

      2. Wählen Sie auf Aufforderung JavaScript aus. In diesem Beispiel wird JS verwendet.

      3. Prüfen Sie, ob sich im lokalen Projektverzeichnis ein functions-Verzeichnis befindet, das durch den gerade ausgeführten Firebase-Befehl erstellt wurde. In diesem Verzeichnis functions 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. Funktionen lokal mit dem Firebase Local Emulator Suite testen

    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 Befehlszeile zurückgegeben wird, z. B. http://localhost:5001/PROJECT_ID/us-central1/bigben.

Weitere Informationen zu HTTPS-Anfragen findest du 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 von Firebase gehostete Website generiert werden können.

Schritt 3:HTTPS-Anfragen an Ihre Funktion weiterleiten

Mit Umschreibregeln 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 an die bigben-Funktion weiterleiten.

  1. Öffnen Sie die Datei firebase.json.

  2. Fügen Sie unter hosting die folgende rewrite-Konfiguration 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, ob die Weiterleitung wie erwartet funktioniert, indem Sie sie noch einmal mit den Firebase-Emulatoren testen.

    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 Befehlszeile zurückgegeben wird (normalerweise localhost:5000), fügen Sie aber bigben an die URL an, z. B.: http://localhost:5000/bigben

  4. Optimieren 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 zusammenstellen. Wählen Sie dazu eine der folgenden Regionen aus:

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

Auf der Konfigurationsseite Hosting finden Sie weitere Informationen zu Umschreiberegeln. Außerdem erfahren Sie mehr über die Prioritätsreihenfolge der Antworten für verschiedene Hosting-Konfigurationen.

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

Schritt 4:Funktion bereitstellen

Sobald Ihre Funktion im Emulator wie gewünscht funktioniert, können Sie mit dem Bereitstellen, Testen und Ausführen mit echten Projektressourcen fortfahren. Jetzt ist ein guter Zeitpunkt, um Laufzeitoptionen festzulegen, um das Skalierungsverhalten für Funktionen zu steuern, die in der Produktion ausgeführt werden.

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

    firebase deploy --only functions,hosting

  2. Über die folgenden URLs können Sie 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 erstellen.

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. Führen Sie dazu den folgenden Befehl in Ihrem Verzeichnis functions aus:

    npm install express --save

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

    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. Und hier ist ein weiterer Endpunkt, über den die Anzahl der BONG-Elemente als API im JSON-Format unter /api zurückgegeben wird:

      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-Anwendung als HTTPS-Funktion:

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

  5. Leiten Sie in Ihrer firebase.json-Datei alle Anfragen an die app-Funktion weiter. Durch diese Umschreibung kann Express.js den von uns konfigurierten untergeordneten Pfad (in diesem Beispiel / und /api) bereitstellen.

    {
 "hosting": {
   // ...

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

Middleware hinzufügen

Angenommen, Sie verwenden jetzt Express.js. Dann können Sie wie gewohnt Express.js-Middleware hinzufügen. Sie können beispielsweise CORS-Anfragen an unseren Endpunkten 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 Ihrer Express.js-Anwendung cors hinzu.

    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