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. Prefiere una solución que quite la mayor parte del trabajo de la infraestructura, incluida la creación y publicación, de forma que pueda concentrarse en características y experiencia del usuario.

Puede implementar los recursos 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 a la aplicación realizar 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.

Captura de pantalla que muestra la información general de Static Apps.

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

Implementará una aplicación sin una API en este módulo. 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

  • El hospedaje web distribuido globalmente coloca contenido estático como HTML, CSS, JavaScript e imágenes más cerca de los usuarios.
  • Compatibilidad con api integrada proporcionada por Azure Functions.
  • Integración de GitHub y Azure DevOps de primera clase donde 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 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.
  • Explore e inicie la aplicación, como se indica a continuación.

Captura de pantalla que ilustra la aplicación de ejemplo angular.

Captura de pantalla que ilustra la aplicación de ejemplo react.

Captura de pantalla que ilustra la aplicación de ejemplo de svelte.

Captura de pantalla que ilustra la aplicación de ejemplo de Vue.

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.