Pubblica contenuti dinamici e ospita microservizi con Cloud Functions

Accoppia Cloud Functions con Firebase Hosting per generare e pubblicare o creare API REST come microservizi.

Cloud Functions for Firebase ti consente di eseguire automaticamente il backend codice in risposta alle richieste HTTPS. Il tuo codice è memorizzato nel cloud di Google e viene eseguito in un ambiente gestito. Non è necessario gestire e scalare autonomamente server web.

Ad esempio, casi d'uso ed esempi per Cloud Functions integrati con Firebase Hosting, visita le nostre Panoramica serverless.

Connetti Cloud Functions a Firebase Hosting

Questa sezione fornisce un esempio dettagliato per connettere 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 dell'interfaccia a riga di comando Firebase e che che hai inizializzato Firebase Hosting.

    Per istruzioni dettagliate sull'installazione della CLI 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 da alla radice della directory del progetto:

        firebase init functions

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

      3. Verifica di avere una directory functions nel progetto locale (creata dal comando Firebase che hai appena eseguito). Questa directory functions è la posizione del 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 (denominata bigben) che risponde a HTTPS richieste con 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 localmente utilizzando Firebase Local Emulator Suite

    1. Dalla radice della directory del progetto locale, esegui questo :

      firebase emulators:start

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

Consulta la documentazione di Cloud Functions per saperne di più sulle richieste HTTPS.

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

Passaggio 3: indirizza le richieste HTTPS alla funzione

Con regole di riscrittura, puoi indirizzare le richieste che corrispondono a pattern specifici a una singola destinazione. I passaggi seguenti mostrano ti spiega come indirizzare tutte le richieste dal percorso ../bigben su Hosting al sito 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 :

      firebase emulators:start

    2. Visita l'URL ospitato localmente per il tuo sito come restituito dall'interfaccia a riga di comando (di solito localhost:5000), ma aggiungi l'URL con bigben, in questo modo: http://localhost:5000/bigben

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

Per ottenere prestazioni ottimali, colloca le tue funzioni con Hosting per 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 l'ordine di priorità delle risposte per varie configurazioni di Hosting.

Tieni presente che per migliorare il rendimento della pubblicazione di contenuti dinamici, puoi facoltativamente 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. Si tratta di un è il momento giusto per considerare l'impostazione delle opzioni di runtime controllare il comportamento di scalabilità per le funzioni in esecuzione in produzione.

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

    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

    • Qualsiasi dominio personalizzato collegato:
      CUSTOM_DOMAIN/bigben

di Gemini Advanced.

Utilizza un framework web

Puoi usare framework web come Express.js, in Cloud Functions per pubblicare i contenuti dinamici dell'app e scrivere più facilmente app web complesse.

La seguente sezione 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 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 pubblicare il diverso percorso secondario configurate (in questo esempio, / e /api).

    {
 "hosting": {
   // ...

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

Aggiungere il middleware

Continuando con il nostro esempio, ora che utilizzi Express.js, puoi aggiungere middleware Express.js nel modo consueto. Ad esempio, puoi attivare CORSA richieste sui nostri endpoint.

  1. Installa il middleware cors eseguendo questo 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 saperne di più sull'utilizzo di Firebase con le app Express e i moduli middleware.

Passaggi successivi