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
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 .
Stellen Sie sicher, dass Sie Cloud-Funktionen eingerichtet haben:
Wenn Sie bereits Cloud-Funktionen eingerichtet haben, können Sie mit Schritt 2 fortfahren : Erstellen und Testen einer HTTPS-Funktion .
Wenn Sie keine Cloud-Funktionen eingerichtet haben:
Initialisieren Sie Cloud-Funktionen, indem Sie den folgenden Befehl im Stammverzeichnis Ihres Projektverzeichnisses ausführen:
firebase init functions
Wenn Sie dazu aufgefordert werden, wählen Sie JavaScript aus (in diesem Beispiel wird JS verwendet).
Überprüfen Sie, ob sich in Ihrem lokalen Projektverzeichnis ein
functions
(erstellt mit dem gerade ausgeführten Firebase-Befehl). In diesemfunctions
befindet sich der Code für Cloud-Funktionen.
Schritt 2: Erstellen und testen Sie eine HTTPS-Funktion für Ihre Hosting-Site
Öffnen Sie
/functions/index.js
in Ihrem bevorzugten Editor.Ersetzen Sie den Inhalt der Datei durch den folgenden Code.
Dieser Code erstellt eine HTTPS-Funktion (
bigben
), die wie eine Uhr auf HTTPS-Anforderungen mit einemBONG
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>`); });
Testen Sie Ihre Funktionen lokal mit der Firebase Local Emulator Suite .
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:
firebase emulators:start
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 HTTPS-Anforderungen finden Sie in der Dokumentation zu Cloud-Funktionen .
Der nächste Schritt führt Sie durch den Zugriff auf diese HTTPS-Funktion über eine Firebase-Hosting-URL , damit dynamische Inhalte für Ihre von Firebase gehostete Site generiert werden können.
Schritt 3: Direkte HTTPS-Anforderungen 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.
Öffnen Sie Ihre Datei
firebase.json
.Fügen Sie im
hosting
Bereich die folgenderewrite
:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": "bigben" } ] }
Stellen Sie sicher, dass Ihre Umleitung wie erwartet funktioniert, indem Sie sie erneut mit den Firebase-Emulatoren testen.
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:
firebase emulators:start
Besuchen Sie die lokal gehostete URL für Ihre Site, die von der CLI zurückgegeben wird (normalerweise
localhost:5000
),bigben
die URL jedoch anbigben
, z.bigben
.:bigben
http://localhost:5000/bigben
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.
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
Greifen Sie unter folgenden URLs auf Ihre Live-Site und Ihre Funktion zu:
Ihre Firebase-Subdomains:
PROJECT_ID .web.app/bigben
undPROJECT_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.
Installieren Sie Express.js in Ihrem lokalen Projekt, indem Sie den folgenden Befehl in Ihrem
functions
ausführen:npm install express --save
Ö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();
Fügen Sie die folgenden zwei Endpunkte hinzu:
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>`); });
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)}); });
Exportieren Sie die Express.js-App als HTTPS-Funktion:
exports.app = functions.https.onRequest(app);
firebase.json
in Ihrer Dateifirebase.json
alle Anforderungen an dieapp
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.
Installieren Sie die
cors
Middleware, indem Sie den folgenden Befehlcors
:npm install --save cors
Öffnen Sie
/functions/index.js
Datei/functions/index.js
und fügen Sie Ihrer/functions/index.js
Appcors
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
Richten Sie das Caching für Ihre dynamischen Inhalte auf einem globalen CDN ein.
Interagieren Sie mit anderen Firebase-Diensten mithilfe des Firebase Admin SDK .
Überprüfen Sie die Preise sowie die Kontingente und Limits für Cloud-Funktionen.