Compartir a través de

Implementación de una aplicación web de Node.js y MongoDB en Azure

  • Artículo

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación automática de revisiones con el sistema operativo Linux. En este tutorial, se muestra cómo crear una aplicación de Node.js segura en Azure App Service conectada a una base de datos de Azure Cosmos DB for MongoDB. Cuando haya terminado, tendrá una aplicación de Express.js que se ejecuta en Azure App Service en Linux.

Un diagrama que muestra cómo se implementará la aplicación Express.js en Azure App Service y cómo se hospedarán los datos de MongoDB dentro de Azure Cosmos DB.

En este artículo, se da por supuesto que ya está familiarizado con el desarrollo en Node.js y que Node y MongoDB están instalados localmente. También necesita una cuenta de Azure con una suscripción activa. Si no tiene una cuenta de Azure, puede crearla gratis.

Aplicación de ejemplo

Para seguir este tutorial, clone o descargue la aplicación de ejemplo desde el repositorio https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

Si desea ejecutar la aplicación localmente, haga lo siguiente:

  • Instale las dependencias del paquete mediante la ejecución de npm install.
  • Copie el archivo .env.sample en .env y rellene el valor DATABASE_URL con la dirección URL de MongoDB (por ejemplo, mongodb://localhost:27017/).
  • Inicie la aplicación mediante npm start.
  • Para ver la aplicación, vaya a http://localhost:3000.

1. Creación de App Service y Azure Cosmos DB

En este paso, creará los recursos de Azure. Los pasos que se usan en este tutorial crean un conjunto de recursos seguros de forma predeterminada que incluyen App Service y Azure Cosmos DB for MongoDB. En el proceso de creación especificará lo siguiente:

  • El Nombre de la aplicación web. Es el nombre que se usa como parte del nombre DNS de la aplicación web en el formato https://<app-name>.azurewebsites.net.
  • La región para ejecutar la aplicación físicamente en el mundo.
  • La pila en tiempo de ejecución para la aplicación. Es donde se selecciona la versión de Node que se va a usar para la aplicación.
  • El plan de hospedaje para la aplicación. Es el plan de tarifa que incluye el conjunto de características y la capacidad de escalado de la aplicación.
  • El Grupo de recursos de la aplicación. Un grupo de recursos permite agrupar (en un contenedor lógico) todos los recursos de Azure necesarios para la aplicación.

Inicie sesión en Azure Portal y siga estos pasos para crear los recursos de Azure App Service.

Paso 1: En el portal Azure:

  1. Escriba "base de datos de aplicación web" en la barra de búsqueda de la parte superior de Azure Portal.
  2. Seleccione el elemento denominado Aplicación web + base de datos en el encabezado Marketplace. También puede ir directamente al asistente de creación.

Captura de pantalla que muestra cómo usar el cuadro de búsqueda de la barra de herramientas superior para encontrar el asistente de creación Aplicación web + base de datos

Paso 2: In the páginaCrear aplicación web + base de datos, rellene el formulario de la siguiente manera.

  1. Grupo de recursos → Seleccione Crear nuevo y use el nombre msdocs-expressjs-mongodb-tutorial.
  2. Región → Cualquier región de Azure cercana.
  3. Nombre → msdocs-expressjs-mongodb-XYZ, donde XYZ son tres caracteres aleatorios. Este nombre debe ser único en Azure.
  4. Pila en tiempo de ejecución→ Node 16 LTS.
  5. Plan de hospedaje → Básico. Cuando esté listo, puede escalar verticalmente a un plan de tarifa de producción más adelante.
  6. Azure Cosmos DB for MongoDB está seleccionado de manera predeterminada como el motor de base de datos. Azure Cosmos DB es una base de datos nativa en la nube que ofrece una API 100 % compatible con MongoDB. Anote el nombre de base de datos que se genera automáticamente (<app-name>-database). Lo necesitará más adelante.
  7. Seleccione Revisar + crear.
  8. Una vez completada la validación, seleccione Crear.

Captura de pantalla que muestra cómo configurar una aplicación y base de datos nuevas en el asistente Crear aplicación web + base de datos

Step 3:La implementación tarda unos minutos en completarse. Una vez completada la implementación, seleccione el botón Ir al recurso. Se le dirigirá directamente a la aplicación App Service, pero se crean los siguientes recursos:

  • Grupo de recursos → Contenedor de todos los recursos creados.
  • Plan de App Service → Define los recursos de proceso de App Service. Se crea un plan de Linux en el nivel Básico.
  • App Service → Representa su aplicación y se ejecuta en el plan de App Service.
  • Red virtual → Se integra con la aplicación App Service y aísla el tráfico de red de back-end.
  • Punto de conexión privado → punto de conexión de acceso para el recurso de base de datos de la red virtual.
  • Interfaz de red → Representa una dirección IP privada para el punto de conexión privado.
  • Azure Cosmos DB for MongoDB → Accesible solo desde detrás del punto de conexión privado. Una base de datos y un usuario se crean automáticamente en el servidor.
  • Zona DNS privada → Habilita la resolución DNS del servidor de Azure Cosmos DB en la red virtual.

Captura de pantalla en la que se muestra el proceso completo de la implementación.

2. Configuración de la conectividad de base de datos

El asistente para la creación ya generó el URI de MongoDB, pero la aplicación necesita una variable DATABASE_URL y una variable DATABASE_NAME. En este paso, creará la configuración de la aplicación con el formato que la aplicación necesita.

Paso 1: En la página App Service, en el menú de la izquierda, seleccione Configuración.

Captura de pantalla que muestra cómo abrir la página de configuración de App Service

Paso 2: En la pestaña Ajustes de la aplicación de la página Configuración, cree un ajuste DATABASE_NAME:

  1. Seleccione Nueva configuración de la aplicación.
  2. En el campo Nombre, escriba DATABASE_NAME.
  3. En el campo Valor, escriba el nombre de base de datos que generó automáticamente el asistente de creación, que es similar a msdocs-expressjs-mongodb-XYZ-database.
  4. Seleccione Aceptar.

Captura de pantalla que muestra cómo ver la cadena de conexión generada automáticamente

Paso 3:

  1. Desplácese hasta la parte inferior de la página y seleccione la cadena de conexión MONGODB_URI. Lo generó el asistente para la creación.
  2. En el campo Valor, seleccione el botón Copiar y pegue el valor en un archivo de texto para usarlo en el siguiente paso. Está en el formato de URI de cadena de conexión de MongoDB.
  3. Seleccione Cancelar.

Captura de pantalla en la que se muestra cómo crear una configuración de aplicación

Paso 4:

  1. Con los mismos pasos del paso 2, cree una configuración de aplicación denominada DATABASE_URL y establezca el valor en aquel que copió de la cadena de conexión MONGODB_URI (es decir, mongodb://...).
  2. En la barra de menú superior, seleccione Guardar.
  3. Cuando se le solicite, seleccione Continuar.

Captura de pantalla que muestra cómo guardar la configuración en la página de configuración.

3. Implementación del código de ejemplo

En este paso, configurará la implementación de GitHub mediante Acciones de GitHub. Es solo una de las muchas maneras de implementar en App Service, pero también una excelente manera de disponer de integración continua en el proceso de implementación. De forma predeterminada, cada uno de los repositorios git push de GitHub iniciará la acción de compilación e implementación.

Paso 1: En una nueva ventana del navegador:

  1. Inicie sesión en su cuenta de GitHub.
  2. Vaya a https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
  3. Seleccione Bifurcación.
  4. Seleccione Crear bifurcación.

Captura de pantalla que muestra cómo crear una bifurcación del repositorio de GitHub de ejemplo

Paso 2: En la página de GitHub, abre Visual Studio Code en el navegador pulsando la tecla ..

Captura de pantalla que muestra cómo abrir la experiencia de explorador de Visual Studio Code en GitHub

Paso 3: En Visual Studio Code en el navegador, abra config/connection.js en el explorador. En la función getConnectionInfo, fíjese que la configuración de la aplicación que creó anteriormente para la conexión de MongoDB se usa (DATABASE_URL y DATABASE_NAME).

Captura de pantalla que muestra Visual Studio Code en el explorador y un archivo abierto

Paso 4: De nuevo en la página App Service, en el menú de la izquierda, seleccione Centro de implementación.

Captura de pantalla que muestra cómo abrir el centro de implementación de App Service

Paso 5: En la página Centro de implementación:

  1. En Origen, seleccione GitHub. De forma predeterminada, Acciones de GitHub está seleccionado como proveedor de compilación.
  2. Inicie sesión en su cuenta de GitHub y siga las indicaciones para autorizar a Azure.
  3. En Organización, seleccione su cuenta.
  4. En Repositorio, seleccione msdocs-nodejs-mongodb-azure-sample-app.
  5. En Rama, seleccione main.
  6. En el menú superior, elija Guardar. App Service confirma un archivo de flujo de trabajo en el repositorio de GitHub escogido, en el directorio .github/workflows.

Captura de pantalla que muestra cómo configurar la CI/CD mediante Acciones de GitHub

Paso 6: En la página Centro de implementación:

  1. Seleccione Registros. Ya hay iniciada una ejecución de implementación.
  2. En el elemento de registro de la ejecución de implementación, seleccione Compilar o implementar registros.

Captura de pantalla que muestra cómo abrir registros de implementación en el centro de implementación

Paso 7: Se le llevará al repositorio de GitHub, donde ve que la acción de GitHub se está ejecutando. El archivo de flujo de trabajo define dos fases independientes: compilación e implementación. Espere a que la ejecución de GitHub muestre el estado Completado. Tardará unos 15 minutos.

Captura de pantalla que muestra una ejecución de GitHub en curso.

4. Navegación hasta la aplicación

Paso 1. En la página App Service:

  1. En el menú de la izquierda, seleccione Información general.
  2. Seleccione la dirección URL de la aplicación. También puede navegar directamente a https://<app-name>.azurewebsites.net.

Captura de pantalla que muestra cómo iniciar una App Service desde Azure Portal

Paso 2: Añadir algunas tareas a la lista. Ya está ejecutando una aplicación segura Node.js orientada a datos en Azure App Service.

Captura de pantalla de la aplicación Express.js ejecutándose en App Service..

5. Transmisión de registros de diagnóstico

Azure App Service captura todos los mensajes registrados en la consola para ayudarle a diagnosticar problemas de la aplicación. La aplicación de ejemplo genera mensajes de registro de consola en cada uno de sus puntos de conexión para demostrar esta capacidad. Por ejemplo, el punto de conexión get genera un mensaje sobre el número de tareas recuperadas de la base de datos y un mensaje de error si algo va mal.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Paso 1. En la página App Service:

  1. En el menú de la izquierda, seleccione Registros de App Service.
  2. En Registro de aplicaciones, seleccione Sistema de archivos.

Captura de pantalla que muestra cómo habilitar los registros nativos en App Service en Azure Portal

Paso 2: En el menú de la izquierda, seleccione Flujo de registro. Verá los registros de la aplicación, incluidos los registros de plataforma y los registros de dentro del contenedor.

Captura de pantalla que muestra cómo ver la secuencia de registro en Azure Portal

6. Inspección de archivos implementados mediante Kudu

Azure App Service proporciona una consola de diagnóstico basada en web de nombre Kudu que permite examinar el entorno de hospedaje del servidor de la aplicación web. Con Kudu puede ver los archivos implementados en Azure, revisar el historial de implementación de la aplicación e incluso abrir una sesión de SSH en el entorno de hospedaje.

Paso 1. En la página App Service:

  1. En el menú de la izquierda, seleccione Herramientas avanzadas.
  2. Seleccione Ir. También puede navegar directamente a https://<app-name>.scm.azurewebsites.net.

Captura de pantalla que muestra cómo navegar hasta la página de Kudu de App Service.

Paso 2: En la página Kudu, seleccione Implementación.

Captura de pantalla de la página principal de la aplicación Kudu SCM que muestra la diferente información disponible sobre el entorno de alojamiento.

Si ha implementado código en App Service mediante Git o implementación zip, verá un historial de implementaciones de la aplicación web.

Captura de pantalla que muestra el historial de implementación de una aplicación de App Service en formato JSON.

Paso 3: Vuelva a la página principal de Kudu y seleccione Sitio wwwroot.

Captura de pantalla que muestra sitio wwwroot seleccionado.

Puede ver la estructura de carpetas implementadas y hacer clic para examinar y ver los archivos.

Captura de pantalla de los archivos implementados en el directorio wwwroot.

7. Limpieza de recursos

Cuando acabe, puede eliminar todos los recursos de la suscripción de Azure mediante la eliminación del grupo de recursos.

Paso 1:En la barra de búsqueda de la parte superior de Azure Portal:

  1. Escriba el nombre del grupo de recursos.
  2. Seleccione el grupo de recursos.

Captura de pantalla que muestra cómo localizar un grupo de recursos y navegar hasta él en Azure Portal

Paso 2: En la página del grupo de recursos, seleccione Borrar grupo de recursos.

Captura de pantalla que muestra la ubicación del botón Eliminar grupo de recursos en Azure Portal

Paso 3:

  1. Escriba el nombre del grupo de recursos para confirmar la eliminación.
  2. Seleccione Eliminar.

Captura de pantalla del diálogo de confirmación para eliminar un grupo de recursos en Azure Portal. :

Preguntas más frecuentes

¿Cuánto cuesta esta configuración?

Los precios por la creación de los recursos son los siguientes:

  • El plan de App Service se crea en el nivel Básico y puede escalar o reducirse verticalmente. Consulte Precios de App Service.
  • El servidor de Azure Cosmos DB se crea en una sola región y se puede distribuir a otras regiones. Consulte Precios de Azure Cosmos DB.
  • La red virtual no incurre en cargo alguno, a menos que se configure alguna funcionalidad extra, como, por ejemplo, el emparejamiento. Vea Precios de Azure Virtual Network.
  • La zona DNS privada conlleva un pequeño cargo. Vea Precios de Azure DNS.

¿Cómo me conecto al servidor de Azure Cosmos DB protegido tras la red virtual con otras herramientas?

  • Para tener un acceso básico desde una herramienta de línea de comandos, puede ejecutar mongosh desde el terminal de SSH de la aplicación. El contenedor de la aplicación no incluye mongosh, por lo que debe instalarlo manualmente. Recuerde que el cliente instalado no persiste en los reinicios de la aplicación.
  • Para conectarse desde un cliente de GUI de MongoDB, la máquina debe estar en la red virtual. Por ejemplo, podría ser una máquina virtual de Azure conectada a una de las subredes, o una máquina de una red local que tenga una conexión VPN de sitio a sitio a la red virtual de Azure.
  • Para conectarse desde el shell de MongoDB desde la página de administración de Azure Cosmos DB en el portal, la máquina también debe estar dentro de la red virtual. En su lugar, podría abrir el firewall del servidor de Azure Cosmos DB para la dirección IP de la máquina local, pero aumenta la superficie expuesta a ataques para la configuración.

¿Cómo funciona el desarrollo de aplicaciones locales con Acciones de GitHub?

Tome como ejemplo el archivo de flujo de trabajo generado automáticamente de App Service: cada git push inicia una nueva ejecución de compilación e implementación. Desde un clon local del repositorio de GitHub, las actualizaciones deseadas se insertan en GitHub. Por ejemplo:

git add .
git commit -m "<some-message>"
git push origin main

¿Por qué la implementación de Acciones de GitHub es tan lenta?

El archivo de flujo de trabajo generado automáticamente de App Service define un proceso de compilación e implementación posterior; esto es, se ejecutan dos trabajos. Dado que cada trabajo se ejecuta en su propio entorno limpio, el archivo de flujo de trabajo garantiza que el trabajo deploy va a tener acceso a los archivos del trabajo build:

Casi todo el tiempo que tarda el proceso de dos trabajos se dedica a cargar y descargar artefactos. Si lo desea, puede simplificar el archivo de flujo de trabajo combinando los dos trabajos en uno, con lo cual no será necesario realizar los pasos de carga y descarga.

Pasos siguientes

JavaScript en el Centro para desarrolladores de Azure

Configuración de una aplicación de Node.js en App Service

 Protección con un certificado y dominio personalizado