Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Sirva contenido dinámico y aloje microservicios con Cloud Functions

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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

Cloud Functions para Firebase le 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 hay necesidad de administrar y escalar sus propios servidores.

Para ver ejemplos de casos de uso y ejemplos de Cloud Functions integrados 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 de recorrido para conectar una función a Firebase Hosting.

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

Paso 1: configurar funciones en la nube

  1. Asegúrese de tener la versión más reciente de Firebase CLI y de haber inicializado Firebase Hosting.

    Para obtener instrucciones detalladas sobre la instalación de la CLI y la inicialización de Hosting, consulte la guía de inicio para 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 de guía usa JS).

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

Paso 2: Cree y pruebe una función HTTPS para su sitio de alojamiento

  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 con Firebase Local Emulator Suite .

    1. Desde la raíz de su directorio de 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 indica cómo acceder a esta función HTTPS desde una URL de alojamiento de Firebase para que pueda generar contenido dinámico para su sitio alojado en Firebase.

Paso 3: solicitudes HTTPS directas a su función

Con las reglas de reescritura , puede dirigir solicitudes que coincidan con patrones específicos a un solo 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 de rewrite en la sección de hosting :

    "hosting": {
      // ...
    
      // Add the "rewrites" attribute within "hosting"
      "rewrites": [ {
        "source": "/bigben",
        "function": "bigben",
        "region": "us-central1"  // optional (see note below)
      } ]
    }
    
  3. Confirme que su redirección funciona como se espera probando nuevamente con los emuladores de Firebase.

    1. Desde la raíz de su directorio de 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. Repita su función y su funcionalidad para su sitio. Usa los emuladores de Firebase para probar estas iteraciones.

Visite la página de configuración de hospedaje 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, puede ajustar opcionalmente la configuración de la memoria caché .

Paso 4: Implemente su función

Una vez que su función funcione como desea en el emulador, puede proceder a implementarla, probarla y ejecutarla con recursos reales del proyecto. Este es un buen momento para considerar la configuración de 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 de su directorio de proyecto local:

    firebase deploy --only functions,hosting
  2. Acceda a su sitio en vivo y su función en las siguientes URL:

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

    • Cualquier dominio personalizado conectado:
      CUSTOM_DOMAIN /bigben

Usar un marco web

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

La siguiente sección proporciona un ejemplo de guía 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 de 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 siguientes dos puntos finales:

    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 de BONG como una 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 que Express.js sirva las diferentes rutas secundarias que configuramos (en este ejemplo, / y /api ).

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

Agregar software intermedio

Continuando con nuestro ejemplo, ahora que está usando 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 cors middleware 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);
    

Visite 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