Połącz funkcje Cloud Functions z Hostingiem Firebase, aby generować i udostępniać treści dynamiczne lub tworzyć interfejsy API REST jako mikrousługi.
Cloud Functions dla Firebase umożliwia automatyczne uruchamianie kodu backendu w odpowiedzi na żądania HTTPS. Twój kod jest przechowywany w chmurze Google i działa w zarządzanym środowisku. Nie ma potrzeby zarządzania własnymi serwerami i ich skalowania.
Na przykład przypadki użycia i przykłady funkcji Cloud Functions zintegrowanych z Hostingiem Firebase znajdziesz w naszym omówieniu bezserwerowym .
Połącz funkcje chmury z Hostingiem Firebase
W tej sekcji znajdziesz instruktażowy przykład łączenia funkcji z Hostingiem Firebase.
Pamiętaj, że aby poprawić wydajność udostępniania zawartości dynamicznej, możesz opcjonalnie dostosować ustawienia pamięci podręcznej .
Krok 1: Skonfiguruj funkcje chmury
Upewnij się, że masz najnowszą wersję interfejsu wiersza polecenia Firebase i zainicjowano Hosting Firebase.
Szczegółowe instrukcje dotyczące instalowania interfejsu wiersza polecenia i inicjowania usługi Hosting znajdują się w przewodniku Wprowadzenie do usługi Hosting .
Upewnij się, że masz skonfigurowane Cloud Functions:
Jeśli masz już skonfigurowane Cloud Functions, możesz przejść do kroku 2. Utwórz i przetestuj funkcję HTTPS .
Jeśli nie skonfigurowałeś Cloud Functions:
Zainicjuj Cloud Functions, uruchamiając następujące polecenie z katalogu głównego katalogu projektu:
firebase init functions
Po wyświetleniu monitu wybierz JavaScript (w tym przykładzie wykorzystano JS).
Sprawdź, czy masz katalog
functions
w lokalnym katalogu projektu (utworzony przez właśnie uruchomione polecenie Firebase). W tym katalogufunctions
znajduje się kod Cloud Functions.
Krok 2: Utwórz i przetestuj funkcję HTTPS dla swojej witryny hostingowej
Otwórz
/functions/index.js
w swoim ulubionym edytorze.Zastąp zawartość pliku następującym kodem.
Ten kod tworzy funkcję HTTPS (o nazwie
bigben
), która odpowiada na żądania HTTPS za pomocąBONG
dla każdej godziny dnia, podobnie jak zegar.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>`); });
Przetestuj swoje funkcje lokalnie za pomocą pakietu Firebase Local Emulator Suite .
Z katalogu głównego lokalnego katalogu projektu uruchom następujące polecenie:
firebase emulators:start
Uzyskaj dostęp do funkcji za pośrednictwem lokalnego adresu URL zwróconego przez CLI, na przykład:
.http://localhost:5001/ PROJECT_ID /us-central1/bigben
Odwiedź dokumentację Cloud Functions, aby dowiedzieć się więcej o żądaniach HTTPS.
W następnym kroku dowiesz się, jak uzyskać dostęp do tej funkcji HTTPS z adresu URL w Hostingu Firebase , aby umożliwić generowanie treści dynamicznych dla Twojej witryny hostowanej przez Firebase.
Krok 3: Kieruj żądania HTTPS do swojej funkcji
Dzięki regułom przepisywania możesz kierować żądania pasujące do określonych wzorców do jednego miejsca docelowego. Poniższe kroki pokazują, jak kierować wszystkie żądania ze ścieżki ../bigben
w witrynie hostingowej, aby wykonać funkcję bigben
.
Otwórz plik
firebase.json
.Dodaj następującą konfigurację
rewrite
w sekcjihosting
:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": "bigben", "region": "us-central1" // optional (see note below) } ] }
Sprawdź, czy przekierowanie działa zgodnie z oczekiwaniami, ponownie przeprowadzając testy na emulatorach Firebase.
Z katalogu głównego lokalnego katalogu projektu uruchom następujące polecenie:
firebase emulators:start
Odwiedź lokalnie hostowany adres URL witryny, który jest zwracany przez CLI (zwykle
localhost:5000
), ale dołącz adres URL zbigben
, na przykład:http://localhost:5000/bigben
Iteruj swoją funkcję i jej funkcjonalność w swojej witrynie. Użyj emulatorów Firebase, aby przetestować te iteracje.
Odwiedź stronę konfiguracji hostingu, aby uzyskać więcej informacji na temat przepisywania reguł . Możesz też dowiedzieć się o kolejności priorytetów odpowiedzi w różnych konfiguracjach Hostingu.
Pamiętaj, że aby poprawić wydajność udostępniania zawartości dynamicznej, możesz opcjonalnie dostosować ustawienia pamięci podręcznej .
Krok 4: Wdróż swoją funkcję
Gdy funkcja działa zgodnie z oczekiwaniami w emulatorze, możesz przystąpić do wdrażania, testowania i uruchamiania jej przy użyciu rzeczywistych zasobów projektu. To dobry moment, aby rozważyć ustawienie opcji środowiska uruchomieniowego, aby kontrolować zachowanie skalowania dla funkcji działających w środowisku produkcyjnym.
Wdróż swoją funkcję, a także zawartość hostingu i konfigurację w swojej witrynie, uruchamiając następujące polecenie z katalogu głównego lokalnego katalogu projektu:
firebase deploy --only functions,hosting
Uzyskaj dostęp do swojej aktywnej witryny i swojej funkcji pod następującymi adresami URL:
Twoje subdomeny Firebase:
PROJECT_ID .web.app/bigben
iPROJECT_ID .firebaseapp.com/bigben
Wszystkie połączone domeny niestandardowe :
CUSTOM_DOMAIN /bigben
Użyj frameworka internetowego
Możesz używać struktur internetowych, takich jak Express.js , w Cloud Functions, aby obsługiwać dynamiczną zawartość swojej aplikacji i łatwiej pisać złożone aplikacje internetowe.
W poniższej sekcji przedstawiono instruktażowy przykład korzystania z Express.js z Hostingiem Firebase i Cloud Functions.
Zainstaluj Express.js w swoim lokalnym projekcie, uruchamiając następujące polecenie z katalogu
functions
:npm install express --save
Otwórz plik
/functions/index.js
, a następnie zaimportuj i zainicjuj Express.js:const functions = require('firebase-functions'); const express = require('express'); const app = express();
Dodaj następujące dwa punkty końcowe:
Dodaj pierwszy punkt końcowy do obsługi indeksu naszej witryny pod adresem
/
.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>`); });
I kolejny punkt końcowy, który zwraca liczbę
BONG
jako API, w formacie JSON, w/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)}); });
Wyeksportuj aplikację Express.js jako funkcję HTTPS:
exports.app = functions.https.onRequest(app);
W pliku
firebase.json
wszystkie żądania do funkcjiapp
. To przepisanie umożliwia Express.js obsługę różnych skonfigurowanych podścieżek (w tym przykładzie/
i/api
).{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
Dodaj oprogramowanie pośredniczące
Kontynuując nasz przykład, teraz, gdy używasz Express.js, możesz dodać oprogramowanie pośredniczące Express.js w typowy sposób. Na przykład możesz włączyć żądania CORS w naszych punktach końcowych.
Zainstaluj oprogramowanie pośredniczące
cors
, uruchamiając następujące polecenie:npm install --save cors
Otwórz plik
/functions/index.js
, a następnie dodajcors
do swojej aplikacji Express.js, na przykład:const cors = require('cors')({origin: true}); app.use(cors);
Odwiedź dokumentację Cloud Functions, aby dowiedzieć się więcej o używaniu Firebase z aplikacjami Express i modułami oprogramowania pośredniczącego.
Następne kroki
Skonfiguruj buforowanie zawartości dynamicznej w globalnej sieci CDN.
Interakcja z innymi usługami Firebase za pomocą pakietu Firebase Admin SDK .
Przejrzyj ceny oraz przydziały i limity Cloud Functions.