1. Creación de una aplicación web estática con la CLI

En este artículo, aprenderá a:

Una aplicación web estática consta de:

  • Una aplicación React cliente en el directorio app, que se sirve desde http://localhost:3000.
  • Azure Function API en el directorio api, que se sirve desde http://localhost:7071.

La CLI de la aplicación web estática local proporciona:

  • Un proxy local entre la aplicación React y Function API. La dirección URL de la React es similar a /api/hello, sin especificar el servidor ni el número de puerto de la API. Las solicitudes que usan esta dirección URL se procesan correctamente de forma local porque la CLI de SWA administra el proxy automáticamente.
  • Un emulador de autenticación local al acceder a /.auth/login/<provider>.
  • Administración y autorización de rutas.

Código de ejemplo completo proporcionado:

Autenticación en este ejemplo

La autenticación de este ejemplo proporciona:

  • El cliente de React proporciona:
    • Inicio de sesión y cierre de sesión
    • Rutas públicas y privadas basadas en el estado de autenticación del usuario
    • La ruta privada tiene acceso a la API, await fetch(/api/hello?name=${name})

Se trata de una implementación de autenticación sencilla. La API no puede actuar en nombre del usuario que ha iniciado sesión. Actuar en nombre del usuario requiere más configuración tanto en la aplicación Azure Active Directory como en el SDK de Azure Identity en la API.

Preparación del entorno de desarrollo

Instale el software siguiente:

Inicio de sesión en la CLI de Azure

  1. En VS Code, en un terminal de Bash integrado, inicie sesión en la CLI de Azure:

    az login
    

    Se abrirá un explorador para que pueda continuar con la autenticación.

  2. Una vez completada la autenticación, cierre el explorador y vuelva a VS Code.

Pasos siguientes