Ejercicio: Crear un proyecto de Azure Functions

  • 6 minutos

La aplicación web de lista de la compra necesita una API. En este ejercicio, compilará y ejecutará la API mediante un proyecto de Azure Functions. A partir de ahí, se amplía la API con una nueva función mediante la extensión Azure Functions para Visual Studio Code.

En este ejercicio, completará los pasos siguientes:

  1. Cree una rama mientras se prepara para realizar cambios en la aplicación web.
  2. Explore el proyecto de Azure Functions.
  3. Cree la función HTTP GET.
  4. Reemplace el código de inicio de la función por lógica para obtener productos.
  5. Configure la aplicación web para redirigir mediante proxy solicitudes HTTP a la API.
  6. Ejecute la API y la aplicación web.

Obtener la aplicación de función

Ahora, agregue una API y conéctela a la aplicación de front-end. La carpeta api-starter incluye un proyecto incompleto de Azure Functions. Vamos a completarla ahora.

Crear una rama API

Antes de realizar cambios en una aplicación, se recomienda crear nueva rama para los cambios. Está a punto de completar la API para la aplicación, por lo que es buen momento para crear una rama.

  1. En Visual Studio Code, presione F1 para abrir la paleta de comandos.

  2. Escriba y seleccione Git: Restauración en....

  3. Seleccione Crear nueva rama.

  4. Escriba api como nombre de la nueva rama y presione Entrar.

Acaba de crear la rama de GIT api.

Completar la API de Azure Functions

Para completar la API, empiece por mover el código de la API de inicio a una carpeta denominada api. Este es el nombre de la carpeta que especificó para api_location al crear la instancia de Static Web Apps.

  1. En Visual Studio Code, presione F1 para abrir la paleta de comandos.

  2. Escriba y seleccione Terminal: Crear nuevo terminal (en el área de trabajo activa).

  3. Asegúrese de que se encuentra en la carpeta raíz del proyecto.

  4. Ejecute el comando de Git siguiente para cambiar el nombre de la carpeta api-starter a api.

    git mv api-starter api

  5. Presione F1 para abrir la paleta de comandos.

  6. Escriba y seleccione Git: Confirmar todo.

  7. Escriba el mensaje de confirmación api y presione Entrar.

Ahora, aparece una carpeta api en el explorador de Visual Studio Code. La carpeta api contiene el proyecto de Azure Functions, junto con tres funciones.

Carpeta y archivo Método Ruta
api/products-post POST products
api/products-put PUT products/:id
api/products-delete DELETE products/:id

Crear la función HTTP GET

La API tiene rutas para manipular los productos de la lista de la compra, pero carece de una ruta para obtener los productos. Vamos a agregarla ahora.

Instalación de la extensión de Azure Functions para Visual Studio Code

Puede crear y administrar aplicaciones de Azure Functions si utiliza la extensión de Azure Functions para Visual Studio Code.

  1. Vaya a Visual Studio Marketplace e instale la extensión Azure Functions para Visual Studio Code.

  2. Cuando la pestaña de la extensión se cargue en Visual Studio Code, seleccione Instalar.

  3. Cuando la instalación se haya completado, seleccione Recargar.

Nota:

Asegúrese de instalar Azure Functions Core Tools, que le permite ejecutar Azure Functions de forma local.

Creación de la función

Ahora, se amplía la aplicación de Azure Functions con una función para obtener los productos.

  1. En Visual Studio Code, presione F1 para abrir la paleta de comandos.

  2. Escriba y seleccione Azure Functions: Crear función.

  3. Cuando se le pida que cree una función, seleccione Desencadenador de HTTP.

  4. Escriba products-get como nombre de la función.

  5. Seleccione Anónimo como nivel de autenticación.

Nota:

La aplicación de Functions está en la carpeta api, que la separa de los proyectos de aplicación web individuales. Todas las aplicaciones web que usan los marcos de front-end realizan llamadas a la misma API. Puede decidir cómo quiere estructurar la aplicación, pero, para este ejemplo, es útil verlas separadas.

Configurar el método HTTP y el punto de conexión de ruta

Observe que la carpeta api/products-get contiene el archivo function.json. Este archivo contiene la configuración de la función.

Por convención, el punto de conexión de ruta tiene el mismo nombre que la carpeta que contiene la función. Como la función se crea en la carpeta products-get, el punto de conexión de ruta se genera como products-get de forma predeterminada. Aun así, le interesa que el punto de conexión se denomine products.

Configure la función:

  1. Abra el archivo api/products-get/function.json.

  2. Observe que los métodos permiten GET y POST.

  3. Cambie la matriz de los métodos para permitir solo solicitudes GET.

  4. Agregue una entrada "route": "products" después de la matriz de métodos.

Ahora la función se desencadena en una solicitud GET HTTP a products. El código de su archivo function.json debe ser similar al siguiente:

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

Actualización de la lógica de la función

El archivo index.js situado en la carpeta api/products-get contiene lógica que se ejecuta cuando se realiza una solicitud HTTP a la ruta.

Debe actualizar la lógica para obtener los productos. Existe lógica de acceso a datos en el módulo de JavaScript /shared/product-data.js. El módulo product-data expone una función getProducts para obtener los productos de la lista de la compra.

Ahora, cambie el punto de conexión de la función para devolver los productos:

  1. Abra el archivo api/products-get/index.js.

  2. Reemplace el contenido por el código siguiente:

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

La función obtiene los productos y los devuelve con un código de estado 200 cuando se lleva a cabo correctamente.

Configurar el uso compartido de recursos entre orígenes (CORS) localmente

No tiene que preocuparse por CORS al publicar en Azure Static Web Apps. Azure Static Web Apps configura automáticamente la aplicación para que pueda comunicarse con la API en Azure mediante un proxy inverso. Aun así, cuando se ejecuta localmente, debe configurar CORS para permitir que la aplicación web y la API se comuniquen.

Ahora, indique a Azure Functions que permita que la aplicación web realice solicitudes HTTP a la API en el equipo.

  1. Cree un archivo denominado api/local.settings.json.

  2. Agregue el siguiente contenido al archivo:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Nota:

El archivo local.settings.json está incluido en el archivo .gitignore, lo que impide que se inserte este archivo en GitHub. Esto se debe a que, en este archivo, podría almacenar secretos que no interesan en GitHub. Esta es la razón por la que era necesario que crease el archivo al crear el repositorio a partir de la plantilla.

Ejecutar la API

Ha llegado el momento de ver cómo funcionan juntos la aplicación web y el proyecto de Azure Functions. Para empezar, ejecute el proyecto de Azure Functions localmente mediante estos pasos:

Nota:

Asegúrese de instalar Azure Functions Core Tools, que le permite ejecutar Azure Functions de forma local.

  1. Abra un terminal git y vaya a la carpeta api:

    cd api

  2. Ejecute de forma local la aplicación de Azure Functions:

    npm install

    npm start

Ejecutar la aplicación web

La API se está ejecutando. Ahora debe configurar la aplicación de front-end para que realice su solicitud HTTP a la API. La aplicación de front-end se ejecuta en un puerto y la API en otro diferente (7071). Cada marco de front-end puede configurarse para redirigir mediante proxy las solicitudes HTTP a un puerto de forma segura.

Configurar el puerto de proxy

Configure el proxy para la aplicación de front-end mediante los pasos siguientes:

  1. Abra el archivo angular-app/proxy.conf.json.

  2. Busque el valor target: 'http://localhost:7071'.

  3. Observe que el puerto del destino apunta a 7071.

  1. Abra el archivo react-app/package.json.

  2. Busque el valor "proxy": "http://localhost:7071/",.

  3. Observe que el puerto del proxy apunta a 7071.

  1. Abra el archivo svelte-app/rollup.config.js.

  2. Busque la línea de código const api = 'http://localhost:7071/api';.

  3. Observe que el puerto de la API apunta a 7071.

  1. Abra el archivo vue-app/vue.config.js.

  2. Busque el valor target: 'http://localhost:7071',.

  3. Observe que el puerto del destino apunta a 7071.

Ejecutar la aplicación web de front-end

La API ya se está ejecutando en el puerto 7071. Ahora, al ejecutar la aplicación web, esta realiza las solicitudes HTTP a la API. Siga estos pasos para ejecutar la aplicación web:

  1. Abra una segunda instancia de terminal git.

  2. Después, escriba este comando para ir a la carpeta de su marco de front-end de preferencia:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. Ejecute la aplicación cliente de front-end:

    npm start

    npm start

    npm run dev

    npm run serve

Navegar a la aplicación

Ha llegado el momento de ver cómo se ejecuta localmente la aplicación en la API de Azure Functions.

  1. Vaya a http://localhost:4200.
  1. Vaya a http://localhost:3000.
  1. Vaya a http://localhost:5000.
  1. Vaya a http://localhost:8080.
  1. Ha compilado la aplicación y esta ya se ejecuta localmente y realiza solicitudes HTTP GET a la API. Ahora presione Ctrl+C en los terminales para detener la aplicación en ejecución y la API.

Pasos siguientes

Ahora que la aplicación funciona localmente, el siguiente paso consiste en publicar la aplicación con la API.