Połącz usługę Cloud Functions z usługą Firebase Hosting, aby generować i wyświetlać treści dynamiczne lub tworzyć interfejsy API REST jako mikroserwisy.
Cloud Functions for 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 musisz zarządzać własnymi serwerami ani skalować ich działania.
Przykładowe przypadki użycia i próbki dotyczące usługi Cloud Functions zintegrowanej z Firebase Hosting znajdziesz w artykule Informacje o usłudze bez serwera.
Połącz Cloud Functions z Firebase Hosting
W tej sekcji znajdziesz przykładowy przewodnik po łączeniu funkcji z funkcją Firebase Hosting.
Aby zwiększyć skuteczność dostarczania treści dynamicznych, możesz opcjonalnie dostosować ustawienia pamięci podręcznej.
Krok 1. Skonfiguruj Cloud Functions
Upewnij się, że masz najnowszą wersję interfejsu wiersza poleceń Firebase i że masz zainicjowany Firebase Hosting.
Szczegółowe instrukcje dotyczące instalowania interfejsu wiersza poleceń i inicjowania usługi Hosting znajdziesz w przewodniku Pierwsze kroki z Hosting.
Upewnij się, że masz skonfigurowaną usługę Cloud Functions:
Jeśli masz już skonfigurowaną funkcję Cloud Functions, możesz przejść do kroku 2: utwórz i przetestuj funkcję HTTPS.
Jeśli nie masz skonfigurowanego Cloud Functions:
Aby zainicjować Cloud Functions, uruchom to polecenie w katalogu głównym katalogu projektu:
firebase init functions
Gdy pojawi się odpowiedni komunikat, wybierz JavaScript (w tym przykładzie używamy JS).
Sprawdź, czy w katalogu lokalnym projektu (utworzonym przez właśnie uruchomione polecenie Firebase) znajduje się katalog
functions
. W katalogufunctions
znajduje się kod aplikacji Cloud Functions.
Krok 2. Utwórz i przetestuj funkcję HTTPS dla witryny Hosting
Otwórz plik
/functions/index.js
w ulubionym edytorze.Zastąp zawartość pliku tym kodem.
Ten kod tworzy funkcję HTTPS (o nazwie
bigben
), która odpowiada na żądania HTTPSBONG
dla każdej godziny dnia, tak jak zegar.const functions = require('firebase-functions/v1'); 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>`); });
Testuj funkcje lokalnie za pomocą funkcji Firebase Local Emulator Suite.
W katalogu głównym lokalnego katalogu projektu uruchom to polecenie:
firebase emulators:start
Uzyskaj dostęp do funkcji za pomocą lokalnego adresu URL zwróconego przez interfejs wiersza poleceń, na przykład:
.http://localhost:5001/PROJECT_ID/us-central1/bigben
Więcej informacji o żądaniach HTTPS znajdziesz w dokumentacji Cloud Functions.
W następnym kroku dowiesz się, jak uzyskać dostęp do tej funkcji HTTPS z adresu URLFirebase Hosting, aby mogła generować treści dynamiczne dla witryny hostowanej na Firebase.
Krok 3. Przekierowywanie żądań HTTPS do funkcji
Za pomocą reguł przekształcania możesz kierować żądania, które pasują do określonych wzorów, do jednego miejsca docelowego. Z tych instrukcji dowiesz się, jak kierować wszystkie żądania z ścieżki ../bigben
w witrynie Hosting do wykonania funkcji bigben
.
Otwórz plik
firebase.json
.W sekcji
hosting
dodaj tę konfiguracjęrewrite
:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": { "functionId": "bigben", "region": "us-central1" // optional (see note below) "pinTag": true // optional (see note below) } } ] }
Sprawdź, czy przekierowanie działa zgodnie z oczekiwaniami, ponownie testując je za pomocą emulatorów Firebase.
W katalogu głównym lokalnego katalogu projektu uruchom to polecenie:
firebase emulators:start
Otwórz adres URL Twojej witryny hostowanej lokalnie zwrócony przez interfejs wiersza poleceń (zwykle
localhost:5000
), ale dodaj do niegobigben
, na przykład:http://localhost:5000/bigben
powtarzać funkcję i jej funkcjonalność w swojej witrynie. Do testowania tych iteracji użyj emulatorów Firebase.
Jak funkcja region
działa w bloku function
Jeśli w bloku
function
pliku konfiguracyjnegohosting.rewrites
brakuje parametruregion
, narzędzie wiersza poleceń Firebase próbuje automatycznie wykryć region na podstawie kodu źródłowego funkcji. Jeśli nie zostanie określony, domyślnie zostanie użyty parametrus-central1
. Jeśli kod źródłowy funkcji jest niedostępny, interfejs wiersza poleceń próbuje wykryć region na podstawie wdrożonej funkcji. Jeśli funkcja znajduje się w kilku regionach, interfejs wiersza poleceń wymaga podania wartościregion
w pliku konfiguracyjnymhosting.rewrites
.
Jak działa blok pinTag
w ramach bloku function
Funkcja
pinTag
jest dostępna tylko w urządzeniu Cloud Functions for Firebase (2 generacji). Dzięki tej funkcji możesz mieć pewność, że każda funkcja służąca do generowania treści dynamicznych na stronie jest synchronizowana ze statycznymi zasobami Hosting i konfiguracją Hosting. Ta funkcja umożliwia też wyświetlanie wersji funkcji przekształcania na kanałach Hosting w wersji testowej.Jeśli dodasz
"pinTag": true
do blokufunction
w konfiguracjihosting.rewrites
, „przypięta” funkcja zostanie wdrożona wraz ze statyczną konfiguracją i zasobami Hosting, nawet gdy jest uruchomiona. Jeśli cofniesz wersję witryny, funkcja „przypięcia” również zostanie cofnięta.
firebase deploy --only hosting Ta funkcja korzysta z tagów Cloud Run, których limit wynosi 1000 tagów na usługę i 2000 tagów na region. Oznacza to, że po setkach wdrożeń najstarsze wersje witryny mogą przestać działać.
Aby uzyskać najlepszą wydajność, umieść swoje funkcje w pobliżu usługi Hosting, wybierając jeden z tych regionów:
us-west1
us-central1
us-east1
europe-west1
asia-east1
Więcej informacji o regułach przekierowania znajdziesz na stronie konfiguracji Hosting. Możesz też dowiedzieć się więcej o kolejności priorytetów odpowiedzi w różnych konfiguracjach Hosting.
Aby zwiększyć skuteczność dostarczania treści dynamicznych, możesz opcjonalnie dostosować ustawienia pamięci podręcznej.
Krok 4. Wdróż funkcję
Gdy funkcja zacznie działać prawidłowo w emulatorze, możesz ją wdrożyć, przetestować i uruchomić z rzeczywistymi zasobami projektu. To dobry moment na skonfigurowanie opcji środowiska wykonawczego w celu kontrolowania skalowania w przypadku funkcji działających w środowisku produkcyjnym.
Wdrożyć funkcję, a także treści i konfigurację Hosting na swojej stronie, uruchamiając to polecenie w katalogu głównym lokalnego katalogu projektu:
firebase deploy --only functions,hosting
Dostęp do witryny i funkcji na żywo uzyskasz, korzystając z tych adresów URL:
Korzystanie z ramy sieciowej
W Cloud Functions możesz używać frameworków internetowych, takich jak Express.js, aby wyświetlać dynamiczną zawartość aplikacji i łatwiej pisać złożone aplikacje internetowe.
W tej sekcji znajdziesz przykład użycia Express.js z biblioteką Firebase Hosting i biblioteką Cloud Functions.
Zainstaluj Express.js w projekcie lokalnym, uruchamiając w katalogu
functions
to polecenie:npm install express --save
Otwórz plik
/functions/index.js
, a potem zaimportuj i inicjuj Express.js:const functions = require('firebase-functions/v1'); const express = require('express'); const app = express();
Dodaj te 2 punkty końcowe:
Dodaj pierwszy punkt końcowy, aby wyświetlać indeks 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>`); });
Kolejny punkt końcowy zwraca liczbę
BONG
jako interfejs API w formacie JSON w sekcji/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
kieruj wszystkie żądania do funkcjiapp
. To przekierowanie umożliwia Express.js wyświetlanie różnych ścieżek podrzędnych skonfigurowanych przez nas (w tym przykładzie/
i/api
).{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
Dodawanie elementu pośredniczącego
W naszym przykładzie, gdy używasz Express.js, możesz dodać element pośredniczący Express.js w standardowy sposób. Możesz na przykład włączyć żądania CORS w naszych punktach końcowych.
Zainstaluj oprogramowanie pośredniczące
cors
, wykonując to polecenie:npm install --save cors
Otwórz plik
/functions/index.js
, a potem dodaj do aplikacji Express.js plikcors
w ten sposób:const cors = require('cors')({origin: true}); app.use(cors);
Aby dowiedzieć się więcej o korzystaniu z Firebase w przypadku aplikacji i modułów pośredniczących Express, zapoznaj się z dokumentacją.Cloud Functions
Dalsze kroki
Skonfiguruj buforowanie dynamicznych treści w globalnej sieci CDN.
Interakcja z innymi usługami Firebase za pomocą pakietu Firebase Admin SDK.
Sprawdź ceny oraz limity i ograniczenia usługi Cloud Functions.