Estoy trabajando en un proyecto personal diseñado para ayudar a los usuarios a encontrar conciertos de música en Chicago. Un aspecto notable de este proyecto desde una perspectiva arquitectónica es que toda la aplicación web está alojada de forma totalmente gratuita.

La siguiente imagen ilustra los componentes de la arquitectura:

Descargo de responsabilidad: Ninguno de los servicios que menciono aquí me patrocina; Los destaco simplemente porque los he encontrado útiles.

Repositorio de base de código del proyecto

GitHub es la plataforma más popular para alojar su código base de forma gratuita. También probé alternativas como Bitbucket y GitLab, y funcionan igual de bien. Honestamente, cualquiera de estas opciones funcionará; simplemente elige una y sigue adelante sin pensar demasiado.

Orquestación del flujo de trabajo front-end

En un entorno profesional, normalmente trabajaría directamente con AWS u otro proveedor de servicios en la nube, lo que le brindaría control total sobre las implementaciones, las notificaciones y el monitoreo. Sin embargo, este enfoque requiere más tiempo y esfuerzo. Afortunadamente, servicios como Netlify y Vercel simplifican este proceso al eliminar gran parte de la fricción. Permiten implementaciones rápidas pero dependen de su ecosistema. Una vez que su sitio comience a recibir un tráfico significativo (miles de visitas), es una buena idea verificar los límites del nivel gratuito para evitar costos inesperados. Para proyectos personales, he utilizado estos servicios varias veces sin ningún problema hasta ahora.

Dicho esto, Netlify ofrece varias funciones listas para usar. En la imagen de la arquitectura, Netlify proporciona automáticamente tres de los componentes:

• Integración GUI:

La GUI de Netlify te permite integrar tu repositorio de código base: GitHub, en mi caso. Netlify comprende la configuración predeterminada de una aplicación Next.js y la utiliza para implementar el código sin problemas.

• Alojamiento de sitios estáticos:

chicagomusiccompass.com es una aplicación web estática, lo que significa que no hay ningún servidor involucrado. Cuando se activa una implementación, la aplicación genera activos estáticos (HTML, JS y CSS) que se almacenan en un depósito de S3. Luego, Netlify maneja la configuración con CloudFront y le proporciona una URL lista para usar.

• Funciones Lambda:

Los sitios estáticos a menudo necesitan obtener datos de otros dominios. Esto generalmente requiere un proxy, conocido como "Back End for Front End" (BFF). Las aplicaciones cliente, de forma predeterminada, no tienen acceso a otros dominios a menos que el servidor lo permita explícitamente a través de CORS, lo cual no siempre es una práctica común. Para este proyecto, estoy usando un proxy para extraer un archivo JSON de un dominio diferente.

Netlify administra toda la orquestación de implementación y proporciona una URL (subdominio) que puede vincular a su dominio para obtener una URL fácil de usar.

Por ejemplo, esta es la URL de Netlify para mi proyecto:

https://clinquant-chebakia-f64a5b.netlify.app/

Luego configuré mi dominio con un registro CNAME para apuntar www a la URL de Netlify:

Cuando un usuario visita https://www.chicagomusiccompass.com/, DNS resuelve el dominio en su destino final: ¿la URL de Netlify?.

Si bien están sucediendo muchas cosas aquí, la mayor parte se configura a través de paneles (GUI). La clave es entender cómo está todo conectado; el resto es simplemente navegar por la interfaz de usuario.

Tareas programadas automatizadas (tareas cron)

cron-job.org es un servicio que le permite ejecutar trabajos cron de forma gratuita. Así es como funciona en esta configuración:

a) Netlify Deploy Hook:
Netlify proporciona un webhook configurable (un punto final de URL) que, cuando se activa, vuelve a implementar el sitio. Esto garantiza que chicagomusiccompass.com pueda actualizarse automáticamente cuando sea necesario.

b) Integración cron-job.org:
Con cron-job.org, puede programar una tarea cron; en este caso, configurarla para que se ejecute diariamente. El trabajo simplemente activa el gancho de implementación de Netlify, lo que solicita a Netlify que vuelva a implementar (actualizar) el sitio todos los días.

Nota: Si bien chicagomusiccompass.com también tiene componentes de back-end, esta publicación se centra únicamente en la arquitectura de front-end.

Resumen

chicagomusiccompass.com es una aplicación Next.js que, cuando se compila, genera un sitio estático (sin servidor) junto con un par de funciones Lambda. El repositorio de GitHub está integrado con Netlify, por lo que cada envío al repositorio desencadena una nueva implementación. Este proceso genera una nueva versión del sitio estático y actualiza las funciones de Lambda. Netlify maneja la implementación de estos archivos y aprovisiona automáticamente la infraestructura de red necesaria, permitiendo el acceso a la aplicación web a través de un subdominio. Además, configuré el dominio personalizado, chicagomusiccompass.com, para que apunte a Netlify. El sitio se mantiene actualizado mediante una tarea cron diaria que activa un enlace de implementación de Netlify.

El sitio ha estado funcionando durante algunos meses y actualmente no recibe mucho tráfico, pero en términos de costos de infraestructura, no estoy pagando ni un centavo.

En un entorno profesional, dependiendo de los requisitos del proyecto, podría elegir una solución similar, especialmente en las primeras etapas. Posteriormente, podría migrar ciertos componentes a medida que el negocio crezca y las necesidades evolucionen.

La arquitectura front-end se ha vuelto bastante interesante en estos días, especialmente cuando se pueden aprovechar los servicios gratuitos. Sin embargo, recuerda que si un servicio es gratuito, tú podrías ser el producto.