Implementar una aplicación web de Node.js en Azure

• Disponga de una cuenta de Azure con una suscripción activa. En caso de no tener una, puede crear una cuenta gratuita.
• Instalación de Node.js LTS. Ejecute el comando node --version para comprobar que Node.js está instalado.
• Instale Visual Studio Code.
• Instale la extensión Azure App Service para Visual Studio Code.

• Disponga de una cuenta de Azure con una suscripción activa. En caso de no tener una, puede crear una cuenta gratuita.
• Instalación de Node.js LTS. Ejecute el comando node --version para comprobar que Node.js está instalado.
• Instale la CLI de Azure, que puede usar para ejecutar comandos en un shell para crear y configurar recursos de Azure.

• Disponga de una cuenta de Azure con una suscripción activa. En caso de no tener una, puede crear una cuenta gratuita.
• Instalación de Node.js LTS. Ejecute el comando node --version para comprobar que Node.js está instalado.
• Tener un cliente FTP, como FileZilla, para transferir archivos a App Service.

Inicio de sesión en Azure

1. En el terminal, asegúrese de que está en el directorio myExpressApp y luego inicie Visual Studio Code con el siguiente comando:

   code .
   

2. En Visual Studio Code, en la barra de actividades, seleccione el logotipo de Azure.

3. Asegúrese de que ha iniciado sesión con su cuenta de Azure.

Configuración de la aplicación de App Service e implementación de código

En el terminal, asegúrate de estar en el directorio myExpressApp . Sustituye <app-name> por un nombre globalmente único, luego crea el grupo de recursos, el plan de servicios de aplicaciones y la app. Configura SCM_DO_BUILD_DURING_DEPLOYMENT para que App Service instale las dependencias y construya la app cuando despliegues el archivo fuente.

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• Si no se reconoce el comando az, asegúrese de que tiene instalada la CLI de Azure tal y como se describe en Configuración del entorno inicial.
• Sustituye <app-name> por un nombre único en todo Azure (los caracteres válidos son a-z, 0-9, y -).
• El --sku P0v3 argumento selecciona el nivel de precios de pago Premium v3. Sustituye eastus por tu región preferida; lista las regiones disponibles con az account list-locations.
• --is-linux selecciona un plan Linux. Omítalo en un plan de Windows, como se muestra en la pestaña de Windows.

Crea un archivo ZIP de los archivos de myExpressApp, no del directorio contenedor. En Linux o macOS, ejecuta zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' desde myExpressApp. En Windows, ejecuta Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip en PowerShell desde myExpressApp. Luego despliega el archivo comprimido:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

Navega hasta https://<app-name>.azurewebsites.net para ver la app.

Creación de recursos de Azure

1. Inicie sesión en Azure Portal.

2. Para empezar a crear una aplicación Node.js, vaya a https://portal.azure.com/#create/Microsoft.WebSite.

3. En la pestaña Datos básicos, en Detalles del proyecto, asegúrese de que la suscripción correcta está seleccionada y luego seleccione Crear nuevo para crear un grupo de recursos. Escriba myResourceGroup para el nombre.

   

4. En Detalles de la instancia, escriba un nombre único global para la aplicación web y seleccione Código. Seleccione Node 24 LTS en la pila en tiempo de ejecución, un sistema operativo y una región desde la que quiere servir la aplicación.

   

5. En Planes de precios, seleccione Crear nuevo para crear un plan de App Service. Escriba myAppServicePlan como nombre. Para cambiar al nivel Gratis, seleccione Gratis F1 en la lista Plan de precios .

   

6. Seleccione el botón Revisar y crear de la parte inferior de la página.

   

7. Después de que se ejecute la validación, seleccione el botón Crear en la parte inferior de la página.

8. Una vez finalizada la implementación, seleccione Ir al recurso.

   

Obtener credenciales de FTPS

Azure App Service admite dos tipos de credenciales para la implementación de FTP/S. Estas credenciales no son las mismas que las de su suscripción a Azure. En esta sección, obtendrá las credenciales de ámbito de aplicación que se usarán con el cliente FTP.

1. En la página de la aplicación de App Service, seleccione Centro de implementación en Implementación en el menú de la barra lateral y, a continuación, seleccione la pestaña Credenciales de FTPS.

   

2. Abra el cliente FTP y vaya a la carpeta myExpressApp .

3. En la pestaña Credenciales de FTPS , copie el punto de conexión ftpS, el nombre de usuario y la contraseña en el cliente FTP.

   

4. Seleccione Conectar en el cliente FTP.

Implementar archivos con FTPS

1. Copie todos los archivos y directorios en el directorio /site/wwwroot en Azure.

   

2. Vaya a la dirección URL de la aplicación para comprobar que la aplicación se está ejecutando correctamente.

2. En el explorador App Service, seleccione de nuevo el icono Implementar en aplicación web y confirme seleccionando Implementar de nuevo.

3. Espere a que finalice la implementación y, a continuación, seleccione Examinar sitio web en el elemento emergente de notificación. Debería ver que el Welcome to Express mensaje se cambió a Welcome to Azure.

2. Guarda tus cambios, recrea ../app.zip desde los archivos de la app como se describe en Desplegar a Azure, y vuelve a desplegar:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Sustituye <app-name> por el nombre que usaste cuando creaste la aplicación web.

3. Una vez terminada la implementación, actualice la página web. Debería ver que el Welcome to Express mensaje se cambió a Welcome to Azure.

2. Guarde los cambios y vuelva a implementar la aplicación mediante el cliente FTP.

3. Una vez terminada la implementación, actualice la página web. Debería ver que el Welcome to Express mensaje se cambió a Welcome to Azure.

Puede transmitir la salida del registro (llamadas a console.log()) desde la aplicación de Azure directamente en la ventana de salida de Visual Studio Code.

1. En Recursos de Visual Studio Code, haga clic con el botón derecho en el nodo de la aplicación y seleccione Iniciar registros de streaming.

   

2. Si se le pide que reinicie la aplicación, seleccione Sí. Después de reiniciar la aplicación, se abrirá la ventana de salida de Visual Studio Code con una conexión a la transmisión de registros.

3. Después de unos segundos, la ventana de salida muestra un mensaje donde se indica que está conectado al servicio de transmisión de registros. Puede generar más actividad de salida actualizando la página en el explorador.

   Connecting to log stream...
   2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
   Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
   

Puede acceder a los registros de consola generados desde dentro de la aplicación y del contenedor en que esta se ejecuta. Los registros incluyen cualquier salida generada por las llamadas a console.log().

Para transmitir registros, ejecute el comando az webapp log tail:

• Activa el registro primero: en Linux, ejecuta az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; en Windows, ejecuta az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

az webapp log tail --resource-group myResourceGroup --name <app-name>

Sustituye <app-name> por el nombre que usaste cuando creaste la aplicación web.

Actualice la aplicación en el explorador para que se generen registros de la consola, que incluyen mensajes que describen las solicitudes HTTP a la aplicación. Si no aparece la salida inmediatamente, inténtelo de nuevo en 30 segundos.

Para detener el streaming de registros en cualquier momento, seleccione Ctrl+C en el terminal.

Puede acceder a los registros de consola generados desde dentro de la aplicación y del contenedor en que esta se ejecuta. Puede transmitir la salida del registro (llamadas a console.log()) desde la aplicación Node.js directamente en Azure Portal.

1. En la misma página de App Service para tu aplicación, usa el menú de la barra lateral para desplazarte a la sección Supervisión y selecciona Transmisión de registros.

   

2. Después de unos segundos, la ventana de salida muestra un mensaje donde se indica que está conectado al servicio de transmisión de registros. Puede generar más actividad de salida actualizando la página en el explorador.

   Connecting...
   2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
   Starting Log Tail -n 10 of existing logs ----
   /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
   2021-10-26T21:04:08.614384810Z: [INFO]
   2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
   2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
   2021-10-26T21:04:08.614403210Z: [INFO]
   2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
   2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
   2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
   2021-10-26T21:04:08.614419610Z: [INFO]  fi
   2021-10-26T21:04:08.614423411Z: [INFO]
   2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
   Ending Log Tail of existing logs ---
   

En los pasos anteriores, creó recursos de Azure en un grupo de recursos. En los pasos de este inicio rápido se colocan todos los recursos de este grupo de recursos. Para quitarlos, solo tiene que eliminar el grupo de recursos.

1. En la extensión de Azure de Visual Studio Code, en la lista Agrupar por , seleccione Agrupar por grupo de recursos.

2. En la lista Recursos , expanda la suscripción, haga clic con el botón derecho en el grupo de recursos que creó anteriormente y seleccione Eliminar grupo de recursos.

   

3. Cuando se le solicite, confirme la eliminación; para ello, escriba el nombre del grupo de recursos que va a eliminar. Después de confirmarlo, se elimina el grupo de recursos y verá una notificación cuando haya terminado.

En los pasos anteriores de la CLI, creaste recursos de Azure en myResourceGroup.

Si prevé que no necesitará estos recursos en el futuro, ejecute el siguiente comando para eliminar el grupo de recursos:

az group delete --name myResourceGroup --no-wait

El argumento --no-wait permite la devolución del comando antes de que se complete la operación.

Puede eliminar el grupo de recursos, App Service y todos los recursos relacionados cuando ya no sean necesarios.

1. En la página Información general de App Service, seleccione el grupo de recursos que creó en el paso Creación de recursos de Azure.

   

2. En la página del grupo de recursos, seleccione Eliminar grupo de recursos. Confirme el nombre del grupo de recursos para terminar de eliminar los recursos.