Entrega contenido dinámico y aloja microservicios con Cloud Functions

Sincroniza Cloud Functions con Firebase Hosting para generar y entregar tu contenido dinámico o compilar las API de REST como microservicios.

Cloud Functions para Firebase te permite ejecutar de forma automática el código de backend en respuesta a las solicitudes HTTPS. Tu código se almacena en la nube de Google y se ejecuta en un entorno administrado. No necesitas administrar ni escalar tus propios servidores.

Para ver casos prácticos y muestras de ejemplo de Cloud Functions integrado en Firebase Hosting, consulta la descripción general sobre la computación sin servidores.

Conecta Cloud Functions a Firebase Hosting

En esta sección, se proporciona un ejemplo detallado sobre cómo conectar una función a Firebase Hosting.

Recuerda que si quieres mejorar el rendimiento de la entrega de contenido dinámico, puedes configurar la caché.

Paso 1: Configura Cloud Functions

  1. Asegúrate de cumplir con estas condiciones:

    Consulta la guía de introducción de Hosting para obtener instrucciones detalladas sobre cómo instalar CLI y, luego, inicializar Hosting.

  2. Si ya configuraste Cloud Functions, puedes continuar con el Paso 2: Crea una función de HTTP.

  3. Si aún no has configurado Cloud Functions, haz lo siguiente:

    1. Inicializa Cloud Functions; para ello, ejecuta el siguiente comando desde la raíz del directorio del proyecto:

      firebase init functions
    2. Cuando se te solicite, selecciona JavaScript (en este ejemplo detallado, se utiliza JS).

    3. Asegúrate de tener un directorio functions en el directorio del proyecto local. El código de Cloud Functions reside en el directorio functions.

Paso 2: Crea una función de HTTP en el sitio de Hosting

  1. Abre /functions/index.js en tu editor favorito.

  2. Reemplaza el contenido del archivo por el siguiente código.

    Este código crea una función de HTTP (denominada bigben) que responde a las solicitudes HTTP 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. Implementa esta función en el sitio; para ello, ejecuta el siguiente comando desde la raíz del directorio del proyecto:

    firebase deploy

    Ahora se puede acceder a esta función en la URL
    https://us-central1-projectID.cloudfunctions.net/bigben.

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

En el siguiente paso, se te indicará cómo acceder a esta función de HTTP desde una URL de Firebase Hosting para que pueda generar contenido dinámico para el sitio alojado en Firebase.

Paso 3: Dirige solicitudes de Hosting a la función

Con las reglas de reescritura, puedes dirigir solicitudes que coincidan con patrones específicos a un mismo destino. Por ejemplo, puedes usarla para dirigir todas las solicitudes desde la página /bigben del sitio de Hosting a fin de ejecutar la función bigben.

  1. Abre el archivo firebase.json.

  2. Agrega la siguiente configuración de rewrite en la sección hosting:

    "hosting": {
     // ...
    
     // Add the "rewrites" attribute within "hosting"
     "rewrites": [ {
       "source": "/bigben",
       "function": "bigben"
     } ]
    }
    
  3. Ejecuta el comando firebase deploy nuevamente.

    Ahora, se puede acceder a esta función mediante las siguientes URL:

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

    • Cualquier dominio personalizado conectado: custom-domain/bigben

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

Usa un marco de trabajo web

Puedes usar marcos de trabajo web, como Express.js, en Cloud Functions para entregar el contenido dinámico de tu app y escribir aplicaciones web complejas con mayor facilidad.

En la siguiente sección, se proporciona un ejemplo detallado para usar Express.js con Firebase Hosting y Cloud Functions.

  1. Para instalar Express.js en el proyecto local, ejecuta el siguiente comando desde el directorio functions:

    npm install express --save
  2. Abre el archivo /functions/index.js y, a continuación, importa e inicializa Express.js:

    const functions = require('firebase-functions');
    const express = require('express');
    const app = express();
    
  3. Agrega los dos extremos que siguen a continuación:

    1. Agrega a / el primer extremo para entregar el índice del sitio web.

      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 agrega otro extremo para mostrar el recuento de 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. Exporta la app para Express.js como una función de HTTP:

    exports.app = functions.https.onRequest(app);
    
  5. En el archivo firebase.json, dirige todas las solicitudes a la función app. Esta operación de reescritura permite que Express.js entregue la ruta secundaria que configuramos (en este ejemplo, / y /api).

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

Agrega middleware

Para continuar con el ejemplo, ahora que utilizas Express.js, puedes agregar middleware de Express.js de la manera típica. Por ejemplo, puedes habilitar las solicitudes CORS en nuestros extremos.

  1. Instala el middleware cors; para ello, ejecuta el siguiente comando:

    npm install --save cors
  2. Abre el archivo /functions/index.js y, luego, agrega cors a la app de Express.js, de la siguiente manera:

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

Consulta la documentación de Cloud Functions para obtener información sobre cómo usar Firebase con las apps para Express y los módulos de middleware.

Realiza pruebas locales

Puedes entregar y ejecutar funciones de HTTP de manera local con Firebase CLI. Esto te permite ver y probar el proyecto de Firebase antes de implementarlo en producción.

  1. Asegúrate de que Firebase CLI y el SDK de firebase-functions estén actualizados a sus versiones más recientes. Para actualizar ambas herramientas, ejecuta estos dos comandos desde el directorio functions del proyecto local:

    npm install -g firebase-tools
    npm install --save firebase-functions@latest
  2. Entrega el proyecto de Firebase de manera local. Para ello, ejecuta el siguiente comando desde la raíz del directorio del proyecto.

    Este comando emula el hosting y las funciones en URL alojadas de manera local.

    firebase serve
Cuando usas Cloud Functions a fin de generar contenido dinámico para Firebase Hosting, firebase serve usa las funciones de HTTP locales como proxies de hosting de forma predeterminada. Si quieres conocer más opciones de configuración para Firebase Hosting y Cloud Functions, consulta la referencia de Firebase CLI.

Próximos pasos