Offri contenuti dinamici e ospita microservizi con Cloud Functions

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 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 di Cloud Functions integrati con Firebase Hosting, visita la nostra panoramica sul serverless .

Connetti le funzioni cloud all'hosting Firebase

Questa sezione fornisce un esempio dettagliato per connettere una funzione a Firebase Hosting.

Tieni presente che per migliorare le prestazioni della fornitura di contenuti dinamici, puoi facoltativamente ottimizzare le impostazioni della cache .

Passaggio 1: configura le Funzioni Cloud

  1. Assicurati di avere la versione più recente della CLI Firebase e di aver inizializzato Firebase Hosting.

    Per istruzioni dettagliate sull'installazione della CLI e sull'inizializzazione dell'hosting, consultare la guida introduttiva per l'hosting .

  2. 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:

      1. Inizializza Cloud Functions eseguendo il comando seguente dalla radice della directory del progetto:

        firebase init functions

      2. Quando richiesto, seleziona JavaScript (questo esempio dettagliato utilizza JS).

      3. Verifica di avere una directory functions nella directory del progetto locale (creata dal comando Firebase che hai appena eseguito). Questa directory functions è dove risiede il codice per Cloud Functions.

Passaggio 2: crea e testa una funzione HTTPS per il tuo sito di hosting

  1. Apri /functions/index.js nel tuo editor preferito.

  2. Sostituisci il contenuto del file con il codice seguente.

    Questo codice crea una funzione HTTPS (denominata bigben ) che risponde alle richieste HTTPS con un BONG 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>`);
});

  3. Testa le tue funzioni localmente utilizzando Firebase Local Emulator Suite .

    1. Dalla radice della directory del progetto locale, esegui il comando seguente:

      firebase emulators:start

    2. Accedi 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 ti illustra come accedere a questa funzione HTTPS da un URL di hosting Firebase in modo che possa generare contenuto dinamico 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 passaggi seguenti mostrano come indirizzare tutte le richieste dal percorso ../bigben sul tuo sito hosting per eseguire la funzione bigben .

  1. Apri il file firebase.json .

  2. Aggiungi la seguente configurazione rewrite nella sezione hosting :

    "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)
    }
  } ]
}

  3. Verifica che il reindirizzamento funzioni come previsto eseguendo nuovamente il test con gli emulatori Firebase.

    1. Dalla radice della directory del progetto locale, esegui il comando seguente:

      firebase emulators:start

    2. Visita l'URL ospitato localmente per il tuo sito restituito dalla CLI (solitamente localhost:5000 ), ma aggiungi l'URL con bigben , in questo modo: http://localhost:5000/bigben

  4. Itera sulla tua funzione e sulla sua funzionalità per il tuo sito. Utilizza gli emulatori Firebase per testare queste iterazioni.

Per ottenere le migliori prestazioni, colloca le tue funzioni con Hosting scegliendo una delle seguenti regioni:

  • us-west1
  • us-central1
  • us-east1
  • europe-west1
  • asia-east1

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 fornitura di contenuti dinamici, puoi facoltativamente ottimizzare le impostazioni della cache .

Passaggio 4: distribuisci 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.

  1. Distribuisci la tua funzione così come il contenuto del tuo hosting e configura il tuo sito eseguendo il seguente comando dalla radice della directory del progetto locale:

    firebase deploy --only functions,hosting

  2. Accedi al tuo sito live e alla tua funzione ai seguenti URL:

    • I tuoi sottodomini Firebase:
      PROJECT_ID .web.app/bigben e PROJECT_ID .firebaseapp.com/bigben

    • Eventuali domini personalizzati collegati:
      CUSTOM_DOMAIN /bigben

Utilizza un framework web

Puoi utilizzare framework Web, come Express.js , in Cloud Functions per gestire i contenuti dinamici della tua app e scrivere app Web complesse più facilmente.

La sezione seguente fornisce un esempio dettagliato per l'utilizzo di Express.js con Firebase Hosting e Cloud Functions.

  1. Installa Express.js nel tuo progetto locale eseguendo il comando seguente dalla directory functions :

    npm install express --save

  2. 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();

  3. Aggiungi i due endpoint seguenti:

    1. 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>`);
});

    2. 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)});
});

  4. Esporta l'app Express.js come funzione HTTPS:

    exports.app = functions.https.onRequest(app);

  5. Nel file firebase.json , indirizza tutte le richieste alla funzione app . Questa riscrittura consente a Express.js di servire il diverso percorso secondario che abbiamo configurato (in questo esempio, / e /api ).

    {
 "hosting": {
   // ...

   // Add the "rewrites" attribute within "hosting"
   "rewrites": [ {
     "source": "**",
     "function": "app"
   } ]
 }
}

Aggiungi 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.

  1. Installa il middleware cors eseguendo il comando seguente:

    npm install --save cors

  2. Apri il tuo file /functions/index.js , quindi aggiungi cors alla tua app Express.js, in questo modo:

    const cors = require('cors')({origin: true});
app.use(cors);

Visita la documentazione di Cloud Functions per ulteriori informazioni sull'utilizzo di Firebase con app Express e moduli middleware.

Prossimi passi