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 APIs 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 de uso 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 para 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 tener la versión más reciente de Firebase CLI y de que inicializaste Firebase Hosting.

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

  2. Asegúrate de haber configurado Cloud Functions:

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

    • 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. Verifica que tengas un directorio functions en el directorio del proyecto local (creado por el comando de Firebase que acabas de ejecutar). El código de Cloud Functions reside en el directorio functions.

Paso 2: Crea y prueba una función de HTTPS para 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 HTTPS (denominada 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. Prueba tus funciones localmente con Firebase Local Emulator Suite.

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

      firebase emulators:start

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

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

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

Paso 3: Dirige solicitudes HTTPS a la función

Con las reglas de reescritura, puedes dirigir solicitudes que coincidan con patrones específicos a un mismo destino. En los siguientes pasos, se muestra cómo dirigir todas las solicitudes desde la ruta de acceso ../bigben en el sitio de Hosting para 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",
    "region": "us-central1"  // optional (see note below)
    "pinTag": true           // optional (see note below)
  } ]
}

  3. Vuelve a probar con los emuladores de Firebase para confirmar que el redireccionamiento funciona como se espera.

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

      firebase emulators:start

    2. Visita la URL alojada de forma local de tu sitio como lo muestra la CLI (generalmente localhost:5000), pero agrega la URL con bigben, de esta manera: http://localhost:5000/bigben

  4. Realiza iteraciones en tu función y su funcionalidad para tu sitio. Usa los emuladores de Firebase para probar estas iteraciones.

Para obtener el mejor rendimiento, ubica tus funciones con Hosting por medio de una de las siguientes regiones:

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

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.

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

Paso 4: Implementa tu función

Una vez que tu función se ejecute como deseas en el emulador, puedes continuar con la implementación, la prueba y la ejecución con recursos reales del proyecto. Este es un buen momento para considerar la posibilidad de configurar opciones del entorno de ejecución para controlar el comportamiento de escalamiento en las funciones que se ejecutan en producción.

  1. Implementa tu función, así como el contenido y la configuración de Hosting en tu sitio; para ello, ejecuta el siguiente comando desde la raíz del directorio del proyecto local:

    firebase deploy --only functions,hosting

  2. Accede al sitio publicado y la función en las siguientes URLs:

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

    • Cualquier dominio personalizado conectado:
      CUSTOM_DOMAIN/bigben

Usa un framework web

Puedes usar frameworks 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, de la siguiente manera:

      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 HTTPS, como se indica a continuación:

    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 nuestro ejemplo, ahora que utilizas Express.js, puedes agregar Express.js middleware 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.

Próximos pasos