Incorporación de una API en la versión preliminar de Azure Static Web Apps con Azure FunctionsAdd an API to Azure Static Web Apps Preview with Azure Functions

Puede agregar API sin servidor a Azure Static Web Apps a través de la integración con Azure Functions.You can add serverless APIs to Azure Static Web Apps via integration with Azure Functions. En este artículo se muestra cómo agregar e implementar una API en un sitio de Azure Static Web Apps.This article demonstrates how to add and deploy an API to an Azure Static Web Apps site.

Requisitos previosPrerequisites

Crear un repositorio de GitCreate a Git repository

En los pasos siguientes se muestra cómo crear un nuevo repositorio y clonar los archivos en el equipo.The following steps demonstrate how to create a new repository and clone the files to your computer.

  1. Asegúrese de que ha iniciado sesión en GitHub y, a continuación, vaya a https://github.com/staticwebdev/vanilla-basic/generate para crear un nuevo repositorio.Make sure you are logged in to GitHub and, navigate to https://github.com/staticwebdev/vanilla-basic/generate to create a new repository.

  2. En el cuadro Nombre del repositorio, escriba my-vanilla-api.In the Repository name box, enter my-vanilla-api.

  3. Haga clic en Create repository from template (Crear repositorio a partir de plantilla).Click Create repository from template.

    Creación de un nuevo repositorio a partir de vanilla-basic

Una vez creado el proyecto, copie la dirección URL en el explorador del nuevo repositorio.Once your project is created, copy the URL in your browser for the new repository. Esta dirección URL se usa en Visual Studio Code para clonar el repositorio de Git.You use this URL in Visual Studio Code to clone the Git repository.

  1. Presione F1 para abrir un comando en la paleta de comandos.Press F1 to open command in the Command Palette.

  2. Pegue la dirección URL en el cuadro Git: Clone (Git: Clonar) y presione Entrar.Paste the URL into the Git: Clone prompt, and press Enter.

    Creación de un nuevo repositorio a partir de vanilla-basic

    Siga las indicaciones para seleccionar una ubicación del repositorio para clonar el proyecto.Follow the prompts to select a repository location to clone the project.

Creación de la APICreate the API

A continuación, cree un proyecto de Azure Functions como la API de la aplicación.Next, you create an Azure Functions project as the application's API.

  1. Dentro del proyecto my-vanilla-api, cree una subcarpeta denominada api.Inside the my-vanilla-api project, create a sub-folder named api.

  2. Presione F1 para abrir la paleta de comandos.Press F1 to open the Command Palette

  3. Escriba Azure Functions: Crear nuevo proyecto...Type Azure Functions: Create New Project...

  4. Presione Entrar.Press Enter

  5. Seleccione Examinar.Choose Browse

  6. Seleccione la carpeta api como directorio del área de trabajo del proyecto.Select the api folder as the directory for your project workspace

  7. Elija Seleccionar.Choose Select

    Creación de un nuevo repositorio a partir de vanilla-basic

  8. Escriba la siguiente información cuando se le indique:Provide the following information at the prompts:

    • Seleccione un lenguaje: Elija JavaScript.Select a language: Choose JavaScript
    • Seleccione una plantilla para la primera función del proyecto: Elija desencadenador HTTP.Select a template for your project's first function: Choose HTTP trigger
    • Especifique un nombre de función: escriba GetMessage.Provide a function name: Enter GetMessage
    • Nivel de autorización: Elija Anonymous (anónimo), que permite que cualquiera llame al punto de conexión de la función.Authorization level: Choose Anonymous, which enables anyone to call your function endpoint.

Visual Studio Code genera un proyecto de Azure Functions con una función de desencadenador de HTTP.Visual Studio Code generates an Azure Functions project with an HTTP triggered function.

Ahora la aplicación tiene una estructura de proyecto similar a la del ejemplo siguiente.Your app now has a project structure similar to the following example.

├── api
│   ├── GetMessage
│   │   ├── function.json
│   │   ├── index.js
│   │   └── sample.dat
│   ├── host.json
│   ├── local.settings.json
│   ├── package.json
│   └── proxies.json
├── index.html
├── readme.md
└── styles.css

A continuación, cambiará la función GetMessage para devolver un mensaje al front-end.Next, you'll change the GetMessage function to return a message to the front-end.

  1. Actualice la función GetMessage en api/GetMessage/index.js con el código siguiente.Update the GetMessage function under api/GetMessage/index.js with the following code.

    module.exports = async function (context, req) {
      context.res = {
        body: {
          text: "Hello from the API"
        }
      };
    };
    
  2. Actualice la configuración de GetMessage en api/GetMessage/function.json con las siguientes opciones.Update the GetMessage configuration under api/GetMessage/function.json with the following settings.

    {
      "bindings": [
        {
          "authLevel": "anonymous",
          "type": "httpTrigger",
          "direction": "in",
          "name": "req",
          "methods": [
            "get"
          ],
          "route": "message"
        },
        {
          "type": "http",
          "direction": "out",
          "name": "res"
        }
      ]
    }
    

Con la configuración anterior, el punto de conexión de la API:With the above settings, the API endpoint is:

  • Se desencadena cuando se realiza una solicitud HTTP a la funciónTriggered when an HTTP request is made to the function
  • Está disponible para todas las solicitudes, independientemente del estado de autenticaciónAvailable to all requests regardless of authentication status
  • Está expuesta a través de la ruta /api/messageExposed via the /api/message route

Ejecución local de la APIRun the API locally

Visual Studio Code se integra con Azure Functions Core Tools para que pueda ejecutar este proyecto en el equipo de desarrollo local antes de publicarlo en Azure.Visual Studio Code integrates with Azure Functions Core Tools to let you run this project on your local development computer before you publish to Azure.

Sugerencia

Asegúrese de que tiene todos los recursos que se mencionan en la sección de requisitos previos instalados antes de continuar.Make sure you have all the resources listed in the prerequisites section installed before proceeding.

  1. Ejecute la función presionando F5 para iniciar la aplicación de Functions.Run the function by pressing F5 to start the Functions app.

  2. Si Azure Functions Core Tools aún no está instalado, seleccione Instalar en la ventana.If Azure Functions Core Tools isn't already installed, select Install at the prompt.

    Core Tools muestra la salida de la aplicación en ejecución en el panel Terminal.The Core Tools shows output from the running application in the Terminal panel. Como parte de la salida, puede ver el punto de conexión de la dirección URL de la función desencadenada por HTTP que se ejecuta localmente.As a part of the output, you can see the URL endpoint of your HTTP-triggered function running locally.

    Creación de un nuevo repositorio a partir de vanilla-basic

  3. Con las herramientas principales en ejecución, vaya a la siguiente dirección URL para comprobar que la API se está ejecutando correctamente: http://localhost:7071/api/message.With Core Tools running, navigate to the following URL to verify the API is running correctly: http://localhost:7071/api/message.

    La respuesta en el explorador debe ser similar a la del ejemplo siguiente:The response in the browser should look similar to the following example:

    Creación de un nuevo repositorio a partir de vanilla-basic

  4. Para detener la sesión de depuración, presione Mayús+F5.Press Shift + F5 to stop the debugging session.

Llamada a la API desde la aplicaciónCall the API from the application

Cuando se implementan en Azure, las solicitudes a la API se enrutan automáticamente a la aplicación de Functions para las solicitudes enviadas a la ruta de api.When deployed to Azure, requests to the API are automatically routed to the Functions app for requests sent to the api route. Al trabajar localmente, debe configurar las opciones de la aplicación para las solicitudes de proxy a la API local.Working locally, you have to configure the application settings to proxy requests to the local API.

Proxy localLocal proxy

Puede configurar un proxy para la extensión Live Server de Visual Studio Code que enrute todas las solicitudes hechas a /api al punto de conexión de la API en ejecución en http://127.0.0.1:7071/api.You can configure a proxy for the Live Server Visual Studio Code extension that routes all requests to /api to the running API endpoint at http://127.0.0.1:7071/api.

  1. Abra el archivo .vscode/settings.json.Open the .vscode/settings.json file.

  2. Agregue la siguiente configuración para especificar un proxy para Live Server.Add the following settings to specify a proxy for Live Server.

    "liveServer.settings.proxy": {
       "enable": true,
       "baseUri": "/api",
       "proxyUri": "http://127.0.0.1:7071/api"
    }
    

    Esta configuración se guarda mejor en el archivo de configuración del proyecto, en lugar de en el archivo de configuración del usuario.This configuration is best saved in project settings file, as opposed to in the user settings file.

    El uso de la configuración del proyecto garantiza que el proxy no se aplique a todos los demás proyectos abiertos en Visual Studio Code.Using project settings assures the proxy isn't applied to all other projects opened in Visual Studio Code.

Actualización de archivos HTML para acceder a la APIUpdate HTML files to access the API

  1. A continuación, actualice el contenido del archivo index.html con el código siguiente para capturar el texto de la función de la API y mostrarlo en la pantalla:Next, update the content of the index.html file with the following code to fetch the text from the API function and display it on the screen:

    <!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() {
          let { text } = await( await fetch(`/api/message`)).json();
          document.querySelector('#name').textContent = text;
        }())
      </script>
    </body>
    
    </html>
    
  2. Presione F5 para iniciar el proyecto de la API.Press F5 to start the API project.

  3. Presione F1 y elija Live Server: Open with Live Server (Abrir con Live Server).Press F1 and choose Live Server: Open with Live Server.

    Ahora debería ver el mensaje de la API en la página web.You should now see the API message in the web page.

    Creación de un nuevo repositorio a partir de vanilla-basic

    Nota

    Puede usar otros servidores proxy o HTTP para proporcionar el archivo index.html.You can use other HTTP servers or proxies to serve the index.html file. No podrá acceder a index.html desde file:///.Accessing the index.html from file:/// will not work.

  4. Presione Mayús + F5 para detener el proyecto de API.Press Shift + F5 to stop the API project.

Confirmación y envío de los cambios a GitHubCommit and push your changes to GitHub

Con Visual Studio Code, confirme ("commit") e inserte los cambios ("push") en el repositorio Git remoto.Using Visual Studio Code, commit and push your changes to the remote git repository.

  1. Presione F1 para abrir la paleta de comandos.Press F1 to open the Command Palette
  2. Escriba Git: Commit All (Git: Confirmar todo)Type Git: Commit All
  3. Agregue un mensaje de confirmación y presione Entrar.Add a commit message and press Enter
  4. Presione F1.Press F1
  5. Escriba Git: push y presione Entrar.Type in Git: push and press Enter

Creación de una aplicación web estáticaCreate a static web app

  1. Vaya a Azure Portal.Navigate to the Azure portal
  2. Haga clic en Crear un recurso.Click Create a Resource
  3. Busque Aplicación web estática.Search for Static Web App
  4. Haga clic en Aplicación web estática (versión preliminar) .Click Static Web App (Preview)
  5. Haga clic en CrearClick Create

A continuación, agregue la configuración específica de la aplicación.Next, add the app-specific settings.

  1. Seleccione su suscripción a Azure.Select your Azure subscription
  2. Seleccione o cree un nuevo grupo de recursos.Select or create a new Resource Group
  3. Asigne a la aplicación el nombre my-vanilla-api.Name the app my-vanilla-api.
  4. Seleccione la región más cercana a la suya.Select Region closest to you
  5. Seleccione la SKU gratis.Select the Free SKU
  6. Haga clic en el botón Iniciar sesión con GitHub y realice la autenticación con GitHub.Click the Sign-in with GitHub button and authenticate with GitHub
  7. Seleccione su organización preferida.Select your preferred Organization
  8. Seleccione my-vanilla-api del menú desplegable Repositorio.Select my-vanilla-api from the Repository drop-down
  9. Seleccione master en el menú desplegable Rama.Select master from the Branch drop-down
  10. Haga clic en el botón Siguiente: Compilar > para editar la configuración de compilación.Click the Next: Build > button to edit the build configuration

A continuación, agregue los siguientes detalles de compilación.Next, add the following the build details.

  1. Escriba / como Ubicación de la aplicación.Enter / for the App location.

  2. Escriba api en el cuadro Ubicación de la API.Enter api in the Api location box.

  3. Borre el valor predeterminado de la Ubicación del artefacto de la aplicación y deje el cuadro vacío.Clear the default value out of the App artifact location, leaving the box empty.

  4. Haga clic en Revisar + crear.Click Review + create.

  5. Haga clic en el botón Crear.Click the Create button

    Una vez que haga clic en el botón Crear, Azure realizará dos acciones.Once you click the Create button, Azure does two things. En primer lugar, se crean los servicios en la nube subyacentes para admitir la aplicación.First, the underlying cloud services are created to support the app. Después, un proceso en segundo plano comienza a compilar e implementar la aplicación.Next, a background process begins to build and deploy the application.

  6. Haga clic en el botón Ir al recurso para acceder a la página Información general de la aplicación web.Click the Go to Resource button to take you to the web app's Overview page.

    Mientras que la aplicación se está generando en segundo plano, puede hacer clic en el banner que contiene un vínculo para ver el estado de la compilación.As the app is being built in the background, you can click on the banner which contains a link to view the build status.

    Creación de un nuevo repositorio a partir de vanilla-basic

  7. Una vez completada la implementación, puede navegar a la aplicación web haciendo clic en el vínculo URL que se muestra en la página Información general.Once the deployment is complete, ou can navigate to the web app, by clicking on the URL link shown on the Overview page.

    Creación de un nuevo repositorio a partir de vanilla-basic

Limpieza de recursosClean up resources

Si no quiere conservar esta aplicación para usos adicionales, puede usar los pasos siguientes para eliminar la aplicación de Azure Static Web App y sus recursos relacionados.If you don't want to keep this application for further use, you can use the following steps to delete the Azure Static Web App and its related resources.

  1. Vaya a Azure Portal.Navigate to the Azure portal
  2. En la barra de búsqueda de la parte superior, escriba Grupos de recursos.In the top search bar, type Resource groups
  3. Haga clic en Grupos de recursos.Click Resource groups
  4. Seleccione myResourceGroup.Select myResourceGroup
  5. En la página myResourceGroup, asegúrese de que los recursos enumerados sean los que desea eliminar.On the myResourceGroup page, make sure that the listed resources are the ones you want to delete.
  6. Seleccionar EliminarSelect Delete
  7. Escriba myResourceGroup en el cuadro de texto.Type myResourceGroup in the text box
  8. Seleccione Eliminar.Select Delete.

Pasos siguientesNext steps