Google is committed to advancing racial equity for Black communities. See how.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Stellen Sie dynamische Inhalte bereit und hosten Sie Microservices mit Cloud-Funktionen

Koppeln Sie Cloud-Funktionen mit Firebase-Hosting, um Ihre dynamischen Inhalte zu generieren und bereitzustellen oder REST-APIs als Microservices zu erstellen.

Mit Cloud-Funktionen für Firebase können Sie Backend-Code als Antwort auf HTTPS-Anforderungen automatisch ausführen. Ihr Code wird in der Google-Cloud gespeichert und in einer verwalteten Umgebung ausgeführt. Sie müssen Ihre eigenen Server nicht verwalten und skalieren.

In unserer Übersicht ohne Server finden Sie beispielsweise Anwendungsfälle und Beispiele für Cloud-Funktionen, die in Firebase Hosting integriert sind.

Verbinden Sie Cloud-Funktionen mit Firebase-Hosting

Dieser Abschnitt enthält ein Beispiel für die Verbindung einer Funktion mit Firebase Hosting.

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

Schritt 1: Einrichten von Cloud-Funktionen

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

    Ausführliche Anweisungen zum Installieren der CLI und zum Initialisieren des Hostings finden Sie im Handbuch Erste Schritte für das Hosting .

  2. Stellen Sie sicher, dass Sie Cloud-Funktionen eingerichtet haben:

    • Wenn Sie Cloud-Funktionen bereits eingerichtet haben, können Sie mit Schritt 2 fortfahren : Erstellen und Testen einer HTTP-Funktion .

    • Wenn Sie keine Cloud-Funktionen eingerichtet haben:

      1. Initialisieren Sie Cloud-Funktionen, 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 Beispiel wird JS verwendet).

      3. Überprüfen Sie, ob sich in Ihrem lokalen Projektverzeichnis ein functions (erstellt mit dem gerade ausgeführten Firebase-Befehl). In diesem functions befindet sich der Code für Cloud-Funktionen.

Schritt 2: Erstellen und testen Sie eine HTTP-Funktion für Ihre Hosting-Site

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

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

    Dieser Code erstellt eine HTTP-Funktion ( bigben ), die wie eine Uhr auf HTTP-Anforderungen mit einem BONG für jede Stunde des Tages antwortet.

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

Weitere Informationen zu HTTP-Anforderungen finden Sie in der Dokumentation zu Cloud-Funktionen .

Der nächste Schritt führt Sie durch den Zugriff auf diese HTTP-Funktion über eine Firebase-Hosting-URL , damit dynamische Inhalte für Ihre von Firebase gehostete Site generiert werden können.

Schritt 3: Direkte Hosting-Anfragen an Ihre Funktion

Mit Umschreiberegeln können Sie Anforderungen, die bestimmten Mustern entsprechen, an ein einzelnes Ziel weiterleiten. Die folgenden Schritte zeigen Ihnen, wie Sie alle Anforderungen vom Pfad ../bigben auf Ihrer Hosting-Site bigben , um die bigben Funktion auszuführen.

  1. Öffnen Sie Ihre Datei firebase.json .

  2. Fügen Sie im hosting Bereich die folgende rewrite :

    "hosting": {
  // ...

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

  3. Stellen Sie sicher, dass Ihre Umleitung 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 Site, die von der CLI zurückgegeben wird (normalerweise localhost:5000 ), bigben die URL jedoch an bigben , z. bigben .: bigben http://localhost:5000/bigben

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

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

Beachten Sie, dass Sie Ihre Cache-Einstellungen optional anpassen 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 realen Projektressourcen bereitstellen, testen und ausführen.

  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 function,hosting

  2. Greifen Sie unter 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 Webframework

Sie können Web-Frameworks wie Express.js in Cloud-Funktionen verwenden, um den dynamischen Inhalt Ihrer App bereitzustellen und komplexe Web-Apps einfacher zu schreiben.

Der folgende Abschnitt enthält ein 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 in Ihrem functions ausführen:

    npm install express --save

  2. Öffnen Sie /functions/index.js Datei /functions/index.js und importieren und initialisieren Sie /functions/index.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, der dem Index unserer Website unter / .

      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 zum Zurückgeben der BONG Anzahl als API im JSON-Format unter /api :

      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 HTTP-Funktion:

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

  5. firebase.json in Ihrer Datei firebase.json alle Anforderungen an die app Funktion. Durch dieses Umschreiben kann Express.js den verschiedenen von uns konfigurierten Unterpfad bedienen (in diesem Beispiel / und /api ).

    {
 "hosting": {
   // ...

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

Middleware hinzufügen

Wenn Sie unser Beispiel fortsetzen und Express.js verwenden, können Sie die Middleware von Express.js auf typische Weise hinzufügen. Sie können beispielsweise CORS- Anforderungen auf unseren Endpunkten aktivieren.

  1. Installieren Sie die cors Middleware, indem Sie den folgenden Befehl cors :

    npm install --save cors

  2. Öffnen Sie /functions/index.js Datei /functions/index.js und fügen Sie Ihrer /functions/index.js App 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 Dokumentation zu Cloud-Funktionen .

Nächste Schritte