Implementación de Express.js en Azure App Service mediante Visual Studio Code

Implemente la aplicación de Express.js en Azure con la extensión de Visual Studio Code para Azure App Service. Para ello, haga lo siguiente:

• Cree una aplicación Express.js.
• Cree un recurso de aplicación web para hospedar la aplicación.
• Implemente la aplicación en el recurso.
• Consulte registros remotos localmente.

1. Configurado su entorno de desarrollo

• Cree una suscripción de Azure gratuita.
• Instale Node.js LTS y npm.
• Instale Visual Studio Code y utilice las siguientes extensiones:
  • Extensión de Azure App Service

2. Inicio de sesión en Azure

Si ya usa las extensiones de servicio de Azure, ya debe haber iniciado sesión y puede omitir este paso.

Después de instalar una extensión en Visual Studio Code, debe iniciar sesión en su cuenta de Azure.

1. En Visual Studio Code, seleccione el icono del explorador de Azure y, a continuación, seleccione Iniciar sesión en Azure y siga las indicaciones.

   

2. Después de iniciar sesión, compruebe que la dirección de correo electrónico de la cuenta de Azure aparece en la barra de estado y que las suscripciones aparecen en el explorador de Azure:

   

3. Creación de una aplicación Express.js local

Cree y ejecute una aplicación de Express.js mediante la clonación de un repositorio de ejemplo de Azure.

1. En un terminal o símbolo del sistema, vaya a la ubicación en la que quiere crear la carpeta de la aplicación.

2. Use el siguiente comando de base con git para clonar el repositorio, cambie a la carpeta del repositorio llamada myexpressapp, instale las dependencias de npm y abra el proyecto en Visual Studio Code desde el terminal.

   git clone https://github.com/Azure-Samples/js-e2e-express-server.git myexpressapp && \
       cd myexpressapp && \
       npm install && \
       code .
   

4. Ejecución de la aplicación Express.js local

1. Inicie el servidor:

   npm start
   

2. Para probar la aplicación, abra http://localhost:3000 en un explorador. El sitio web debe tener el siguiente aspecto:

   

3. Presione CtrlC en el terminal para detener el servidor.

5. Creación de un recurso de App Service en Visual Studio Code

1. Use CtrlMayúsP para abrir la paleta de comandos.

2. Escriba create web y seleccione create web

   En lugar de usar los valores predeterminados de Linux, use el comando avanzado para tener control total sobre la implementación, incluido el grupo de recursos, el plan de App Service y el sistema operativo.

3. Responda a los mensajes tal y como se indica a continuación:

   • Seleccione la cuenta de Suscripción.
   • En Enter a globally unique name (Escriba un nombre único global), escriba un nombre que sea único en todo Azure. Use solo caracteres alfanuméricos (A-Z, a-z y 0-9) y guiones ("-").
   • Seleccione Crear nuevo grupo de recursos y proporcione un nombre como .
   • Seleccione el sistema operativo Linux.
   • Seleccione Crear un nuevo plan App Service ,proporcione un nombre como y seleccione el plan de tarifa F1 Gratis.
   • Seleccione Omitir por ahora para el recurso de Application Insights.
   • Seleccione una ubicación cerca de usted.

4. Tras unos momentos, VS Code notifica que se ha completado la creación. Cierre la notificación con el botón X:

   

5. Cuando la aplicación web esté en su lugar, debe indicar a VS Code que implemente el código desde el repositorio de Git local. Seleccione el icono de Azure para abrir el explorador de Azure App Service, expanda el nodo de suscripción, haga clic con el botón derecho en el nombre de la aplicación web que acaba de crear y seleccione Configure Deployment Source (Configurar origen de implementación).

   

6. Cuando se le pida, seleccione LocalGit.

7. Seleccione el icono de implementación (flecha arriba) para implementar el código en Azure:

   

8. En los mensajes, seleccione la carpeta myexpressapp, seleccione de nuevo la cuenta de la suscripción y, después, el nombre de la aplicación web que creó anteriormente.

   Cuando finalice esta implementación, se mostrará en el Explorador de Azure, en el nodo Git de Implementaciones de la aplicación web.

9. Cuando aparezca el aviso Always deploy the workspace to (app name) (Implementar siempre el área de trabajo en [nombre de la aplicación], seleccione Sí. Esto indica a VS Code que el destino sea automáticamente la misma aplicación web de App Service en las implementaciones posteriores.

10. Una vez finalizada la implementación, seleccione Browse Website (Examinar sitio web) en el mensaje para ver la aplicación web recién implementada. El explorador mostrará un mensaje "Hello World!".

7. Transmisión de registros de servicio remoto en Visual Studio Code

Vea o consulte el final de los archivos de salida que la aplicación en ejecución genere mediante llamadas a console.log. Esta salida aparece en la ventana Salida de Visual Studio Code.

1. En el explorador de Azure App Service, haga clic con el botón derecho en el nodo de la aplicación y elija Start Streaming Logs (Iniciar transmisión de registros).

   

2. Actualice la página web varias veces en el explorador para ver otras salidas de registros.

8. Cambios y reimplementación

1. Realice un pequeño cambio en la aplicación. En ./public/client.html, cambie Welcome to Express por Welcome to Express with Visual Studio Code.

2. Haga clic con el botón derecho en la instancia de App Service en la lista de servicios de aplicación y, a continuación, seleccione Deploy to Web App... (Implementar en aplicación web).

   

9. Limpieza de recursos

Cuando desee limpiar los recursos, haga clic con el botón derecho en App Service en la extensión de App Service de Visual Studio Code y, después, seleccione Eliminar.

Solucionar problemas

Al intentar iniciar sesión en Azure, si ve el error "No se encuentra la suscripción con el nombre [identificador de suscripción]" , puede deberse a que está detrás de un servidor proxy y no puede acceder a la API de Azure. Configure las variables de entorno HTTP_PROXY y HTTPS_PROXY con la información del servidor proxy en el terminal:

• bash
• PowerShell
• Cmd

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Pasos siguientes

• Más información acerca de la configuración de aplicaciones

Ha completado correctamente este inicio rápido. Ahora puede consultar las demás extensiones de Azure.

• Cosmos DB
• Funciones de Azure
• Herramientas de Docker
• Herramientas de la CLI de Azure
• Herramientas de Azure Resource Manager (ARM)

Para instalar todas las extensiones de Azure conjuntamente, instale el paquete de extensión de Node para Azure.

Para más información sobre cómo trabajar con Azure usando Node.js, visite los siguientes recursos:

• Centro para desarrolladores de Node.js para Azure
• Enlaces de Azure Cosmos DB para Azure Functions 2.x
• Guía para el desarrollador de JavaScript para Azure Functions
• Entrada de blog: Creación de una aplicación CRUD Azure Functions MongoDB - Dev.to
• Vídeo: Migración de la API a un entorno sin servidor mediante Azure Functions: YouTube
• Canal oficial de YouTube: Azure Functions