Introducción

  • 2 minutos

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 de la lista.

Al compilar la aplicación, lo primero que le preocupa es que la aplicación y la API se hospeden de forma segura, estén disponibles globalmente y se publiquen automáticamente. En lugar de compilar un servidor web para solucionar estos problemas, decide usar una solución de hospedaje que sirva los recursos y la API con facilidad, sin necesidad de realizar mucha configuración.

¿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.

Información general de las aplicaciones estáticas.

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. Puede hospedar la aplicación web estática con o sin una API.

Azure hospeda y sirve la aplicación web mientras Azure Functions potencia la funcionalidad de la API de back-end, que proporciona el escalado y la reducción horizontales de forma automática en función de la demanda a la API.

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 con la API integrada proporcionada por 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.
  • Autenticación integrada con varios proveedores.

Objetivos de aprendizaje

En este módulo, creará, modificará e implementará una aplicación web y una API con autenticación de usuario 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 y el punto de partida para la API que usará.

├ angular-app  👈 The Angular client app
├ api          👈 The API server 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 e implementar automáticamente la aplicación web y la API en Azure desde un repositorio de GitHub con Acciones de GitHub.
  • Modificar la aplicación web para agregar botones de inicio y de cierre de sesión y mostrar información sobre el usuario que ha iniciado sesión
  • Modificar la aplicación web y la API para bloquear a los usuarios no autenticados y permitir solo proveedores de autenticación específicos
  • Por último, explorará e iniciará la aplicación, como se muestra a continuación.

Captura de pantalla que muestra la aplicación de ejemplo de Angular

Captura de pantalla que muestra la aplicación de ejemplo de React.

Captura de pantalla que muestra 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.