Compilar una API con Azure Functions
Ahora es el momento de crear una API para la aplicación de lista de la compra.
Azure Functions
Una de las principales ventajas de Azure Static Web Apps es que hospeda juntas la aplicación web y una API compilada con Azure Functions. Azure Static Web Apps distribuye globalmente los recursos estáticos de la aplicación web y hospeda la API en Azure Functions. Con esta configuración, podrá disfrutar de la disponibilidad y la velocidad que conlleva la distribución global de los activos de aplicaciones web. También es importante hacer hincapié en lo que no se obtiene.
No necesita configurar ni mantener un servidor completo para el front-end o el back-end. Esta característica es un aspecto clave de Azure Static Web Apps: tiene a su alcance la comodidad de publicar la aplicación y la API con una configuración y un mantenimiento mínimos.
Azure Functions se encarga de atender a los puntos de conexión de la ruta, no requiere un servidor completo para el back-end que haya que configurar o mantener, y proporciona el escalado y la reducción horizontales de forma automática en función de la demanda. Estas características convierten a Azure Functions en un fantástico asociado de API para la aplicación web de lista de la compra que sirve recursos estáticos.
Azure Static Web Apps genera una dirección URL única para el sitio, que encontrará en la pestaña Información general del portal. La API está disponible a través de esta misma dirección URL si le anexa /api.
API de lista de la compra
La aplicación de lista de la compra permite a los usuarios obtener, agregar, actualizar y eliminar elementos de la lista. Por lo tanto, tiene sentido que la API tenga puntos de conexión que coincidan con estas necesidades.
Estos son los cuatro puntos de conexión:
| Métodos | Puntos de conexión de ruta | Punto de conexión de API completo |
|---|---|---|
| GET | products |
api/products |
| POST | products |
api/products |
| PUT | products/:id |
api/products/:id |
| DELETE | products/:id |
api/products/:id |
Tenga en cuenta que las solicitudes HTTP GET se enrutan a api/products. El prefijo api está reservado para los puntos de conexión de la API en la aplicación. Puede definir cualquier otra ruta que se adapte a las necesidades del sitio, pero api siempre apunta a la aplicación de Azure Functions.
Crear una API para la aplicación web
Hasta ahora ha estado usando un marco de front-end. Pronto agregará una API y la conectará a la aplicación de front-end. El repositorio tiene un proyecto Api que contiene un proyecto incompleto de Azure Functions y puntos de conexión HTTP para las funciones PUT, POST y DELETE de los productos. A la API le falta la función HTTP GET. Complete la API del proyecto de Azure Functions y agregue la función que falta y, a continuación, conecte la API a la aplicación web front-end.
Vista previa de los cambios en la aplicación web
Antes de realizar cambios en una aplicación, se recomienda crear nueva rama para los cambios. Tendrá que realizar varios cambios al completar la API de la aplicación, por lo que creará una rama para estas modificaciones.
Después de realizar los cambios, querrá verlos en ejecución antes de decidir si quiere fusionarlos. Una vez que cree una solicitud de incorporación de cambios de la nueva rama a la rama main, la acción de GitHub compilará la aplicación y la API y las implementará en una dirección URL de vista previa. Esta dirección URL de vista previa le permite dejar la aplicación web en ejecución con Azure Static Web Apps, pero también ver una segunda dirección URL con los resultados de la solicitud de incorporación de cambios.
Configurar la comunicación entre la aplicación web y la API
Cuando la API se ejecuta localmente, lo hace en el puerto 7071 de forma predeterminada. La aplicación web se ejecuta en un puerto local diferente. Cuando la aplicación web intenta realizar una solicitud HTTP desde su puerto al puerto 7071 de la API, esta acción se conoce como "uso compartido de recursos entre orígenes" (CORS). El explorador impide que la solicitud HTTP se complete, a menos que el servidor de API permita que la solicitud siga adelante.
Al publicar en Azure Static Web Apps, no tendrá que preocuparse por CORS. Azure Static Web Apps configura automáticamente la aplicación para que pueda comunicarse con la API en Azure mediante un proxy inverso. La aplicación web y la API parecen provenir del mismo dominio web gracias a un proxy inverso. Por lo tanto, solo tiene que configurar CORS cuando la ejecución se realiza localmente.
Pasos siguientes
Ahora ya puede crear la API y configurar los puntos de conexión HTTP para la aplicación de lista de la compra.