En Mi Local Funciona

Technical thoughts, stories and ideas

Azure: Publicando Apps de Angular, React o Vue en Azure AppService Static Web Apps fácilmente

Publicado por Santi Macias el

MicrosoftAzureSPAAppServicesWebApps

Como todos sabemos, Azure es una plataforma que crece y evoluciona muy rápidamente tanto en la actualización de los servicios actuales como con el enorme Marketplace de la plataforma donde se publican nuevos servicios constantemente a lo largo del año.

En esta ocasión, hablamos del nuevo servicio App Service Static Web Apps (en preview) que como su nombre indica esta pensado para publicar nuestros sitios web estáticos con HTML5 y aplicaciones SPA desarrolladas con Angular, React, Vue y otras tecnologías del lado cliente.

Un escenario común que nos permite este nuevo servicio es que podemos diseñar arquitecturas de aplicaciones SPA con APIs basadas en Serverless con Azure Functions y crear un entorno operativo automatizado desde GitHub Actions en poco tiempo sin necesidad de tener grandes conocimientos de Azure:

Además, tenemos una serie de propiedades interesantes como:

  • Autenticación y autorización integradas
  • Configuración de dominio personalizada
  • Gestión simplificada y unificada del ciclo de vida de la aplicación
  • Autoescalado del API dinámicamente según la demanda
  • Distribución global totalmente gestionada de contenido estático

Visual Studio Code

Si para desarrollar utilizáis Visual Studio Code, tenéis disponible la extensión dentro del Marketplace para descargarla:

Link: ms-azuretools.vscode-azurestaticwebapps

Demo Azure Static Web Apps

Para crear un sitio en Azure, necesitamos una cuenta de GitHub con el código fuente de la aplicación que vamos a publicar y seguir los pasos desde el portal de Azure:

Creamos el servicios en Azure, como vemos en este ejemplo:

Configuramos los accesos y permisos a la cuenta de GitHub para seleccionar el repositorio y rama que vamos a publicar mediante un Workflow de GitHub Actions:

Seguimos los pasos del asistente y en unos minutos ya tenemos el sitio creado en Azure:

Si visitamos la URL, accederemos a la pagina del AppService disponible donde veremos el mensaje que el sitio ya esta preparado para el contenido:

Ya tenemos creado nuestro espacio listo para publicar el contenido de nuestra aplicación.

Conclusiones

Con el nuevo servicio de Azure AppService Static Web Apps tenemos otra forma de publicar nuestras SPAs dentro del abanico de opciones que nos ofrece la plataforma para facilitarnos la vida.

Un punto a destacar es que utiliza por defecto una cuenta de GitHub y GitHub Actions para el proceso de despliegue en lugar de Azure DevOps.

Por último, recordar que este servicio todavía esta en Preview y no se recomienda para entornos de producción.

Si te ha gustado el articulo, ¡Síguenos en Twitter y no te pierdas los próximos posts sobre Azure!

Santi Macias
Autor

Santi Macias

Microsoft Tech Lead en atSistemas, +20 años trabajando con tecnologías Microsoft actualmente centrado sobretodo en Azure, Cloud Native, DevOps, Docker, Kubernetes, Microservicios y Serverless.