Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Mit Cloud Functions dynamische Inhalte bereitstellen und Mikrodienste hosten

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

Cloud - Funktionen für die Firebase lassen Sie die Back - End - Code als Antwort auf HTTPS - Anfragen automatisch ausgeführt. Ihr Code wird in der Cloud von Google gespeichert und in einer verwalteten Umgebung ausgeführt. Sie müssen Ihre eigenen Server nicht verwalten und skalieren.

Zum Beispiel Anwendungsfälle und Beispiele für Funktionen Wolke integriert mit Firebase Hosting, besuchen Sie bitte unsere serverless Überblick .

Cloud Functions mit Firebase-Hosting verbinden

Dieser Abschnitt enthält ein exemplarisches Beispiel zum Verbinden einer Funktion mit Firebase Hosting.

Beachten Sie, dass die Leistung des Dienstes dynamische Inhalte zu verbessern, können Sie optional tune Ihre Cache - Einstellungen .

Schritt 1: Einrichten der Cloud - Funktionen

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

    Eine ausführliche Anleitung über die CLI - Installation und Hosting - Initialisierung finden Sie in den ersten Schritten Leitfaden für Hosting .

  2. Stellen Sie sicher, dass Sie Cloud Functions eingerichtet haben:

    • Wenn Sie sich bereits Cloud - Funktionen festgelegt haben, können Sie fortfahren zu Schritt 2: Erstellen und eine HTTPS - Funktion zu testen .

    • Wenn Sie noch nicht auf Cloud - Funktionen festgelegt:

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

      3. Überprüfen Sie, ob Sie eine haben functions Verzeichnis in Ihrem lokalen Projektverzeichnis (erstellt mit dem Befehl Firebase Sie gerade lief). Diese functions Verzeichnis, in dem der Code für Cloud - Funktionen lebt.

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

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

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

    Dieser Code erstellt eine HTTPS - Funktion ( mit dem Namen bigben ) , die Antworten auf HTTPS - Anfragen mit einem BONG für jede Stunde des Tages, genau wie eine Uhr.

    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 die Verwendung von 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 der CLI zurückgegeben, zum Beispiel: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

Besuchen Sie die Cloud - Funktionen Dokumentation mehr über HTTPS - Anfragen zu lernen.

Der nächste Schritt führt Sie durch , wie diese HTTPS - Funktion für den Zugriff von einem Firebase Hosting - URL so , dass es dynamische Inhalte für Ihre Firebase-gehostete Website zu generieren.

Schritt 3: Direkte HTTPS - Anfragen an Ihre Funktion

Mit Rewrite - Regeln , können Sie Anfragen richten , die an ein einzelnes Ziel bestimmte Muster entsprechen. Die folgenden Schritte zeigen, wie alle Anfragen aus dem Weg zu lenken ../bigben auf Ihrer Hosting - Website , die auszuführen bigben Funktion.

  1. Öffnen Sie Ihre firebase.json Datei .

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

    "hosting": {
  // ...

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

  3. Bestätigen Sie, dass Ihre Weiterleitung wie erwartet funktioniert, indem 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 Website , wie durch die CLI zurückgegeben ( in der Regel localhost:5000 ), aber fügen Sie die URL mit bigben , etwa so: http://localhost:5000/bigben

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

Besuchen Sie die Hosting - Konfigurationsseite für weitere Details über Rewrite - Regeln . Sie können auch über die lernen Prioritätsreihenfolge der Antworten für verschiedene Hosting - Konfigurationen.

Beachten Sie, dass die Leistung des Dienstes dynamische Inhalte zu verbessern, können Sie optional tune Ihre Cache - Einstellungen .

Schritt 4: Stellen Sie Ihre Funktion

Sobald Ihre Funktion im Emulator wie gewünscht funktioniert, können Sie die Bereitstellung, Prüfung gehen, und es mit realen Projektressourcen ausgeführt wird . Dies ist ein guter Zeitpunkt , um Einstellung Laufzeit Optionen prüfen Steuerskalierungsverhalten für Funktionen in der laufenden Produktion.

  1. Stellen Sie Ihre Funktion sowie Ihre Hosting-Inhalte und -Konfigurationen auf Ihrer Site bereit, indem Sie den folgenden Befehl im Stammverzeichnis Ihres lokalen Projektverzeichnisses ausführen:

    firebase deploy --only functions,hosting

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

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

    • Irgendwelche verbundenen benutzerdefinierte Domains :
      CUSTOM_DOMAIN /bigben

Verwenden Sie ein Web-Framework

Sie können Web - Frameworks, wie verwenden Express.js , in Cloud - Funktionen Ihrer App dynamische Inhalte zu dienen und komplexe Web - Anwendungen leichter zu schreiben.

Der folgende Abschnitt enthält ein exemplarisches 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 von Ihrem laufenden functions Verzeichnis:

    npm install express --save

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

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

  3. Fügen Sie die folgenden beiden Endpunkte hinzu:

    1. Fügen Sie den ersten Endpunkt der Index unserer Website zu dienen / .

      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 anderer Endpunkt die Rückkehr BONG Zählung als eine 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 HTTPS-Funktion:

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

  5. In Ihrer firebase.json Datei, richten Sie alle Anfragen an die app - Funktion. Dies ermöglicht Rewrite Express.js die verschiedenen Unterpfad zu dienen , das wir konfiguriert (in diesem Beispiel, / und /api ).

    {
 "hosting": {
   // ...

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

Middleware hinzufügen

Unserem Beispiel zu bleiben, jetzt, wo Sie verwenden Express.js, können Sie hinzufügen Express.js Middleware in der typischen Art und Weise. Zum Beispiel können Sie ermöglichen CORS - Anfragen auf unseren Endpunkten.

  1. Installieren Sie die cors Middleware durch den folgenden Befehl ausführen:

    npm install --save cors

  2. Öffnen Sie Ihre /functions/index.js Datei, fügen Sie dann cors auf Ihre Express.js App, etwa so:

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

Besuchen Sie die Funktionen Cloud - Dokumentation mehr über die Verwendung von Firebase mit Express - Anwendungen und Middleware - Module zu lernen.

Nächste Schritte