Aplicaciones Web Estáticas de Azure Gratis - Configuración y Despliegue Explicado por Tim Corey

Qué Son las Azure Static Web Apps y Por Qué Son Importantes

Al inicio del video, Tim Corey explica que las Azure Static Web Apps te permiten desplegar tantas aplicaciones web como desees de manera gratuita. Destaca que estas aplicaciones se alojan globalmente a través de centros de datos de Microsoft Azure y se entregan a través de una red de entrega de contenido, lo que garantiza alta disponibilidad, balanceo de carga y baja latencia para los usuarios que realizan solicitudes HTTP.

Tim señala que estas aplicaciones web admiten autenticación, aplicaciones API e integración con APIs RESTful. Incluso en el nivel gratuito, las Azure Static Web Apps ofrecen una seguridad mejorada y alto rendimiento sin necesidad de gestionar servidores, máquinas virtuales o infraestructura subyacente. Este es uno de los importantes beneficios de usar una plataforma como servicio en lugar de gestionar máquinas virtuales de Azure o servidores locales.

Explica que las Azure Static Web Apps son ideales para aplicaciones web de front-end, como HTML, CSS, JavaScript, React y Blazor WebAssembly, pero no para aplicaciones que requieren procesamiento del lado del servidor.

Alcance del Video y Contexto de Aprendizaje de Azure

Tim explica que este video proporciona un tutorial enfocado en lugar de una visión completa de todos los servicios de Azure. Mientras que Azure App Service admite muchos lenguajes, aplicaciones móviles, aplicaciones API e incluso contenedores Docker, este video se concentra en un servicio específico dentro de Microsoft Azure.

Menciona que si los espectadores quieren una cobertura más profunda de temas como seguridad, gestión de costos y aplicaciones críticas para el negocio, esos temas se cubren en sus cursos de Azure. Sin embargo, el objetivo aquí es mostrar cuán rápidamente se puede crear e implementar una aplicación web utilizando Azure Static Web Apps y despliegue continuo.

Creación de un Repositorio de GitHub para un Sitio Web Estático

Tim comienza creando un nuevo repositorio de GitHub, explicando que GitHub es gratuito y se integra perfectamente con los servicios de Azure. Este repositorio contendrá el código fuente para un sitio web estático simple.

Hace que el repositorio sea privado, agrega un archivo README, y selecciona un archivo .gitignore adecuado para Visual Studio y Visual Studio Code. Tim aclara que, aunque está usando Visual Studio Code, el mismo proceso funciona con Visual Studio.

Este repositorio representa el punto de partida para alojar sitios web utilizando Azure. Tim enfatiza que las Azure Static Web Apps se implementan directamente desde el código fuente, haciendo que el despliegue continuo sea sencillo y confiable.

Construcción de una Aplicación Web HTML Simple

Usando Visual Studio Code, Tim crea un archivo index.html, que sirve como punto de entrada para el sitio web. Utiliza atajos de Emmet para generar una estructura HTML básica y agrega contenido mínimo para demostrar la funcionalidad.

Este paso muestra cómo las aplicaciones web básicas se pueden implementar sin ningún servicio backend, bases de datos o servidores. Tim aclara que esta simplicidad es intencional, ya que las Azure Static Web Apps están diseñadas específicamente para cargas de trabajo de front-end.

Una vez completado, realiza el commit de los cambios y sube el código fuente a GitHub, activando la canalización de despliegue más adelante en el proceso.

Creación de una Azure Static Web App en el Azure Portal

Tim cambia al Azure Portal y crea un nuevo recurso de Static Web App. Explica la importancia de crear un grupo de recursos, señalando que los grupos de recursos facilitan la gestión de recursos, limpieza de entornos y evitan costos innecesarios.

Destaca la selección del nivel gratuito, explicando que el nivel gratuito es rápido, confiable y suficiente para la mayoría de los sitios web de pequeñas empresas y proyectos personales. Mientras que los planes de servicio de Azure App Service pueden requerir un plan de servicio de aplicaciones y tarifas mensuales, las Azure Static Web Apps en el nivel gratuito eliminan completamente esa complejidad.

Tim menciona brevemente que su propio sitio web funciona en Azure Static Web Apps, demostrando el uso en el mundo real de este servicio en producción.

Conectando GitHub y Habilitando el Despliegue Continuo

Tim conecta la Azure Static Web App a GitHub, seleccionando el repositorio y la rama. Explica que Azure configura automáticamente un flujo de trabajo de GitHub Actions para manejar el despliegue continuo.

Este flujo de trabajo elimina la necesidad de pasos de implementación manuales. Cada vez que cambia el código fuente, la aplicación web se reconstruye y se implementa automáticamente. Tim señala que esta es una característica clave de las plataformas modernas en la nube y uno de los principales beneficios de usar Microsoft Azure para alojar aplicaciones web.

Tokens de Despliegue y Configuración de Seguridad

Tim navega a la configuración del repositorio de GitHub para mostrar el token de despliegue almacenado como un secreto. Este token permite la comunicación segura entre GitHub y Azure.

Explica que esta configuración proporciona una seguridad mejorada sin requerir que los desarrolladores configuren las credenciales manualmente. El token de API de la Azure Static Web App asegura que solo los flujos de trabajo autorizados puedan desplegar la aplicación.

Viendo el Sitio Web Estático Desplegado

Una vez finalizado el despliegue, Tim abre el sitio web en vivo directamente desde el Azure Portal. El sitio ahora es accesible públicamente y está alojado en la nube.

Explica que este mismo proceso funciona para otros frameworks de front-end, ya que en última instancia producen archivos estáticos que pueden ser servidos eficazmente por Azure Static Web Apps. No se requiere plan de servicio aplicativo, máquinas virtuales ni servidores backend.

Implementación de una Aplicación Blazor WebAssembly

Tim luego demuestra cómo implementar una aplicación independiente de Blazor WebAssembly, enfatizando la distinción entre Blazor Web Apps y Blazor WebAssembly.

Explica que Blazor WebAssembly se ejecuta completamente en el cliente, lo que lo hace adecuado para Azure Static Web Apps. Las tecnologías del lado del servidor como ASP.NET Core MVC, PHP, o backends Java requieren Azure Web Apps en su lugar.

Esta sección refuerza que las Azure Static Web Apps están diseñadas para aplicaciones web solo cliente.

Creando y Probando la Aplicación Blazor

Usando Visual Studio, Tim crea el proyecto Blazor WebAssembly, selecciona .NET 9 y habilita funciones como soporte para HTTPS y aplicaciones web progresivas.

Ejecuta la aplicación localmente para confirmar que funciona antes del despliegue, reforzando las mejores prácticas para la preparación en producción. Una vez verificado, crea un repositorio de GitHub directamente desde Visual Studio y sube el código fuente.

Implementando Blazor en Azure Static Web Apps

Tim crea otro recurso de Static Web App y lo conecta al repositorio de Blazor. Destaca que el flujo de trabajo de GitHub Actions configura automáticamente rutas específicas para Blazor, como el directorio de salida.

Esto demuestra cómo Azure admite múltiples lenguajes de programación y frameworks sin requerir configuración manual. La plataforma abstrae la infraestructura subyacente y la complejidad de construcción.

Proceso de Construcción y Finalización del Despliegue

Tim explica que las construcciones de Blazor toman más tiempo debido a los pasos de compilación y optimización. Azure recorta la aplicación durante el despliegue, mejorando el rendimiento.

Una vez completada, la aplicación Blazor WebAssembly está en vivo, accesible globalmente, y alojada en la infraestructura en la nube de Microsoft Azure.

Funciones Adicionales de Azure Static Web Apps

Tim cubre brevemente otras características, incluyendo:

• Dominios personalizados

• Integración de API con seguridad incorporada

• Ranuras de despliegue como desarrollo, puesta en escena y producción

Explica que las APIs están bloqueadas automáticamente, evitando el acceso no autorizado y simplificando la integración.

Limpieza de Recursos Usando Grupos de Recursos

Para concluir, Tim elimina el grupo de recursos, demostrando cómo Azure permite a los desarrolladores eliminar todos los recursos asociados de una vez. Esto es especialmente importante al probar servicios en la nube para evitar costos no deseados.

Advierte que eliminar un grupo de recursos es permanente y no se puede deshacer.

Cuándo Usar Azure Static Web Apps—y Cuándo No

Tim cierra aclarando que las Azure Static Web Apps no son adecuadas para cargas de trabajo del lado del servidor, como aplicaciones PHP, aplicaciones MVC o Blazor Web Apps.

Son ideales para aplicaciones web de front-end construidas con HTML, JavaScript, CSS, React, Angular, Vue, y Blazor WebAssembly. Debido a que todo se ejecuta en el cliente, estas aplicaciones pueden ser alojadas completamente de manera gratuita.

Como demuestra Tim Corey a lo largo del video, las Azure Static Web Apps proporcionan una manera sencilla, segura y totalmente gestionada de desplegar aplicaciones web modernas utilizando Microsoft Azure—sin preocuparse por servidores, escalabilidad o infraestructura.