Incorporación de una API en Azure Static Web Apps con Azure Functions

Artículo
06/01/2023

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"
    });
};
```

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

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>

Actualice el contenido de src/app/app.module.ts con el código siguiente para habilitar HttpClient en la aplicación.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

A continuación, actualice el contenido del archivo src/app/app.component.ts con el código siguiente para capturar el texto de la función de la API y mostrarlo en la pantalla.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{message}}</div>`,
})
export class AppComponent {
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('/api/message')
      .subscribe((resp: any) => this.message = resp.text);
  }
}

Actualice el contenido del archivo src/App.js con el código siguiente para capturar el texto de la función de la API y mostrarlo en la pantalla.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

Actualice el contenido del archivo src/App.vue con el código siguiente para capturar el texto de la función de la API y mostrarlo en la pantalla.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

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.

Instale las dependencias de npm y compile la aplicación en la carpeta dist/angular-basic.

npm install
npm run build --prod

Instale las dependencias de npm y compile la aplicación en la carpeta build.

npm install
npm run build

Instale las dependencias de npm y compile la aplicación en la carpeta dist.

npm install
npm run build

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.
- Ningún marco
- Angular
- React
- Vue
Pase la carpeta actual (src) y la carpeta de la API (api) a la CLI.
```
swa start src --api-location api
```
Pase la carpeta de la salida de compilación (dist/angular-basic) y la carpeta de la API (api) a la CLI.
```
swa start dist/angular-basic --api-location api
```
Pase la carpeta de la salida de compilación (build) y la carpeta de la API (api) a la CLI.
```
swa start build --api-location api
```
Pase la carpeta de la salida de compilación (dist) y la carpeta de la API (api) a la CLI.
```
swa start dist --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 en api.
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.

Pasos siguientes

Configuración de aplicaciones