Inicio rápido: Creación de una función de JavaScript con Visual Studio Code

Use Visual Studio Code para crear una función de JavaScript que responda a solicitudes HTTP. Pruebe el código localmente y, a continuación, impleméntelo en el entorno sin servidor de Azure Functions.

Este inicio rápido supone un pequeño costo en su cuenta de Azure.

También hay una versión basada en la CLI de este artículo.

Configurar su entorno

Antes de empezar, asegúrese de que cumple los siguientes requisitos:

• Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.

• Node.js 10.14.1+. Use el comando node --version para comprobar la versión.

• Visual Studio Code en una de las plataformas admitidas.

• La extensión de Azure Functions para Visual Studio Code.

Creación del proyecto local

En esta sección se usa Visual Studio Code para crear un proyecto local de Azure Functions en JavaScript. Más adelante en este artículo, publicará el código de función en Azure.

1. Seleccione el icono de Azure en la barra de actividades y después en el área Azure: Functions, seleccione el icono Crear un proyecto.

   

2. Elija una ubicación de directorio para el área de trabajo del proyecto y elija Seleccionar.

   Nota

   Estos pasos se han diseñado para completarse fuera de un área de trabajo. Por tanto, no seleccione una carpeta de proyecto que forme parte de un área de trabajo.

3. Escriba la siguiente información cuando se le indique:

   Prompt	Número de selección
   Seleccionar un lenguaje para el proyecto de funciones	Elija JavaScript.
   Seleccionar una plantilla para la primera función de su proyecto	Elija HTTP trigger.
   Proporcionar un nombre de función	Escriba HttpExample.
   Nivel de autorización	Elija Anonymous, que permite que cualquier llame al punto de conexión de la función. Para obtener información sobre el nivel de autorización, consulte Claves de autorización.
   Seleccionar cómo desea que se abra el proyecto	Elija Add to workspace.

   Con esta información, Visual Studio Code genera un proyecto de Azure Functions con un desencadenador HTTP. Los archivos del proyecto locales se pueden ver en Explorer. Para obtener más información sobre los archivos que se crean, consulte Archivos del proyecto generados.

Ejecución local de la función

Visual Studio Code se integra con Azure Functions Core Tools para que pueda ejecutar este proyecto en un equipo de desarrollo local antes de publicarlo en Azure.

1. Para llamar a la función, presione F5 para iniciar el proyecto de aplicación de funciones. La salida de Core Tools aparece en el panel Terminal. La aplicación se inicia en el panel Terminal. Puede ver el punto de conexión de la dirección URL de la función desencadenada por HTTP que se ejecuta localmente.

   

   Si tiene problemas para ejecutarlo en Windows, asegúrese de que el terminal predeterminado de Visual Studio Code no esté establecido en WSL Bash.

2. Mientras se ejecuta Core Tools, vaya al área de Azure: Área Functions. En Functions, expanda Proyecto local > Functions. Haga clic con el botón derecho (Windows) o Ctrl + clic en (macOS) en la función HttpExample y elija Execute Function Now... (Ejecutar la función ahora...).

   

3. En Enter request body (Especificar el cuerpo de la solicitud) verá el valor del cuerpo del mensaje de solicitud de { "name": "Azure" }. Presione Entrar para enviar este mensaje de solicitud a la función.

4. Cuando la función se ejecuta localmente y devuelve una respuesta, se genera una notificación en Visual Studio Code. La información sobre la ejecución de la función se muestra en el panel Terminal.

5. Presione Ctrl + C para detener Core Tools y desconectar el depurador.

Después de comprobar que la función se ejecuta correctamente en el equipo local, es el momento de usar Visual Studio Code para publicar el proyecto directamente en Azure.

Inicio de sesión en Azure

Para poder publicar la aplicación, debe iniciar sesión en Azure.

1. Si aún no ha iniciado sesión, seleccione el icono de Azure en la barra de actividades y después en el área Azure: Functions, elija Iniciar sesión en Azure… . Si aún no dispone de una cuenta, puede crear una cuenta gratuita de Azure . Los alumnos pueden crear una cuenta de Azure gratuita para estudiantes .

   

   Si ya ha iniciado sesión, vaya a la sección siguiente.

2. Cuando se le solicite en el explorador, elija su cuenta de Azure e inicie sesión con las credenciales de la misma.

3. Cuando haya iniciado sesión correctamente, puede cerrar la nueva ventana del explorador. Las suscripciones que pertenecen a su cuenta de Azure se muestran a la barra lateral.

Implementar el proyecto en Azure

En esta sección, va a crear una aplicación de funciones y los recursos relacionados en su suscripción de Azure y, después, va a implementar el código.

1. Seleccione el icono de Azure en la barra de actividades y después en el área Azure: Functions, seleccione el botón de implementación en la aplicación de funciones.

   

2. Escriba la siguiente información cuando se le indique:

   Prompt	Número de selección
   Seleccionar la aplicación de funciones en Azure	Elija + Create new Function App. (No elija la opción Advanced, que no se trata en este artículo).
   Escribir un nombre único global para la aplicación de funciones	Escriba un nombre que sea válido en una ruta de acceso de la dirección URL. El nombre que escriba se valida para asegurarse de que es único en Azure Functions.
   Seleccionar un entorno de ejecución	Elija la versión de Node.js en la que se ha estado ejecutando localmente. Ejecute el comando node --version para comprobar la versión.
   Seleccionar una ubicación para los nuevos recursos	Para mejorar el rendimiento, elija una región cerca de usted.

   La extensión muestra el estado de los recursos individuales a medida que se crean en Azure en el área de notificación.

   

   Cuando se complete, se crearán los siguientes recursos de Azure en la suscripción con nombres que se basan en el nombre de la aplicación de funciones:

   • Un grupo de recursos, que es un contenedor lógico de recursos relacionados.
   • Una cuenta de Azure Storage estándar, que mantiene información de estado y de otro tipo sobre los proyectos.
   • Un plan de consumo, que define el host subyacente para su aplicación de funciones sin servidor.
   • Una aplicación de funciones, que proporciona el entorno para ejecutar el código de función. Una aplicación de funciones permite agrupar funciones como una unidad lógica para facilitar la administración, la implementación y el uso compartido de recursos en el mismo plan de hospedaje.
   • Una instancia de Application Insights conectada a la aplicación de funciones, que realiza un seguimiento del uso de la función sin servidor.

3. Una vez que se haya creado la aplicación de función se mostrará una notificación y se aplicará el paquete de implementación.

   Sugerencia

   De forma predeterminada, los recursos de Azure que requiere la aplicación de funciones se crean según el nombre de la aplicación de funciones que proporcione. De forma predeterminada, también se crean en el mismo grupo de recursos nuevo con la aplicación de funciones. Si quiere personalizar los nombres de estos recursos o reutilizar los recursos existentes, debe publicar el proyecto con opciones de creación avanzadas.

4. Seleccione View Output (Ver salida) en esta notificación para ver la creación y los resultados de la implementación, incluidos los recursos de Azure que ha creado. Si se pierde la notificación, seleccione el icono de campana en la esquina inferior derecha para verlo de nuevo.

   

Ejecución de la función en Azure

1. Vuelva al área Azure: Functions en la barra lateral y expanda su suscripción, la nueva aplicación de funciones y Functions. Haga clic con el botón derecho (Windows) o Ctrl + clic en (macOS) en la función HttpExample y elija Execute Function Now... (Ejecutar la función ahora...).

   

2. En Enter request body (Especificar el cuerpo de la solicitud) verá el valor del cuerpo del mensaje de solicitud de { "name": "Azure" }. Presione Entrar para enviar este mensaje de solicitud a la función.

3. Cuando la función se ejecuta en Azure y devuelve una respuesta, se genera una notificación en Visual Studio Code.

Cambio del código y nueva implementación en Azure

1. En la vista Explorador de VSCode, seleccione el archivo ./HttpExample/index.js.

2. Reemplace el archivo por el código siguiente para construir un objeto JSON y devolverlo.

   module.exports = async function (context, req) {
   
       try {
           context.log('JavaScript HTTP trigger function processed a request.');
   
           // Read incoming data
           const name = (req.query.name || (req.body && req.body.name));
           const sport = (req.query.sport || (req.body && req.body.sport));
   
           // fail if incoming data is required
           if (!name || !sport) {
   
               context.res = {
                   status: 400
               };
               return;
           }
   
           // Add or change code here
           const message = `${name} likes ${sport}`;
   
           // Construct response
           const responseJSON = {
               "name": name,
               "sport": sport,
               "message": message,
               "success": true
           }
   
           context.res = {
               // status: 200, /* Defaults to 200 */
               body: responseJSON,
               contentType: 'application/json'
           };
       } catch(err) {
           context.res = {
               status: 500
           };
       }
   }
   

3. Vuelva a ejecutar la aplicación de funciones de forma local.

4. En el mensaje Escribir el cuerpo de la solicitud, cambie el cuerpo del mensaje de la solicitud a { "name": "Tom","sport":"basketball" }. Presione Entrar para enviar este mensaje de solicitud a la función.

5. Observe la respuesta en la notificación:

   {
     "name": "Tom",
     "sport": "basketball",
     "message": "Tom likes basketball",
     "success": true
   }
   

6. Vuelva a implementar la función en Azure.

Solución de problemas

Use la tabla siguiente para resolver los problemas más comunes que se encuentran al usar este inicio rápido.

Limpieza de recursos

Si va al paso siguiente y agrega un enlace de cola de Azure Storage a una función, tendrá que conservar todos los recursos intactos para basarse en lo que ya ha hecho.

De lo contrario, puede usar los pasos siguientes para eliminar la aplicación de funciones y sus recursos relacionados para evitar incurrir en costos adicionales.

1. En Visual Studio Code, seleccione el icono de Azure para abrir el explorador de Azure.
2. En la sección Grupos de recursos, busque el grupo de recursos.
3. Haga clic con el botón derecho en el grupo de recursos y seleccione Eliminar.

Para más información sobre los costos de Functions, consulte Estimación de los costos según el plan de consumo.

Pasos siguientes

Ha usado Visual Studio Code para crear una aplicación de función con una función simple desencadenada por HTTP. En el siguiente artículo, va a expandir esa función mediante la conexión a Azure Cosmos DB o Azure Storage. Para más información sobre cómo conectarse a otros servicios de Azure, consulte Incorporación de enlaces a una función existente de Azure Functions. Si desea más información sobre la seguridad, consulte Protección de Azure Functions.