Compilar una API con Azure Functions
Ahora es el momento de crear una API para la aplicación de lista de la compra.
Funciones de Azure
Una de las mayores ventajas de Azure Static Web Apps es que hospeda la aplicación web y una API compilada con Azure Functions juntas. 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.
Lo que no obtienes también es importante.
No necesita un servidor completo para configurar y mantener el front-end o el back-end. Con Azure Static Web Apps, alcanzará el punto dulce: obtendrá la facilidad de publicación de la aplicación y la API con una configuración y 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 la lista de compras
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 debe tener puntos de conexión que coincidan con estas necesidades.
Estos son cuatro puntos de conexión que creaste:
| 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 |
| ELIMINAR | 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 puede agregar una API y conectarla a la aplicación front-end. Tu repositorio tiene una carpeta api-starter que contiene un proyecto de Azure Functions incompleto y puntos de conexión HTTP para PUT, POST y DELETE de tus 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. A continuación, conecte la API a la aplicación web de 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. Dado que va a realizar varios cambios para completar la API de la aplicación, debe crear una rama para estos cambios.
Después de realizar los cambios, querrá verlos en ejecución antes de decidir combinar los cambios. Una vez que creas una solicitud de incorporación de cambios desde tu nueva rama a la rama principal, la GitHub Action compila tu aplicación y API, y las implementa en una URL de vista previa. Esta característica permite dejar la aplicación web en ejecución con Azure Static Web Apps, pero también ver una segunda instancia de versión preliminar con los resultados de la solicitud de incorporación de cambios.
Comunicación entre la aplicación web y la API
Al ejecutar la API localmente con Azure Functions, se ejecuta 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, la solicitud se denomina 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.