Introducción

  • 4 minutos

Escenario

Su empresa va a lanzar una aplicación web de lista de la compra. A través del sitio, los clientes pueden agregar, editar, ver y quitar elementos, como las necesidades de alimentación y el hogar, en su lista.

El sitio y las API deben ser seguros para garantizar la privacidad de los clientes. Los usuarios estarán distribuidos por todo el mundo, y su objetivo será que todos disfruten de un gran rendimiento. Preferiría una solución que suprima la máxima cantidad de trabajo de infraestructura, incluida la generación y publicación, para que pueda concentrarse en las características y la experiencia del usuario.

Podría implementar sus activos web en el almacenamiento en la nube, crear y asignar su propio certificado SSL, crear la API en un servidor en la nube, establecer un proxy inverso que permita que la aplicación realice llamadas a la API, distribuir la aplicación globalmente y configurar su propio proceso de CI/CD.

Azure Static Web Apps le permite disfrutar de todo ello desde el primer momento.

¿Qué es Azure Static Web Apps?

Azure Static Web Apps resuelve los problemas difíciles que afectan desde el código fuente hasta la disponibilidad global.

Mientras usted se centra en el desarrollo de la aplicación, Azure Static Web Apps la compila y la hospeda automáticamente desde GitHub o Azure DevOps.

Las aplicaciones web estáticas suelen compilarse con bibliotecas y marcos como Angular, React, Svelte o Vue. Estas aplicaciones incluyen código HTML, CSS, JavaScript y recursos de imagen que componen la aplicación. Cuando se usa una arquitectura de servidor web tradicional, estos archivos se sirven desde un único servidor junto con los puntos de conexión de API necesarios.

Con Azure Static Web Apps, los recursos estáticos se separan de un servidor web tradicional y se sirven desde puntos distribuidos por todo el mundo. Esta distribución permite servir los archivos mucho más rápido, ya que estos se encuentran físicamente más cerca de los usuarios. Los puntos de conexión de API, que son opcionales, se hospedan mediante una arquitectura sin servidor, lo que evita tener que usar un servidor back-end completo.

Con el modelo de Azure Static Web Apps, obtiene exactamente lo que necesita: ni más, ni menos.

Screenshot showing the Static Apps overview.

Cuando se crea un recurso de Azure Static Web Apps, Azure configura un flujo de trabajo de Acciones de GitHub o de Azure DevOps en el repositorio de código fuente de la aplicación. El flujo de trabajo supervisa una rama de su elección. Cada vez que inserta confirmaciones o crea solicitudes de incorporación de cambios en la rama inspeccionada, el flujo de trabajo compila e implementa automáticamente la aplicación y su API en Azure.

Azure hospeda y sirve la aplicación web. Azure Functions potencia la funcionalidad de la API de back-end, que proporciona escalado y reducción verticales automáticos en función de la demanda.

API opcionales

Azure Static Web Apps es muy conveniente para servir contenido meramente estático, pero también tiene una gran compatibilidad con las aplicaciones web estáticas que necesitan el respaldo de las API. Por lo tanto, puede hospedar la aplicación web estática con o sin una API.

En los ejercicios de este módulo, implementará una aplicación con el marco web que prefiera.

Nota:

En este módulo, va a implementar una aplicación sin una API. Consulte la sección Pasos siguientes de la unidad final para información sobre el módulo siguiente, en el que implementará una API junto con la aplicación.

Características principales

  • Hospedaje web distribuido globalmente, que coloca el contenido estático (como HTML, CSS, JavaScript e imágenes) más cerca de los usuarios.
  • Compatibilidad de la API integrada gracias a Azure Functions.
  • Integración de primera clase con GitHub y Azure DevOps, en las que los cambios en el repositorio desencadenan compilaciones e implementaciones.
  • Certificados SSL gratuitos que se renuevan automáticamente.
  • Direcciones URL únicas de vista previa para obtener una vista previa de las solicitudes de incorporación de cambios.

Objetivos de aprendizaje

En este módulo, creará, modificará e implementará una aplicación web en Azure Static Web Apps.

Elija su propio camino

En este módulo podrá elegir entre cuatro variaciones de la aplicación de ejemplo: Angular, React, Svelte y Vue. La gran ventaja de Azure Static Web Apps es que todos estos tipos funcionan.

El código de inicio incluye las cuatro aplicaciones que usará.

├ angular-app  👈 The Angular client app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Tareas que realizará

Una vez que haya elegido la aplicación cliente, hará lo siguiente:

  • Compilará y ejecutará la aplicación de front-end.
  • Compilará e implementará automáticamente la aplicación web en Azure desde un repositorio de GitHub con Acciones de GitHub.
  • Por último, explorará e iniciará la aplicación, como se muestra a continuación.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the Vue sample application.

Pasos siguientes

En este momento, tal vez piense que necesita crear primero los recursos de Azure, pero Azure Static Web Apps ya se encarga de su flujo de trabajo diario. Un enfoque más natural consiste en empezar con el código en GitHub, antes de crear recursos en Azure.