Incorporación de una API en Azure Static Web Apps con Azure Functions
Puede agregar API sin servidor a Azure Static Web Apps con tecnología de Azure Functions. En este artículo se muestra cómo agregar e implementar una API en un sitio de Azure Static Web Apps.
Nota:
Las funciones proporcionadas de forma predeterminada en Static Web Apps están preconfiguradas para proporcionar puntos de conexión de API seguros y solo admiten funciones desencadenadas por HTTP. Consulte Compatibilidad de API con Azure Functions para obtener información sobre cómo difieren de las aplicaciones de Azure Functions independientes.
Requisitos previos
- Cuenta de Azure con una suscripción activa.
- Si no tiene una cuenta, puede crear una gratis.
- Visual Studio Code
- Extensión de Azure Static Web Apps para Visual Studio Code
- Extensión de Azure Functions para Visual Studio Code
- Node.js para ejecutar la aplicación de front-end y la API
Creación de la aplicación web estática
Antes de agregar una API, cree e implemente una aplicación de front-end en Azure Static Web Apps. Use una aplicación existente que ya haya implementado o cree una siguiendo las instrucciones de Inicio rápido: creación del primer sitio estático con Azure Static Web Apps.
En Visual Studio Code, abra la raíz del repositorio de la aplicación. La estructura de carpetas contiene el origen de la aplicación de front-end y el flujo de trabajo de GitHub de Static Web Apps en la carpeta .github/workflows.
├── .github
│ └── workflows
│ └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)
Creación de la API
Cree un proyecto de Azure Functions para la API de la aplicación web estática. De forma predeterminada, la extensión de Visual Studio Code de Static Web Apps crea el proyecto en una carpeta denominada api en la raíz del repositorio.
Presione F1 para abrir la paleta de comandos.
Seleccione Azure Static Web Apps: crear una función HTTP. Si se le pide que instale la extensión de Azure Functions, instálela y vuelva a ejecutar este comando.
Cuando se le solicite, escriba los siguientes valores:
Prompt Value Selección de un idioma JavaScript Selección de un modelo de programación V3 Proporcionar un nombre de función message Sugerencia
Puede obtener más información sobre las diferencias entre los modelos de programación en la guía para desarrolladores de Azure Functions.
Un proyecto de Azure Functions se genera con una función desencadenada por HTTP. Ahora la aplicación tiene una estructura de proyecto similar a la del ejemplo siguiente.
├── .github │ └── workflows │ └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml │ ├── api │ ├── message │ │ ├── function.json │ │ └── index.js │ ├── host.json │ ├── local.settings.json │ └── package.json │ └── (folders and files from your static web app)
A continuación, cambie la función
message
para devolver un mensaje al front-end. Actualice la función de api/message/index.js con el código siguiente.module.exports = async function (context, req) { context.res.json({ text: "Hello from the API" }); };
Sugerencia
Para agregar más funciones de API, puede volver a ejecutar el comando Azure Static Web Apps: Create HTTP Function (Azure Static Web Apps: crear una función HTTP).
Actualización de la aplicación de front-end para llamar a la API
Actualice la aplicación de front-end para llamar a la API en /api/message
y mostrar el mensaje de respuesta.
Si ha usado los inicios rápidos para crear la aplicación, siga estas instrucciones para aplicar las actualizaciones.
Actualice el contenido del archivo src/index.html con el código siguiente para capturar el texto de la función de la API y mostrarlo en la pantalla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Vanilla JavaScript App</title>
</head>
<body>
<main>
<h1>Vanilla JavaScript App</h1>
<p>Loading content from the API: <b id="name">...</b></p>
</main>
<script>
(async function() {
const { text } = await( await fetch(`/api/message`)).json();
document.querySelector('#name').textContent = text;
}());
</script>
</body>
</html>
Ejecución local del front-end y la API
Para ejecutar localmente la aplicación de front-end y la API juntas, Azure Static Web Apps proporciona una CLI que emula el entorno en la nube. La CLI utiliza Azure Functions Core Tools para ejecutar la API.
Instalación de herramientas de línea de comandos
Asegúrese de que tiene instaladas las herramientas de línea de comandos necesarias.
npm install -D @azure/static-web-apps-cli
Compilación de una aplicación de front-end
Si la aplicación usa un marco, compile la aplicación para generar la salida antes de ejecutar la CLI de Static Web Apps.
No es necesario compilar la aplicación.
Iniciar la CLI
Para ejecutar la aplicación de front-end y la API juntas, inicie la aplicación con la CLI de Static Web Apps. La ejecución de las dos partes de la aplicación de esta manera permite que la CLI sirva la salida de compilación del front-end desde una carpeta y hace que la API sea accesible para la aplicación en ejecución.
En la raíz del repositorio, inicie la CLI de Static Web Apps con el comando
start
. Ajuste los argumentos si la aplicación tiene una estructura de carpetas diferente.Pase la carpeta actual (
src
) y la carpeta de la API (api
) a la CLI.swa start src --api-location api
Cuando se inicien los procesos de la CLI, acceda a la aplicación en
http://localhost:4280/
. Observe cómo la página llama a la API y muestra su salida,Hello from the API
.Para detener la CLI, escriba Ctrl+C.
Adición de la ubicación de la API al flujo de trabajo
Para poder implementar la aplicación en Azure, actualice el flujo de trabajo Acciones de GitHub del repositorio con la ubicación correcta de la carpeta de la API.
Abra el flujo de trabajo en .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.
Busque la propiedad
api_location
y establezca el valor enapi
.Guarde el archivo.
Implementación de cambios
Para publicar cambios en la aplicación web estática en Azure, confirme e inserte el código en el repositorio remoto de GitHub.
Presione F1 para abrir la paleta de comandos.
Seleccione el comando Git: Confirmar todo.
Cuando se le pida un mensaje de confirmación, escriba feat: add API y confirme todos los cambios en el repositorio de Git local.
Presione F1 para abrir la paleta de comandos.
Seleccione el comando Git: push.
Los cambios se insertan en el repositorio remoto de GitHub, lo que desencadena el flujo de trabajo Acciones de GitHub de Static Web Apps para compilar e implementar la aplicación.
Abra el repositorio en GitHub para supervisar el estado de la ejecución del flujo de trabajo.
Cuando se complete la ejecución del flujo de trabajo, visite la aplicación web estática para ver los cambios.