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
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 .
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:
Inicialice Cloud Functions ejecutando el siguiente comando desde la raíz del directorio de su proyecto:
firebase init functions
Cuando se le solicite, seleccione JavaScript (este ejemplo de guía usa JS).
Verifique que tenga un directorio de
functions
en su directorio de proyecto local (creado por el comando Firebase que acaba de ejecutar). Este directorio defunctions
es donde reside el código de Cloud Functions.
Paso 2: Cree y pruebe una función HTTPS para su sitio de alojamiento
Abra
/functions/index.js
en su editor favorito.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 unBONG
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>`); });
Pruebe sus funciones localmente con Firebase Local Emulator Suite .
Desde la raíz de su directorio de proyecto local, ejecute el siguiente comando:
firebase emulators:start
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
.
Abra su archivo
firebase.json
.Agregue la siguiente configuración de
rewrite
en la sección dehosting
:"hosting": { // ... // Add the "rewrites" attribute within "hosting" "rewrites": [ { "source": "/bigben", "function": "bigben", "region": "us-central1" // optional (see note below) } ] }
Confirme que su redirección funciona como se espera probando nuevamente con los emuladores de Firebase.
Desde la raíz de su directorio de proyecto local, ejecute el siguiente comando:
firebase emulators:start
Visite la URL alojada localmente para su sitio tal como la devuelve la CLI (generalmente
localhost:5000
), pero agregue la URL conbigben
, así:http://localhost:5000/bigben
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.
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
Acceda a su sitio en vivo y su función en las siguientes URL:
Sus subdominios de Firebase:
PROJECT_ID .web.app/bigben
yPROJECT_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.
Instale Express.js en su proyecto local ejecutando el siguiente comando desde su directorio de
functions
:npm install express --save
Abra su archivo
/functions/index.js
, luego importe e inicialice Express.js:const functions = require('firebase-functions'); const express = require('express'); const app = express();
Agregue los siguientes dos puntos finales:
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>`); });
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)}); });
Exporte la aplicación Express.js como una función HTTPS:
exports.app = functions.https.onRequest(app);
En su archivo
firebase.json
, dirija todas las solicitudes a la función de laapp
. 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 típica. Por ejemplo, puede habilitar las solicitudes CORS en nuestros puntos finales.
Instale el
cors
middleware ejecutando el siguiente comando:npm install --save cors
Abra su archivo
/functions/index.js
, luego agreguecors
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
Configure el almacenamiento en caché para su contenido dinámico en una CDN global.
Interactúe con otros servicios de Firebase mediante el SDK de administración de Firebase .
Revise los precios y las cuotas y los límites de Cloud Functions.