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. Desde allí, ampliará la API con una nueva función mediante la extensión de Azure Functions para Visual Studio Code.

En este ejercicio, completará los pasos siguientes:

  1. Crea una rama al prepararse para realizar cambios en tu 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 front-end. La api-starter carpeta incluye un proyecto de Azure Functions incompleto. Así que, vamos a completar eso 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 de la aplicación, por lo que ahora es un buen momento para crear una rama.

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

  2. Escriba y seleccione Git: Desproteger en....

  3. Seleccione Crear nueva rama.

  4. Escriba api para el nuevo nombre de rama y presione Entrar.

Acaba de crear la rama de GIT api.

Completar la API de Azure Functions

Para completar la API, empiece moviendo el código de LA API de inicio a una carpeta denominada api. Especificó este nombre de carpeta para el 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 área de trabajo activa).

  3. Asegúrese de que está en la carpeta raíz del proyecto.

  4. Ejecute el siguiente comando de Git para cambiar el nombre de la api-starter carpeta 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, verá una carpeta de API en el explorador de Visual Studio Code. La carpeta de 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 ELIMINAR 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 agregarlo ahora.

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

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

  1. Vaya a Visual Studio Marketplace e instale la extensión de 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 localmente.

Creación de la función

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

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

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

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

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

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

Nota:

La aplicación Functions se encuentra en la api carpeta , 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 estructurar la aplicación, pero para este ejemplo le ayuda a verlas separadas.

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

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. Dado que 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. Sin embargo, quiere que el punto de conexión sea productos.

Configure la función:

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

  2. Tenga en cuenta que los métodos permiten tanto GET como POST.

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

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

Ahora la función se desencadena en una solicitud HTTP GET a productos. El function.json debe tener un aspecto similar al código 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 de la carpeta api/products-get contiene lógica que se ejecuta cuando realiza una solicitud HTTP a la ruta.

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

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 siguiente código:

    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 de 200, cuando tiene éxito.

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. El archivo aparece en .gitignore porque podría almacenar secretos en él que no desearía en GitHub. Esta lista es la razón por la que tuviste que crear el archivo cuando creaste tu repo a partir de la plantilla.

Ejecutar la API

Ahora es el momento de ver que la aplicación web y el proyecto de Azure Functions funcionan juntos. Para empezar, ejecute el proyecto de Azure Functions localmente siguiendo estos pasos:

Nota:

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

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

    cd api

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

    npm install

    npm start

Ejecución de la aplicación web

La API se está ejecutando. Ahora debe configurar la aplicación front-end para realizar su solicitud HTTP a la API. La aplicación front-end se ejecuta en un puerto y la API se ejecuta en un puerto diferente (7071). Cada framework de front-end se puede configurar para redireccionar las solicitudes HTTP a un puerto de forma segura.

Configuración del puerto de proxy

Configure el proxy para la aplicación front-end con 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.

Ejecución de la aplicación web front-end

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

  1. Abra una segunda instancia de terminal git.

  2. A continuación, escriba este comando para ir a la carpeta de su marco de front-end preferido:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

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

    npm start

    npm start

    npm run dev

    npm run serve

Accede a tu 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, detenga la aplicación en ejecución y la API presionando Ctrl-C en los terminales.

Pasos siguientes

La aplicación funciona localmente y el siguiente paso es publicar la aplicación con la API.