Ofrezca contenido dinámico y aloje microservicios con Cloud Functions

Combine Cloud Functions con Firebase Hosting para generar y ofrecer su contenido dinámico o crear API REST como microservicios.

Cloud Functions para Firebase te permite ejecutar automáticamente código de backend en respuesta a solicitudes HTTPS. Su código se almacena en la nube de Google y se ejecuta en un entorno administrado. No es necesario administrar ni escalar sus propios servidores.

Para ver ejemplos de casos de uso y ejemplos de funciones en la nube integradas con Firebase Hosting, visite nuestra descripción general sin servidor .

Conecte las funciones de la nube a Firebase Hosting

Esta sección proporciona un ejemplo paso a paso para conectar una función a Firebase Hosting.

Tenga en cuenta que para mejorar el rendimiento de la entrega de contenido dinámico, opcionalmente puede ajustar la configuración de la caché .

Paso 1: configurar las funciones de la nube

  1. Asegúrese de tener la última versión de Firebase CLI y de haber inicializado Firebase Hosting.

    Para obtener instrucciones detalladas sobre cómo instalar la CLI e inicializar Hosting, consulte la guía de introducción a Hosting .

  2. Asegúrate de haber configurado Cloud Functions:

    • Si ya configuró Cloud Functions, puede continuar con el Paso 2: Crear y probar una función HTTPS .

    • Si no ha configurado Cloud Functions:

      1. Inicialice Cloud Functions ejecutando el siguiente comando desde la raíz del directorio de su proyecto:

        firebase init functions

      2. Cuando se le solicite, seleccione JavaScript (este ejemplo práctico utiliza JS).

      3. Verifique que tenga un directorio functions en el directorio de su proyecto local (creado por el comando de Firebase que acaba de ejecutar). Este directorio functions es donde reside el código de Cloud Functions.

Paso 2: cree y pruebe una función HTTPS para su sitio de hosting

  1. Abra /functions/index.js en su editor favorito.

  2. Reemplace el contenido del archivo con el siguiente código.

    Este código crea una función HTTPS (llamada bigben ) que responde a las solicitudes HTTPS con un BONG para cada hora del día, como un reloj.

    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. Pruebe sus funciones localmente usando Firebase Local Emulator Suite .

    1. Desde la raíz del directorio de su proyecto local, ejecute el siguiente comando:

      firebase emulators:start

    2. Acceda a la función a través de la URL local devuelta por la CLI, por ejemplo: http://localhost:5001/ PROJECT_ID /us-central1/bigben .

Visite la documentación de Cloud Functions para obtener más información sobre las solicitudes HTTPS.

El siguiente paso le explica cómo acceder a esta función HTTPS desde una URL de Firebase Hosting para que pueda generar contenido dinámico para su sitio alojado en Firebase.

Paso 3: Dirija las solicitudes HTTPS a su función

Con reglas de reescritura , puede dirigir solicitudes que coincidan con patrones específicos a un único destino. Los siguientes pasos le muestran cómo dirigir todas las solicitudes desde la ruta ../bigben en su sitio de alojamiento para ejecutar la función bigben .

  1. Abra su archivo firebase.json .

  2. Agregue la siguiente configuración rewrite en la sección 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. Confirme que su redireccionamiento funcione como se esperaba probando nuevamente con los emuladores de Firebase.

    1. Desde la raíz del directorio de su proyecto local, ejecute el siguiente comando:

      firebase emulators:start

    2. Visite la URL alojada localmente para su sitio tal como la devuelve la CLI (generalmente localhost:5000 ), pero agregue la URL con bigben , así: http://localhost:5000/bigben

  4. Itere su función y su funcionalidad para su sitio. Utilice los emuladores de Firebase para probar estas iteraciones.

Para obtener el mejor rendimiento, coloque sus funciones con Hosting eligiendo una de las siguientes regiones:

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

Visite la página de configuración de Hosting para obtener más detalles sobre las reglas de reescritura . También puede obtener información sobre el orden de prioridad de las respuestas para varias configuraciones de Hosting.

Tenga en cuenta que para mejorar el rendimiento de la entrega de contenido dinámico, opcionalmente puede ajustar la configuración de la caché .

Paso 4: implemente su función

Una vez que su función funcione como lo desea en el emulador, puede proceder a implementarla, probarla y ejecutarla con recursos reales del proyecto. Este es un buen momento para considerar configurar opciones de tiempo de ejecución para controlar el comportamiento de escalado de las funciones que se ejecutan en producción.

  1. Implemente su función, así como su contenido y configuración de Hosting en su sitio ejecutando el siguiente comando desde la raíz del directorio de su proyecto local:

    firebase deploy --only functions,hosting

  2. Acceda a su sitio en vivo y su función en las siguientes URL:

    • Tus subdominios de Firebase:
      PROJECT_ID .web.app/bigben y PROJECT_ID .firebaseapp.com/bigben

    • Cualquier dominio personalizado conectado:
      CUSTOM_DOMAIN /bigben

Utilice un marco web

Puede utilizar marcos web, como Express.js , en Cloud Functions para ofrecer el contenido dinámico de su aplicación y escribir aplicaciones web complejas más fácilmente.

La siguiente sección proporciona un ejemplo paso a paso para usar Express.js con Firebase Hosting y Cloud Functions.

  1. Instale Express.js en su proyecto local ejecutando el siguiente comando desde su directorio functions :

    npm install express --save

  2. Abra su archivo /functions/index.js , luego importe e inicialice Express.js:

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

  3. Agregue los dos puntos finales siguientes:

    1. Agregue el primer punto final para servir el índice de nuestro sitio web en / .

      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. Y otro punto final para devolver el recuento BONG como API, en formato JSON, en /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. Exporte la aplicación Express.js como una función HTTPS:

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

  5. En su archivo firebase.json , dirija todas las solicitudes a la función de la app . Esta reescritura permite a Express.js servir las diferentes subrutas que configuramos (en este ejemplo, / y /api ).

    {
 "hosting": {
   // ...

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

Agregar middleware

Continuando con nuestro ejemplo, ahora que está utilizando Express.js, puede agregar el middleware Express.js de la forma habitual. Por ejemplo, puede habilitar las solicitudes CORS en nuestros puntos finales.

  1. Instale el middleware cors ejecutando el siguiente comando:

    npm install --save cors

  2. Abra su archivo /functions/index.js , luego agregue cors a su aplicación Express.js, así:

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

Visita la documentación de Cloud Functions para obtener más información sobre el uso de Firebase con aplicaciones Express y módulos de middleware.

Próximos pasos