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 v18 para ejecutar la aplicación de front-end y la API.

Sugerencia

Puede usar la herramienta de nvm para administrar varias versiones de Node.js en el sistema de desarrollo. En Windows, NVM para Windows se puede instalar a través de Winget.

Creación de la aplicación web estática

Antes de agregar una API, cree e implemente una aplicación front-end en Azure Static Web Apps siguiendo el inicio rápido sobre cómo crear su primer sitio estático con Azure Static Web Apps.

Una vez implementada una aplicación de front-end en Azure Static Web Apps, clone el repositorio de aplicaciones. Por ejemplo, para clonar mediante la línea de comandos de git:

git clone https://github.com/my-username/my-first-static-web-app

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.

1. Presione F1 para abrir la paleta de comandos.

2. 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.

3. Cuando se le solicite, escriba los siguientes valores:

   Prompt	Value
   Selección de un idioma	JavaScript
   Seleccionar 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)
   

4. 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.

Ningún marco

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>

Angular

1. 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 {}
   

2. 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);
     }
   }
   

React

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;

Vue

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 -g @azure/static-web-apps-cli

Sugerencia

Si no desea instalar la línea de comandos de swa globalmente, puede usar npx swa en lugar de swa en las instrucciones siguientes.

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.

Ningún marco

No es necesario compilar la aplicación.

Angular

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

npm install
npm run build --prod

React

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

npm install
npm run build

Vue

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

npm install
npm run build

Ejecutar la aplicación localmente

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.

1. 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

   Pase la carpeta actual (src) y la carpeta de la API (api) a la CLI.

   swa start src --api-location api
   

   Angular

   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
   

   React

   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
   

   Vue

   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
   

2. El firewall de Windows puede solicitar que el entorno de ejecución de Azure Functions pueda acceder a Internet. Seleccione Permitir.

3. 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.

4. 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.

1. Abra el flujo de trabajo en .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.

2. Busque la propiedad api_location y establezca el valor en api.

   ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
   # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
   app_location: "src" # App source code path
   api_location: "api" # Api source code path - optional
   output_location: "" # Built app content directory - optional
   ###### End of Repository/Build Configurations ######
   

   Nota: los valores anteriores de api_location, app_location, output_location no son para ningún marco y estos cambios de valor en función del marco.

3. 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.

1. Presione F1 para abrir la paleta de comandos.

2. Seleccione el comando Git: Confirmar todo.

3. Cuando se le pida un mensaje de confirmación, escriba feat: add API y confirme todos los cambios en el repositorio de Git local.

4. Presione F1 para abrir la paleta de comandos.

5. 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.

6. Abra el repositorio en GitHub para supervisar el estado de la ejecución del flujo de trabajo.

7. 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