Pubblica contenuti dinamici e ospita microservizi con Cloud Functions

Accoppia Cloud Functions con Firebase Hosting per generare e pubblicare i tuoi contenuti dinamici o per 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 nella cloud di Google e viene eseguito in un ambiente gestito. Non è necessario gestire e scalare i tuoi server.

Per casi d'uso di esempio ed esempi per Cloud Functions integrato con Firebase Hosting, consulta la nostra panoramica sul serverless.

Connetti Cloud Functions a Firebase Hosting

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

Tieni presente che, per migliorare il rendimento della pubblicazione di contenuti dinamici, puoi optionally ottimizzare le impostazioni della cache.

Passaggio 1: configura Cloud Functions

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

    Per istruzioni dettagliate sull'installazione dell'interfaccia a riga di comando e sull'inizializzazione di Hosting, consulta la Guida introduttiva per Hosting.

  2. Assicurati di aver configurato Cloud Functions:

    • Se hai già configurato Cloud Functions, puoi procedere al passaggio 2: crea e testa una funzione HTTPS.

    • Se non hai configurato Cloud Functions:

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

        firebase init functions

      2. Quando richiesto, seleziona JavaScript (questo esempio di procedura dettagliata utilizza JS).

      3. Verifica di avere una directory functions nella directory del progetto locale (creata dal comando Firebase che hai appena eseguito). In questa directory functions si trova il codice di Cloud Functions.

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

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

  2. Sostituisci i contenuti del file con il codice che segue.

    Questo codice crea una funzione HTTPS (chiamata bigben) che risponde alle richieste HTTPS con un BONG per ogni ora del giorno, proprio come un orologio.

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

  3. Testa le funzioni in locale utilizzando Firebase Local Emulator Suite.

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

      firebase emulators:start

    2. Accedi alla funzione tramite l'URL locale restituito dall'interfaccia a riga di comando, ad esempio: http://localhost:5001/PROJECT_ID/us-central1/bigben.

Per saperne di più sulle richieste HTTPS, consulta la documentazione di Cloud Functions.

Il passaggio successivo illustra come accedere a questa funzione HTTPS da un URLFirebase Hosting in modo che possa generare contenuti dinamici per il tuo sito ospitato su Firebase.

Passaggio 3: indirizza le richieste HTTPS alla funzione

Con le regole di riscrittura, puoi indirizzare le richieste corrispondenti a pattern specifici a un'unica destinazione. I passaggi riportati di seguito 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 questo comando:

      firebase emulators:start

    2. Visita l'URL ospitato localmente del tuo sito restituito dall'interfaccia a riga di comando (di solito localhost:5000), ma aggiungi bigben all'URL, come segue: http://localhost:5000/bigben

  4. Esegui l'iterazione sulla funzione e sulla sua funzionalità per il tuo sito. Utilizza gli emulatori Firebase per testare queste iterazioni.

Per ottenere le migliori prestazioni, esegui la colocalizzazione delle funzioni con Hosting scegliendo una delle seguenti regioni:

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

Visita la pagina di configurazione di Hosting per maggiori dettagli sulle regole di riscrittura. Puoi anche scoprire di più sull'ordine di priorità delle risposte per varie configurazioni di Hosting.

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

Passaggio 4: esegui il deployment della funzione

Una volta che la funzione funziona come previsto nell'emulatore, puoi procedere con il deployment, il test e l'esecuzione con risorse di progetto reali. Questo è un buon momento per considerare l'impostazione delle opzioni di runtime per controllare il comportamento di scalabilità per le funzioni in esecuzione in produzione.

  1. Esegui il deployment della funzione, nonché dei contenuti e della configurazione di Hosting sul tuo sito, eseguendo il seguente comando dalla radice della directory del progetto locale:

    firebase deploy --only functions,hosting

  2. Accedi al tuo sito pubblicato 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

Utilizzare un framework web

In Cloud Functions puoi utilizzare framework web, come Express.js, per pubblicare 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 questo comando dalla directory functions:

    npm install express --save

  2. Apri il file /functions/index.js, quindi importa e inizializza Express.js:

    const functions = require('firebase-functions/v1');
const express = require('express');
const app = express();

  3. Aggiungi i due endpoint seguenti:

    1. Aggiungi il primo endpoint per pubblicare l'indice del nostro sito web all'indirizzo /.

      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 gestire il diverso percorso secondario che abbiamo configurato (in questo esempio, / e /api).

    {
 "hosting": {
   // ...

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

Aggiungere il middleware

Proseguendo con l'esempio, ora che utilizzi Express.js, puoi aggiungere il middleware Express.js nel modo tipico. Ad esempio, puoi attivare le richieste CORS sui nostri endpoint.

  1. Installa il middleware cors eseguendo il seguente comando:

    npm install --save cors

  2. Apri il file /functions/index.js, poi aggiungi cors all'app Express.js in questo modo:

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

Consulta la documentazione di Cloud Functions per scoprire di più sull'utilizzo di Firebase con le app Express e i moduli middleware.

Passaggi successivi