Sitios estáticos en Azure

Todavía recuerdo los primeros pasos en internet cuando creábamos o consumíamos páginas estáticas basadas en HTML, CSS y JavaScript. Incluso, era posible usar aquel navegador de texto Lynx. ¿Hemos vuelto al pasado? Sí y no, pero parece que hay casos de uso donde publicar un sitio web estático es más rentable y sostenible, que publicar una aplicación web cliente servidor.

Pensad en vuestra web corporativa. Sí, la de vuestra empresa, esa que cambiamos cada año o añadimos nuevo contenido cada mes. ¿Por qué tiene que alojarse en un servidor? Llamo servidor a un App Service de Azure, un IIS en un Windows Server, un Apache Server en un Linux o un contenedor en un AKS. ¿Realmente necesitamos CPU y RAM para esos sitios?

Para la mayoría seguro que no. La carga de trabajo se puede realizar completamente en el navegador del usuario, eso sí, generando todo el contenido necesario y sin perder funcionalidades.

Si hacéis una búsqueda de «static web» en internet, entre enlaces de la Wikipedia, os aparecerán «Static Site Generators» (SSG) que son un tipo de CMS que nos ayuda a generar el contenido estático de nuestros sitios. Entre los más populares tenemos: Hugo, Gatsby, Jekyll, NEXT.js, …

¿Qué es un Static Site Generator?

Un generador de sitios estáticos es una herramienta que nos permite combinar plantillas con contenido para generar un sitio web estático. Por ejemplo, diseño mis plantillas usando HTML y/o JavaScript y le añado el contenido de mi sitio usando HTML, Markdown y/o JSON.

Cada vez que añadimos nuevo contenido, hay que ejecutar las herramientas del generador para que se creen las páginas estáticas y las podamos publicar.

¿Qué ventajas tienen los sitios estáticos?

Por definición, un sitio estático no hace consultas a ningún servidor, aunque esto no tiene por qué ser siempre así. Esto implica que las páginas que nuestros usuarios van a consultar ya están creadas, no hay que esperar a que el servidor genere el contenido, y por ende, nuestro contenido se renderizará mucho más rápido en el navegador de nuestros usuarios.

Los sitios estáticos se pueden considerar más seguros, aunque no hay sitio seguro al 100%, porque no hay ningún servidor al que se pueda conectar un usuario malicioso para comprometer el contenido o el resto de las aplicaciones que se puedan estar ejecutando en ese servidor.

El ahorro de costes también puede ser una de las ventajas. Pensad que para ejecutar vuestra web de servidor hace falta algún tipo de hosting con CPU y memoria RAM, una máquina virtual, un App Service de Azure, etc. Sin embargo, para ejecutar un sitio estático sólo necesitamos un tipo de almacenamiento que soporte peticiones HTTP y/o un Content Delivery Network (CDN) que distribuya y cachee nuestro contenido por las redes.

¿Qué opciones tengo en Azure para publicar mis sitios estáticos?

Azure tiene dos servicios que permiten publicar sitios estáticos, Azure Storage y Azure Static Web Apps, con funcionalidades base similares, pero no al 100% iguales.

Azure Storage es el servicio base de almacenamiento de Azure. En él podemos configurar un contenedor especial, llamado $web, donde podemos alojar nuestro sitio estático. A partir de aquí, configuramos el nombre del dominio y listo: un sitio web estático 100% funcional.

Con el servicio de CDN de Azure conectado al Storage, le añadimos las propias funcionalidades base de un CDN, pero también podemos publicar el sitio estático usando el protocolo HTTPS.

Azure Static Web Apps es la versión enlatada de los sitios estáticos en Azure. Además de permitirnos publicar nuestro contenido estático, tiene otras muchas funcionalidades que puede ser de utilidad.

Posibilidad de integrar nuestro sitio a una API serverless en Azure Functions. El contenido está distribuido globalmente como si tuviéramos un CDN, certificados SSL gratuito con renovación automática, configurar nuestro propio dominio, diferentes proveedores de autenticación. Capacidades que no tenemos con Azure Storage o que implican mucha más configuración por nuestra parte, muy accesibles por configuración en las Static Web Apps.

La web de la revista CompartiMOSS, como ejemplo

Hace unos meses publicamos la nueva web de la revista CompartiMOSS. Básicamente realizamos un cambio de tecnología para quitar SharePoint 2013 como CMS y poner Gatsby como SSG.

Con Gatsby generamos todo el contenido estático de la revista, con más de 400 artículos que se redactan usando Markdown. Las diferentes plantillas de artículos, autores, etc., están creadas usando ReactJS.

Como editores, las principales ventajas han sido:

• Facilidad y velocidad al generar nuevos artículos en Markdown
• Velocidad al consumir todo el contenido estático desplegado en Azure Storage con Azure CDN
• Ahorro de coste, pues pasamos de una máquina virtual en Azure de unos 200€ mensuales, a un coste de servicios de Storage y CDN de unos 4€ mensuales.

No todo son ventajas, alguna pega tiene que aparecer. Por ejemplo, una vez  tenemos el contenido de un nuevo número de la revista, tardamos casi una hora en generar todo el sitio estático. No es un problema, porque no necesitamos publicar de inmediato, pero hay que tenerlo en cuenta para sitios que tienen mucho contenido como el nuestro, no sólo en artículos, sino también las imágenes de los artículos.

Los sitios estáticos tienen sus pros y sus contras, y no todas las aplicaciones web son aplicables a esta arquitectura serverless. Lo ideal es analizar todos los puntos de vista para pensar en si las ventajas de un sitio estático son asumibles frente a las desventajas que podamos tener.