Dynamische Inhalte bereitstellen und Mikrodienste mit Cloud Functions hosten

Verknüpfen Sie Cloud Functions mit Firebase Hosting, um Ihre dynamischen Inhalte zu generieren und bereitzustellen oder REST APIs als Mikrodienste zu erstellen.

Cloud Functions for Firebase ermöglicht die automatische Ausführung von Backend -Code als Reaktion auf HTTPS-Anfragen. 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 die in Firebase Hosting eingebunden sind, finden Sie in unserer Übersicht zu serverlosen Diensten.

Cloud Functions mit Firebase Hosting verbinden

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

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

Schritt 1: einrichten Cloud Functions

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

    Eine detaillierte Anleitung zur Installation der CLI und zur Initialisierung Hosting finden Sie im Leitfaden Erste Schritte mit Hosting.

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

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

    • Wenn Sie nicht eingerichtet habenCloud Functions:

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

        firebase init functions

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

      3. Prüfen Sie, ob sich in Ihrem lokalen Projektverzeichnis ein Verzeichnis functions 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 namens bigben erstellt, die auf HTTPS-Anfragen mit einem 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 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 lokale URL auf die Funktion zu, 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 auf diese HTTPS-Funktion über eine Firebase Hosting URL zugreifen können, damit sie dynamische Inhalte für Ihre von Firebase gehostete Website generieren kann.

Schritt 3:HTTPS-Anfragen an Ihre Funktion weiterleiten

Mit Umschreibungsregeln 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 weiterleiten, um die Funktion bigben auszuführen.

  1. Öffnen Sie die Datei firebase.json.

  2. Fügen Sie die folgende rewrite-Konfiguration im 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. Bestätigen Sie, dass 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 CLI zurückgegeben wird (in der Regel localhost:5000), und fügen Sie bigben an die URL an, z. B.: http://localhost:5000/bigben

  4. Wiederholen 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, indem Sie eine der folgenden Regionen auswählen:

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

Weitere Informationen zu Umschreibungsregeln finden Sie auf der Hosting Konfigurationsseite für mehr Details. Sie können sich auch über die Prioritätsreihenfolge von Antworten für verschiedene Hosting Konfigurationen informieren.

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

Schritt 4:Funktion bereitstellen

Sobald 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, mit denen Sie das Skalierungsverhalten für Funktionen steuern können, die in der Produktion ausgeführt werden.

  1. Stellen Sie Ihre Funktion sowie Ihre Hosting Inhalte und Konfiguration auf Ihrer Website bereit, indem Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projekt Verzeichnisses ausführen:

    firebase deploy --only functions,hosting

  2. Greifen Sie unter den folgenden URLs auf Ihre Live-Website und Ihre Funktion zu:

    • 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 Webanwendungen 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 im 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. Und ein weiterer Endpunkt, um die Anzahl der BONG 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 der Datei firebase.json alle Anfragen an die Funktion app weiter. Mit dieser Umschreibung kann Express.js den verschiedenen von uns konfigurierten Unterpfad bereitstellen (in diesem Beispiel / und /api).

    {
 "hosting": {
   // ...

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

Middleware hinzufügen

In unserem Beispiel können Sie jetzt, da Sie Express.js verwenden, auf die übliche Weise Express.js-Middleware hinzufügen. Sie können beispielsweise CORS Anfragen an unseren Endpunkten aktivieren.

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

    npm install --save cors

  2. Öffnen Sie die Datei /functions/index.js und fügen Sie cors so zu Ihrer Express.js-App 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 FunctionsDokumentation.

Nächste Schritte