Associa Cloud Functions a Firebase Hosting per generare e servire i tuoi contenuti dinamici o creare API REST come microservizi.
Cloud Functions for Firebase ti consente di eseguire automaticamente il codice di backend in risposta alle richieste HTTPS. Il tuo codice è archiviato nel cloud di Google e viene eseguito in un ambiente gestito. Non è necessario gestire e ridimensionare i propri server.
Per esempi di casi d'uso ed esempi per Cloud Functions integrati con Firebase Hosting, visita la nostra panoramica serverless .
Connetti le funzioni cloud all'hosting Firebase
Questa sezione fornisce un esempio dettagliato per la connessione di una funzione a Firebase Hosting.
Tieni presente che per migliorare le prestazioni della pubblicazione di contenuti dinamici, puoi facoltativamente regolare le impostazioni della cache .
Passaggio 1: configurare le funzioni cloud
Assicurati di disporre dell'ultima versione dell'interfaccia a riga di comando di Firebase e di aver inizializzato Firebase Hosting.
Per istruzioni dettagliate sull'installazione della CLI e sull'inizializzazione dell'hosting, consulta la Guida introduttiva per l'hosting .
Assicurati di aver configurato Cloud Functions:
Se hai già configurato Cloud Functions, puoi procedere al Passaggio 2: creare e testare una funzione HTTPS .
Se non hai configurato Cloud Functions:
Inizializza Cloud Functions eseguendo il seguente comando dalla radice della directory del tuo progetto:
firebase init functions
Quando richiesto, seleziona JavaScript (questo esempio dettagliato utilizza JS).
Verifica di avere una directory
functions
nella directory del tuo progetto locale (creata dal comando Firebase che hai appena eseguito). Questa directoryfunctions
è dove risiede il codice per Cloud Functions.
Passaggio 2: crea e testa una funzione HTTPS per il tuo sito di hosting
Apri
/functions/index.js
nel tuo editor preferito.Sostituire il contenuto del file con il codice seguente.
Questo codice crea una funzione HTTPS (denominata
bigben
) che risponde alle richieste HTTPS con unBONG
per ogni ora del giorno, proprio come un orologio.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>`); });
Testa le tue funzioni in locale utilizzando Firebase Local Emulator Suite .
Dalla radice della directory del progetto locale, esegui il seguente comando:
firebase emulators:start
Accedere alla funzione tramite l'URL locale restituito dalla CLI, ad esempio:
.http://localhost:5001/ PROJECT_ID /us-central1/bigben
Visita la documentazione di Cloud Functions per ulteriori informazioni sulle richieste HTTPS.
Il passaggio successivo illustra come accedere a questa funzione HTTPS da un URL di hosting Firebase in modo che possa generare contenuti dinamici per il tuo sito ospitato da Firebase.
Passaggio 3: indirizza le richieste HTTPS alla tua funzione
Con le regole di riscrittura , puoi indirizzare le richieste che corrispondono a modelli specifici a un'unica destinazione. I seguenti passaggi mostrano come indirizzare tutte le richieste dal percorso ../bigben
sul tuo sito di hosting per eseguire la funzione bigben
.
Apri il tuo file
firebase.json
.Aggiungi la seguente configurazione
rewrite
nella sezionehosting
:"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) } ] }
Verifica che il tuo reindirizzamento funzioni come previsto testando nuovamente con gli emulatori Firebase.
Dalla radice della directory del progetto locale, esegui il seguente comando:
firebase emulators:start
Visita l'URL ospitato localmente per il tuo sito come restituito dalla CLI (di solito
localhost:5000
), ma aggiungi l'URL conbigben
, in questo modo:http://localhost:5000/bigben
Itera sulla tua funzione e sulla sua funzionalità per il tuo sito. Utilizza gli emulatori Firebase per testare queste iterazioni.
Se
region
viene omessa da un bloccofunction
della configurazionehosting.rewrites
, l'interfaccia a riga di comando di Firebase tenta di rilevare automaticamente la regione dal codice sorgente della funzione che, se non specificato, per impostazione predefinita èus-central1
. Se il codice sorgente della funzione non è disponibile, la CLI tenta di rilevare la regione dalla funzione distribuita. Se la funzione si trova in più regioni, la CLI richiede cheregion
sia specificata nella configurazionehosting.rewrites
.
La funzionalità
pinTag
è disponibile solo in Cloud Functions per Firebase (2ª generazione). Con questa funzione, puoi assicurarti che ogni funzione per la generazione del contenuto dinamico del tuo sito sia sincronizzata con le tue risorse di hosting statiche e la configurazione di hosting. Inoltre, questa funzione consente di visualizzare in anteprima le riscritture delle funzioni sui canali di anteprima dell'hosting.Se aggiungi
"pinTag": true
a un bloccofunction
della configurazionehosting.rewrites
, la funzione "pinned" verrà distribuita insieme alle risorse e alla configurazione di hosting statiche, anche quando esegui. Se esegui il rollback di una versione del tuo sito, viene eseguito il rollback anche della funzione "bloccato".
firebase deploy --only hosting Questa funzionalità si basa sui tag Cloud Run , che hanno un limite di 1000 tag per servizio e 2000 tag per regione. Ciò significa che dopo centinaia di distribuzioni, le versioni più vecchie di un sito potrebbero smettere di funzionare.
Visita la pagina di configurazione dell'hosting per maggiori dettagli sulle regole di riscrittura . Puoi anche conoscere l' ordine di priorità delle risposte per varie configurazioni di hosting.
Tieni presente che per migliorare le prestazioni della pubblicazione di contenuti dinamici, puoi facoltativamente regolare le impostazioni della cache .
Passaggio 4: implementa la tua funzione
Una volta che la tua funzione funziona come desiderato nell'emulatore, puoi procedere alla distribuzione, al test e all'esecuzione con risorse di progetto reali . Questo è un buon momento per considerare l'impostazione delle opzioni di runtime per controllare il comportamento di ridimensionamento per le funzioni in esecuzione in produzione.
Distribuisci la tua funzione, nonché il contenuto e la configurazione dell'hosting sul tuo sito eseguendo il seguente comando dalla radice della directory del progetto locale:
firebase deploy --only functions,hosting
Accedi al tuo sito live e alla tua funzione ai seguenti URL:
I tuoi sottodomini Firebase:
PROJECT_ID .web.app/bigben
ePROJECT_ID .firebaseapp.com/bigben
Eventuali domini personalizzati collegati:
CUSTOM_DOMAIN /bigben
Usa un framework web
Puoi utilizzare framework web, come Express.js , in Cloud Functions per servire i contenuti dinamici della tua app e scrivere più facilmente app web complesse.
La sezione seguente fornisce un esempio dettagliato per l'utilizzo di Express.js con Firebase Hosting e Cloud Functions.
Installa Express.js nel tuo progetto locale eseguendo il seguente comando dalla directory
functions
:npm install express --save
Apri il tuo file
/functions/index.js
, quindi importa e inizializza Express.js:const functions = require('firebase-functions'); const express = require('express'); const app = express();
Aggiungi i seguenti due endpoint:
Aggiungi il primo endpoint per servire l'indice del nostro sito web in
/
.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>`); });
E un altro endpoint per restituire il conteggio
BONG
come API, in formato JSON, in/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)}); });
Esporta l'app Express.js come funzione HTTPS:
exports.app = functions.https.onRequest(app);
Nel tuo file
firebase.json
, indirizza tutte le richieste alla funzioneapp
. Questa riscrittura consente a Express.js di servire il diverso sottopercorso che abbiamo configurato (in questo esempio,/
e/api
).{ "hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "**", "function": "app" } ] } }
Aggiungi il middleware
Continuando il nostro esempio, ora che utilizzi Express.js, puoi aggiungere il middleware Express.js nel modo tipico. Ad esempio, puoi abilitare le richieste CORS sui nostri endpoint.
Installa il middleware
cors
eseguendo il seguente comando:npm install --save cors
Apri il tuo file
/functions/index.js
, quindi aggiungicors
alla tua app Express.js, in questo modo:const cors = require('cors')({origin: true}); app.use(cors);
Visita la documentazione di Cloud Functions per saperne di più sull'utilizzo di Firebase con app Express e moduli middleware.
Prossimi passi
Imposta la memorizzazione nella cache per i tuoi contenuti dinamici su un CDN globale.
Interagisci con altri servizi Firebase utilizzando Firebase Admin SDK .
Esamina i prezzi , le quote e i limiti per Cloud Functions.