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 Ihnen 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: Um die Leistung bei der Bereitstellung dynamischer Inhalte zu verbessern, können Sie optional Ihre Cache-Einstellungenanpassen.

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, können Sie mit Schritt 2: HTTPS-Funktion erstellen und testen fortfahren.Cloud Functions

    • Wenn Sie nicht eingerichtet haben:Cloud 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 Aufforderung JavaScript aus. In diesem Beispiel wird JS verwendet.

      3. Prüfen Sie, ob sich in Ihrem lokalen Projektverzeichnis ein Verzeichnis functions befindet. Es wurde durch den gerade ausgeführten Firebase-Befehl erstellt. 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 Umschreiberegeln 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 unter dem Abschnitt 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. 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: 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.

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 Umschreiberegeln 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: Um die Leistung bei der Bereitstellung dynamischer Inhalte zu verbessern, können Sie optional Ihre Cache-Einstellungenanpassen.

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 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 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