{"id":2428,"date":"2021-04-16T09:40:32","date_gmt":"2021-04-16T07:40:32","guid":{"rendered":"http:\/\/blogs.encamina.com\/por-una-nube-sostenible\/?p=2428"},"modified":"2021-04-16T09:40:32","modified_gmt":"2021-04-16T07:40:32","slug":"sitios-estaticos-en-azure","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/por-una-nube-sostenible\/sitios-estaticos-en-azure\/","title":{"rendered":"Sitios est\u00e1ticos en Azure"},"content":{"rendered":"

\"\"<\/p>\n

Todav\u00eda recuerdo los primeros pasos en internet cuando cre\u00e1bamos o consum\u00edamos p\u00e1ginas est\u00e1ticas basadas en HTML, CSS y JavaScript<\/strong>. Incluso, era posible usar aquel navegador de texto Lynx<\/a>. \u00bfHemos vuelto al pasado?<\/strong> S\u00ed y no, pero parece que hay casos de uso donde publicar un sitio web est\u00e1tico es m\u00e1s rentable y sostenible, que publicar una aplicaci\u00f3n web cliente servidor.<\/p>\n

<\/p>\n

Pensad en vuestra web corporativa. S\u00ed, la de vuestra empresa, esa que cambiamos cada a\u00f1o o a\u00f1adimos nuevo contenido cada mes. \u00bfPor qu\u00e9 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. \u00bfRealmente necesitamos CPU y RAM para esos sitios?<\/strong><\/p>\n

Para la mayor\u00eda seguro que no. La carga de trabajo se puede realizar completamente en el navegador del usuario, eso s\u00ed, generando todo el contenido necesario y sin perder funcionalidades.<\/p>\n

Si hac\u00e9is una b\u00fasqueda de \u00abstatic web\u00bb en internet, entre enlaces de la Wikipedia<\/a>, os aparecer\u00e1n \u00abStatic Site Generators\u00bb<\/strong><\/a> (SSG) que son un tipo de CMS que nos ayuda a generar el contenido est\u00e1tico de nuestros sitios. Entre los m\u00e1s populares tenemos: Hugo<\/a>, Gatsby<\/a>, Jekyll<\/a>, NEXT.js<\/a>, …<\/p>\n

<\/span>\u00bfQu\u00e9 es un Static Site Generator?<\/span><\/h2>\n

Un generador de sitios est\u00e1ticos es una herramienta que nos permite combinar plantillas con contenido para generar un sitio web est\u00e1tico<\/strong>. Por ejemplo, dise\u00f1o mis plantillas usando HTML y\/o JavaScript y le a\u00f1ado el contenido de mi sitio usando HTML, Markdown y\/o JSON.<\/p>\n

\"\"<\/a><\/p>\n

Cada vez que a\u00f1adimos nuevo contenido, hay que ejecutar las herramientas del generador para que se creen las p\u00e1ginas est\u00e1ticas y las podamos publicar.<\/p>\n

<\/span>\u00bfQu\u00e9 ventajas tienen los sitios est\u00e1ticos?<\/span><\/h2>\n

Por definici\u00f3n, un sitio est\u00e1tico no hace consultas a ning\u00fan servidor<\/strong>, aunque esto no tiene por qu\u00e9 ser siempre as\u00ed. Esto implica que las p\u00e1ginas que nuestros usuarios van a consultar ya est\u00e1n creadas, no hay que esperar a que el servidor genere el contenido, y por ende, nuestro contenido se renderizar\u00e1 mucho m\u00e1s r\u00e1pido<\/strong> en el navegador de nuestros usuarios.<\/p>\n

Los sitios est\u00e1ticos se pueden considerar m\u00e1s seguros<\/strong>, aunque no hay sitio seguro al 100%, porque no hay ning\u00fan 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.<\/p>\n

El ahorro de costes<\/strong> tambi\u00e9n puede ser una de las ventajas. Pensad que para ejecutar vuestra web de servidor hace falta alg\u00fan tipo de hosting con CPU y memoria RAM, una m\u00e1quina virtual, un App Service de Azure, etc. Sin embargo, para ejecutar un sitio est\u00e1tico s\u00f3lo 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.<\/p>\n

<\/span>\u00bfQu\u00e9 opciones tengo en Azure para publicar mis sitios est\u00e1ticos?<\/span><\/h2>\n

Azure tiene dos servicios que permiten publicar sitios est\u00e1ticos<\/strong>, Azure Storage<\/a> y Azure Static Web Apps<\/a>, con funcionalidades base similares, pero no al 100% iguales.<\/p>\n

Azure Storage<\/strong> es el servicio base de almacenamiento de Azure. En \u00e9l podemos configurar un contenedor especial, llamado $web, donde podemos alojar nuestro sitio est\u00e1tico. A partir de aqu\u00ed, configuramos el nombre del dominio y listo: un sitio web est\u00e1tico 100% funcional.<\/p>\n

<\/p>\n

Con el servicio de CDN de Azure<\/a> conectado al Storage, le a\u00f1adimos las propias funcionalidades base de un CDN, pero tambi\u00e9n podemos publicar el sitio est\u00e1tico usando el protocolo HTTPS.<\/p>\n

Azure Static Web Apps<\/strong> es la versi\u00f3n enlatada de los sitios est\u00e1ticos en Azure. Adem\u00e1s de permitirnos publicar nuestro contenido est\u00e1tico, tiene otras muchas funcionalidades que puede ser de utilidad.<\/p>\n

\"Azure<\/p>\n

Posibilidad de integrar nuestro sitio a una API serverless en Azure Functions. El contenido est\u00e1 distribuido globalmente como si tuvi\u00e9ramos un CDN, certificados SSL gratuito con renovaci\u00f3n autom\u00e1tica, configurar nuestro propio dominio, diferentes proveedores de autenticaci\u00f3n. Capacidades que no tenemos con Azure Storage o que implican mucha m\u00e1s configuraci\u00f3n por nuestra parte, muy accesibles por configuraci\u00f3n en las Static Web Apps.<\/p>\n

<\/span>La web de la revista CompartiMOSS, como ejemplo<\/span><\/h2>\n

Hace unos meses publicamos la nueva web de la revista CompartiMOSS.<\/a> B\u00e1sicamente realizamos un cambio de tecnolog\u00eda para quitar SharePoint 2013 como CMS y poner Gatsby como SSG.<\/p>\n

Con Gatsby generamos todo el contenido est\u00e1tico de la revista<\/strong>, con m\u00e1s de 400 art\u00edculos que se redactan usando Markdown<\/a>. Las diferentes plantillas de art\u00edculos, autores, etc., est\u00e1n creadas usando ReactJS<\/a>.<\/p>\n

Como editores, las principales ventajas han sido:<\/p>\n