Kombinieren Sie Cloud Functions mit Firebase Hosting, um Ihre dynamischen Inhalte zu generieren und bereitzustellen, oder erstellen Sie REST-APIs als Microservices.
Mit Cloud Functions for Firebase können Sie automatisch Back-End-Code als Antwort auf HTTPS-Anfragen ausführen. 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.
Beispiele für Anwendungsfälle und Beispiele für in Firebase Hosting integrierte Cloud-Funktionen finden Sie in unserer serverlosen Übersicht .
Verbinden Sie Cloud-Funktionen mit Firebase-Hosting
Dieser Abschnitt enthält ein exemplarisches Beispiel zum Verbinden einer Funktion mit Firebase Hosting.
Beachten Sie, dass Sie optional Ihre Cache-Einstellungen optimieren können, um die Leistung beim Bereitstellen dynamischer Inhalte zu verbessern.
Schritt 1: Cloud-Funktionen einrichten
Stellen Sie sicher, dass Sie über die neueste Version der Firebase-Befehlszeilenschnittstelle verfügen und Firebase-Hosting initialisiert haben.
Ausführliche Anweisungen zum Installieren der Befehlszeilenschnittstelle und zum Initialisieren von Hosting finden Sie im Handbuch „Erste Schritte“ für Hosting .
Stellen Sie sicher, dass Sie Cloud Functions eingerichtet haben:
Wenn Sie Cloud Functions bereits eingerichtet haben, können Sie mit Schritt 2 fortfahren: HTTPS-Funktion erstellen und testen .
Wenn Sie Cloud Functions nicht eingerichtet haben:
Initialisieren Sie Cloud Functions, 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 exemplarischen Beispiel wird JS verwendet).
Überprüfen Sie, ob Sie ein
functions
in Ihrem lokalen Projektverzeichnis haben (erstellt durch den Firebase-Befehl, den Sie gerade ausgeführt haben). In diesemfunctions
befindet sich der Code für Cloud Functions.
Schritt 2: Erstellen und testen Sie eine HTTPS-Funktion für Ihre Hosting-Site
Öffnen
/functions/index.js
in Ihrem bevorzugten Editor.Ersetzen Sie den Inhalt der Datei durch den folgenden Code.
Dieser Code erstellt eine HTTPS-Funktion (namens
bigben
), die auf HTTPS-Anforderungen mit einemBONG
für jede Stunde des Tages antwortet, 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>`); });
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, zum Beispiel:
.http://localhost:5001/ PROJECT_ID /us-central1/bigben
Besuchen Sie die Cloud Functions-Dokumentation , um mehr über HTTPS-Anfragen zu erfahren.
Der nächste Schritt führt Sie durch den Zugriff auf diese HTTPS-Funktion über eine Firebase-Hosting-URL , damit sie dynamische Inhalte für Ihre von Firebase gehostete Website generieren kann.
Schritt 3: Leiten Sie HTTPS-Anfragen an Ihre Funktion weiter
Mit Rewrite-Regeln können Sie Anforderungen, die mit bestimmten Mustern übereinstimmen, an ein einzelnes Ziel leiten. Die folgenden Schritte zeigen Ihnen, wie Sie alle Anfragen aus dem Pfad ../bigben
auf Ihrer Hosting-Site weiterleiten, um die bigben
Funktion auszuführen.
Öffnen Sie Ihre
firebase.json
-Datei .Fügen Sie die folgende
rewrite
-Konfiguration imhosting
Abschnitt hinzu:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": "bigben", "region": "us-central1" // optional (see note below) } ] }
Bestätigen Sie, dass Ihre Weiterleitung 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 Website, wie sie von der CLI zurückgegeben wird (normalerweise
localhost:5000
), aber hängen Sie die URL mitbigben
an, etwa so:http://localhost:5000/bigben
Wiederholen Sie Ihre Funktion und ihre Funktionalität für Ihre Website. Verwenden Sie die Firebase-Emulatoren, um diese Iterationen zu testen.
Besuchen Sie die Hosting-Konfigurationsseite für weitere Details zu Rewrite-Regeln . Sie können sich auch über die Prioritätsreihenfolge von Antworten für verschiedene Hosting-Konfigurationen informieren.
Beachten Sie, dass Sie optional Ihre Cache-Einstellungen optimieren 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 echten Projektressourcen bereitstellen, testen und ausführen. Dies ist ein guter Zeitpunkt, um das Festlegen von Laufzeitoptionen in Betracht zu ziehen, um das Skalierungsverhalten für Funktionen zu steuern , die in der Produktion ausgeführt werden.
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 functions,hosting
Greifen Sie unter den 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 Web-Framework
Sie können Web-Frameworks wie Express.js in Cloud Functions verwenden, um die dynamischen Inhalte Ihrer App bereitzustellen und komplexe Web-Apps einfacher zu schreiben.
Der folgende Abschnitt enthält ein exemplarisches 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 aus Ihrem
functions
ausführen:npm install express --save
Öffnen Sie Ihre Datei
/functions/index.js
, importieren und initialisieren Sie dann Express.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, 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>`); });
Und ein weiterer Endpunkt, um die
BONG
Zählung 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)}); });
Exportieren Sie die Express.js-App als HTTPS-Funktion:
exports.app = functions.https.onRequest(app);
Leiten Sie in Ihrer
firebase.json
-Datei alle Anforderungen an dieapp
-Funktion weiter. Diese Umschreibung ermöglicht es Express.js, die unterschiedlichen Unterpfade bereitzustellen, die wir konfiguriert haben (in diesem Beispiel/
und/api
).{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
Fügen Sie Middleware hinzu
In Fortsetzung unseres Beispiels können Sie jetzt, da Sie Express.js verwenden, Express.js-Middleware auf die typische Weise hinzufügen. Beispielsweise können Sie CORS- Anfragen auf unseren Endpunkten aktivieren.
Installieren Sie die
cors
-Middleware, indem Sie den folgenden Befehl ausführen:npm install --save cors
Öffnen Sie Ihre Datei
/functions/index.js
und fügen Sie danncors
wie folgt zu Ihrer Express.js-App hinzu:const cors = require('cors')({origin: true}); app.use(cors);
Besuchen Sie die Cloud Functions-Dokumentation , um mehr über die Verwendung von Firebase mit Express-Apps und Middleware-Modulen zu erfahren.
Nächste Schritte
Richten Sie Caching für Ihre dynamischen Inhalte auf einem globalen CDN ein.
Interagieren Sie mit anderen Firebase-Diensten über das Firebase Admin SDK .
Überprüfen Sie die Preise sowie die Kontingente und Limits für Cloud Functions.