Połącz Cloud Functions z Firebase Hosting, aby generować i udostępniać dynamiczną zawartość 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 skalowania ich.
Na przykład przypadki użycia i przykłady funkcji Cloud Functions zintegrowanych z Firebase Hosting znajdziesz w naszym przeglądzie rozwiązań bezserwerowych .
Połącz funkcje chmury z hostingiem Firebase
W tej sekcji przedstawiono przykładowy przewodnik dotyczący łączenia funkcji z Hostingiem Firebase.
Pamiętaj, że aby poprawić wydajność udostępniania treści dynamicznych, możesz opcjonalnie dostroić ustawienia pamięci podręcznej .
Krok 1: Skonfiguruj funkcje chmury
Upewnij się, że masz najnowszą wersję interfejsu wiersza polecenia Firebase i że zainicjowałeś Hosting Firebase.
Szczegółowe instrukcje dotyczące instalowania interfejsu CLI i inicjowania hostingu można znaleźć w przewodniku wprowadzającym dotyczącym hostingu .
Upewnij się, że masz skonfigurowane funkcje Cloud:
Jeśli masz już skonfigurowane funkcje Cloud Functions, możesz przejść do kroku 2: Utwórz i przetestuj funkcję HTTPS .
Jeśli nie skonfigurowałeś funkcji Cloud Functions:
Zainicjuj Cloud Functions, uruchamiając następujące polecenie w katalogu głównym katalogu projektu:
firebase init functions
Po wyświetleniu monitu wybierz opcję JavaScript (w tym przykładzie instruktażowym zastosowano 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, korzystając z pakietu Firebase Local Emulator Suite .
W katalogu głównym lokalnego katalogu projektu uruchom następującą komendę:
firebase emulators:start
Uzyskaj dostęp do funkcji poprzez lokalny adres URL zwrócony 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.
Następny krok przeprowadzi Cię przez proces uzyskiwania dostępu do tej funkcji HTTPS z adresu URL hostingu Firebase, aby mogła ona generować dynamiczną zawartość dla Twojej witryny hostowanej przez Firebase.
Krok 3: Skieruj żą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 skierować wszystkie żądania ze ścieżki ../bigben
na Twojej stronie Hostingowej, aby uruchomić 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) "pinTag": true // optional (see note below) } ] }
Upewnij się, że przekierowanie działa zgodnie z oczekiwaniami, ponownie testując emulatory Firebase.
W katalogu głównym lokalnego katalogu projektu uruchom następującą komendę:
firebase emulators:start
Odwiedź lokalnie hostowany adres URL swojej witryny zwrócony przez CLI (zwykle
localhost:5000
), ale dołącz adres URL za pomocąbigben
, w ten sposób:http://localhost:5000/bigben
Wykonaj iterację swojej funkcji i jej funkcjonalności w swojej witrynie. Użyj emulatorów Firebase, aby przetestować te iteracje.
Jeśli
region
zostanie pominięty w blokufunction
konfiguracjihosting.rewrites
, interfejs CLI Firebase spróbuje automatycznie wykryć region na podstawie kodu źródłowego funkcji, który, jeśli nie zostanie określony, domyślnie ma wartośćus-central1
. Jeśli kod źródłowy funkcji jest niedostępny, interfejs CLI próbuje wykryć region z wdrożonej funkcji. Jeśli funkcja znajduje się w wielu regionach, interfejs CLI wymaga określeniaregion
w konfiguracjihosting.rewrites
.
Funkcja
pinTag
jest dostępna tylko w Cloud Functions dla Firebase (2. generacji). Dzięki tej funkcji możesz mieć pewność, że każda funkcja generowania dynamicznej zawartości Twojej witryny będzie zsynchronizowana ze statycznymi zasobami Hostingu i konfiguracją Hostingu. Ponadto ta funkcja umożliwia podgląd przepisanych funkcji w kanałach podglądu Hostingu.Jeśli dodasz
"pinTag": true
do blokufunction
konfiguracjihosting.rewrites
, wówczas funkcja „pinned” zostanie wdrożona wraz z zasobami i konfiguracją statycznego hostingu, nawet jeśli uruchomiony jest. Jeśli wycofasz wersję swojej witryny, funkcja „przypięta” również zostanie wycofana.
firebase deploy --only hosting Ta funkcja opiera się na tagach Cloud Run , które mają limit 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ść, połącz swoje funkcje z Hostingiem, wybierając jeden z następujących regionów:
-
us-west1
-
us-central1
-
us-east1
-
europe-west1
-
asia-east1
Odwiedź stronę konfiguracji Hostingu, aby uzyskać więcej szczegółów na temat reguł przepisywania . Możesz także dowiedzieć się o kolejności priorytetów odpowiedzi dla różnych konfiguracji Hostingu.
Pamiętaj, że aby poprawić wydajność udostępniania treści dynamicznych, możesz opcjonalnie dostroić ustawienia pamięci podręcznej .
Krok 4: Wdróż swoją funkcję
Gdy funkcja będzie działać zgodnie z oczekiwaniami w emulatorze, możesz przystąpić do jej wdrażania, testowania i uruchamiania przy użyciu rzeczywistych zasobów projektu. To dobry moment, aby rozważyć ustawienie opcji środowiska wykonawczego w celu kontrolowania zachowania skalowania funkcji działających w środowisku produkcyjnym.
Wdróż swoją funkcję, a także zawartość i konfigurację hostingu 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 działającej witryny i funkcji pod następującymi adresami URL:
Twoje subdomeny Firebase:
PROJECT_ID .web.app/bigben
iPROJECT_ID .firebaseapp.com/bigben
Wszelkie połączone domeny niestandardowe :
CUSTOM_DOMAIN /bigben
Użyj frameworka internetowego
W Cloud Functions możesz używać platform internetowych, takich jak Express.js , aby udostępniać dynamiczną zawartość aplikacji i łatwiej pisać złożone aplikacje internetowe.
W poniższej sekcji przedstawiono przykładowy przewodnik dotyczący używania Express.js z Firebase Hosting i Cloud Functions.
Zainstaluj Express.js w swoim projekcie lokalnym, uruchamiając następującą komendę 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, który będzie obsługiwał indeks naszej witryny internetowej 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)}); });
Eksportuj aplikację Express.js jako funkcję HTTPS:
exports.app = functions.https.onRequest(app);
W pliku
firebase.json
kieruj wszystkie żądania do funkcjiapp
. To przepisanie pozwala Express.js obsługiwać inną skonfigurowaną przez nas ścieżkę podrzędną (w tym przykładzie/
i/api
).{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
Dodaj oprogramowanie pośrednie
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 na naszych punktach końcowych.
Zainstaluj oprogramowanie pośrednie
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 w następujący sposób:const cors = require('cors')({origin: true}); app.use(cors);
Odwiedź dokumentację Cloud Functions , aby dowiedzieć się więcej o korzystaniu z Firebase z aplikacjami Express i modułami oprogramowania pośredniego.
Następne kroki
Skonfiguruj buforowanie zawartości dynamicznej w globalnej sieci CDN.
Interakcja z innymi usługami Firebase za pomocą pakietu Firebase Admin SDK .
Zapoznaj się z cenami oraz przydziałami i limitami Cloud Functions.