Compartir por


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

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.

Captura de pantalla de la aplicación de Node.js que almacena datos en Cosmos DB.

En este tutorial, aprenderá a:

  • Cree una arquitectura segura de manera predeterminada para Azure App Service y Azure Cosmos DB con la API de MongoDB.
  • Proteja los secretos de conexión usando una identidad administrada y referencias de Key Vault.
  • Implemente una aplicación de ejemplo de Node.js en App Service desde un repositorio de GitHub.
  • Acceda a la configuración de la aplicación de App Service en el código de la aplicación.
  • Realice actualizaciones y vuelva a implementar el código de la aplicación.
  • Transmita los registros de diagnóstico desde App Service.
  • Administre la aplicación en Azure Portal.
  • Aprovisione la misma arquitectura e impleméntela usando Azure Developer CLI.
  • Optimice su flujo de trabajo de desarrollo con GitHub Codespaces y GitHub Copilot.

Requisitos previos

  • Una cuenta de Azure con una suscripción activa. Si no tiene una cuenta de Azure, puede crearla gratis.
  • Una cuenta de GitHub. También puede obtener una gratis.
  • Conocimientos de desarrollo de Express.js.
  • (Opcional) Para probar GitHub Copilot, una cuenta de GitHub Copilot. Hay disponible una evaluación gratuita de 30 días.
  • Una cuenta de Azure con una suscripción activa. Si no tiene una cuenta de Azure, puede crearla gratis.
  • Azure Developer CLI instalado. Puede seguir los pasos con Azure Cloud Shell porque ya tiene instalado Azure Developer CLI.
  • Conocimientos de desarrollo de Express.js.
  • (Opcional) Para probar GitHub Copilot, una cuenta de GitHub Copilot. Hay disponible una evaluación gratuita de 30 días.

Ir al final

Puede implementar rápidamente la aplicación de ejemplo en este tutorial y verla en ejecución en Azure. Solo tiene que ejecutar los siguientes comandos en Azure Cloud Shell y seguir la solicitud:

mkdir msdocs-nodejs-mongodb-azure-sample-app
cd msdocs-nodejs-mongodb-azure-sample-app
azd init --template msdocs-nodejs-mongodb-azure-sample-app
azd up

1. Ejecución del ejemplo

En primer lugar, configurará una aplicación controlada por datos de ejemplo como punto inicial. Para lograr mayor comodidad, el repositorio de ejemplo incluye una configuración de contenedor de desarrollo. El contenedor de desarrollo tiene todo lo que necesita para desarrollar una aplicación, incluida la base de datos, la caché y todas las variables de entorno necesarias para la aplicación de ejemplo. El contenedor de desarrollo puede ejecutarse en un codespace de GitHub, lo que significa que puede ejecutar el ejemplo en cualquier equipo con un explorador web.

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/fork.
  3. Anule la selección de Copiar solo la rama principal. Quiere todas las ramas.
  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 bifurcación de GitHub:

  1. Seleccione Principal>starter-no-infra para la rama de inicio. Esta rama contiene solo el proyecto de ejemplo y ninguna configuración ni archivo relacionados con Azure.
  2. Seleccione Código>Crear codespace on starter-no-infra. El codespace tarda unos minutos en configurarse.

Captura de pantalla que muestra cómo crear un codespace en GitHub.

Paso 3: En el terminal de codespace:

  1. Ejecute npm install && npm start.
  2. Cuando vea la notificación Your application running on port 3000 is available., seleccione Abrir en explorador. Debería ver la aplicación de ejemplo en una nueva pestaña del explorador. Para detener la aplicación Express.js, escriba Ctrl+C.

Captura de pantalla que muestra cómo ejecutar la aplicación de ejemplo dentro del codespace de GitHub.

Sugerencia

Puede preguntar a GitHub Copilot sobre este repositorio. Por ejemplo:

  • @workspace ¿Qué hace este proyecto?
  • @workspace ¿Qué hace la carpeta .devcontainer?

¿Tiene problemas? Consulte la sección Solución de problemas.

2. 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. Se usa como parte del nombre DNS de la aplicación en forma de https://<app-name>-<hash>.<region>.azurewebsites.net.
  • La región para ejecutar la aplicación físicamente en el mundo. También se usa como parte del nombre DNS de la aplicación.
  • 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 un nombre de msdocs-expressjs-mongodb-tutorial.
  2. Región: cualquier región de Azure cercana a usted.
  3. Nombre: msdocs-expressjs-mongodb-XYZ, donde XYZ son tres caracteres aleatorios.
  4. Pila en tiempo de ejecución: Node 20 LTS.
  5. Motor: API de Cosmos DB para MongoDB. 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.
  6. Plan de hospedaje: Básico. Cuando esté listo, puede escalar verticalmente a un plan de tarifa de producción.
  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.

¿Tiene problemas? Consulte la sección Solución de problemas.

3. Protección de secretos de conexión

El Asistente para la creación generó la cadena de conectividad para usted como configuración de la aplicación. Sin embargo, el procedimiento recomendado de seguridad es mantener completamente los secretos fuera de App Service. Moverá los secretos al almacén de claves y cambiará la configuración de la aplicación a una referencia de Key Vault con la ayuda de los conectores de seguridad.

Paso 1. En la página App Service:

  1. En el menú de la izquierda, seleccione Configuración > Variables de entorno.
  2. Siguiente a AZURE_COSMOS_CONNECTIONSTRING, seleccione Mostrar valor. Esta cadena de conexión le permite conectarse a la base de datos de Cosmos DB protegida detrás de un punto de conexión privado. Sin embargo, el secreto se guarda directamente en la aplicación de App Service, que no es lo mejor. Cambiará esto.

Captura de pantalla que muestra cómo ver el valor de una configuración de aplicación.

Paso 2: Creación de un almacén de claves para la administración segura de secretos.

  1. En la barra de búsqueda superior, escriba "almacén de claves" y, a continuación, seleccione Marketplace>Key Vault.
  2. En Grupo de recursos, seleccione msdocs-expressjs-mongodb-tutorial.
  3. En Nombre del almacén de claves, escriba un nombre que consta de solo letras y números.
  4. En Región, establézcalo en la ubicación de ejemplo como grupo de recursos.

Captura de pantalla que muestra cómo crear un almacén de claves.

Paso 3:

  1. Seleccione la pestaña Redes.
  2. Anule la selección de Habilitar acceso público.
  3. Seleccione Crear un punto de conexión privado.
  4. En Grupo de recursos, seleccione msdocs-expressjs-mongodb-tutorial.
  5. En Nombre del almacén de claves, escriba un nombre que consta de solo letras y números.
  6. En Región, establézcalo en la ubicación de ejemplo como grupo de recursos.
  7. En el cuadro de diálogo, en Ubicación, seleccione la misma ubicación que la aplicación de App Service.
  8. En Grupo de recursos, seleccione msdocs-expressjs-mongodb-tutorial.
  9. En Nombre, escriba msdocs-expressjs-mongodb-XYZVaultEndpoint.
  10. En Red virtual, seleccione msdocs-expressjs-mongodb-XYZVnet.
  11. En Subred, msdocs-expressjs-mongodb-XYZSubnet.
  12. Seleccione Aceptar.
  13. Seleccione Revisar y crear y, luego, Crear. Espere a que finalice la implementación del almacén de claves. Debería ver "La implementación está completa".

Captura de pantalla que muestra cómo proteger un almacén de claves con un punto de conexión privado.

Paso 4:

  1. En la barra de búsqueda de la parte superior, escriba msdocs-expressjs-mongodb, después el recurso de App Service llamado msdocs-expressjs-mongodb-XYZ.
  2. En la página App Service, en el menú de la izquierda, seleccione Configuración > Conector de servicio. Ya hay un conector, que el asistente para la creación de aplicaciones ha creado automáticamente.
  3. Active la casilla situada junto al conector y seleccione Editar.
  4. En la pestaña Aspectos básicos, establezca Tipo de cliente en Node.js.
  5. Seleccione la pestaña Autenticación.
  6. Seleccione Almacenar secreto en Key Vault.
  7. En Conexión de Key Vault, seleccione Crear nuevo. Se abre un cuadro de diálogo Crear conexión encima del cuadro de diálogo de edición.

Captura de pantalla que muestra cómo editar un conector de servicio con una conexión de almacén de claves.

Paso 5: En el cuadro de diálogo Crear de conexión para la conexión de Key Vault:

  1. En Key Vault, seleccione el almacén de claves que creó anteriormente.
  2. Seleccione Revisar + crear. Debería ver que Identidad administrada asignada por el sistema está establecida en Seleccionados.
  3. Cuando se complete la validación, seleccione Crear.

Captura de pantalla que muestra cómo configurar un conector de servicio del almacén de claves.

Paso 6: Vuelve al cuadro de diálogo de edición de defaultConnector.

  1. En la pestaña Autenticación, espere a que se cree el conector del almacén de claves. Cuando haya terminado, la lista desplegable Conexión de Key Vault la selecciona automáticamente.
  2. Seleccione Siguiente: Redes.
  3. Seleccione Configurar reglas de firewall para habilitar el acceso al servicio de destino. Si ve el mensaje "Ningún punto de conexión privado en el servicio de destino", omita el mensaje. El Asistente para la creación de aplicaciones ya ha protegido la base de datos de Cosmos DB con un punto de conexión privado.
  4. Seleccione Guardar. Espere hasta que aparezca la Actualización correcta notificación.

Captura de pantalla que muestra la conexión del almacén de claves seleccionada en defaultConnector.

Paso 7: Para comprobar los cambios:

  1. En el menú de la izquierda, seleccione Variables de entorno de nuevo.
  2. Junto a la configuración de la aplicación AZURE_COSMOS_CONNECTIONSTRING, seleccione Mostrar valor. El valor debe ser @Microsoft.KeyVault(...), lo que significa que es un referencia del almacén de claves porque el secreto ahora se administra en el almacén de claves.

Recorte de pantalla que muestra cómo ver el valor de la variable de entorno de App Service en Azure.

¿Tiene problemas? Consulte la sección Solución de problemas.

4. Implantació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 inicia la acción de compilación e implementación.

Paso 1: En el menú de la izquierda, seleccione Implementación>Centro de implementación.

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

Paso 2: 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 starter-no-infra. Esta es la misma rama en la que ha trabajado con la aplicación de ejemplo, sin archivos ni configuraciones relacionados con Azure.
  6. En Tipo de autenticación, seleccione Identidad asignada por el usuario.
  7. 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. De manera predeterminada, el centro de implementación crea una identidad asignada por el usuario para que el flujo de trabajo se autentique mediante Microsoft Entra (autenticación OIDC). Para obtener opciones de autenticación alternativas, consulte Implementación en App Service mediante Acciones de GitHub.

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

Paso 3: De nuevo en el codespace de GitHub de la bifurcación de ejemplo, ejecute git pull origin starter-no-infra. Esto extrae el archivo de flujo de trabajo recién confirmado en el codespace.

Captura de pantalla que muestra la extracción de Git dentro de un codespace de GitHub.

Paso 4 (Opción 1: con GitHub Copilot):

  1. Inicie una nueva sesión de chat al seleccionar la vista Chat y, después, seleccionar +.
  2. Pregunte: "@workspace ¿Cómo se conecta la aplicación a la base de datos?". Copilot podría indicarle el archivo app.js y la llamada a mongoose.connect.
  3. Por ejemplo, "*Tengo una variable de cadena de conexión en Azure denominada AZURE_COSMOS_CONNECTIONSTRING.". Copilot puede proporcionarle una sugerencia de código similar a la de los pasos a continuación de la Opción 2: sin GitHub Copilot, e incluso indicarle que realice el cambio en app.js.
  4. Abra app.js en el explorador y agregue la sugerencia de código en el método getApp. GitHub Copilot no proporciona la misma respuesta cada vez y es posible que tenga que hacer preguntas adicionales para ajustar su respuesta. Para obtener sugerencias, consulte ¿Qué puedo hacer con GitHub Copilot en mi espacio de código?.

Captura de pantalla que muestra cómo hacer una pregunta en una nueva sesión de chat de GitHub Copilot.

Paso 4 (Opción 2: sin GitHub Copilot):

  1. En el explorador, abra app.js.
  2. Encuentre la línea donde se llama a mongoose.connect (línea 16) y cambie process.env.MONGODB_URI por process.env.AZURE_COSMOS_CONNECTIONSTRING || process.env.MONGODB_URI.

Recorte de pantalla que muestra un codespace de GitHub y app.js abierto.

Paso 5:

  1. Seleccione la extensión Control de código fuente.
  2. En el cuadro de texto, escriba un mensaje de confirmación, por ejemplo, Update environment variable. O bien, seleccione y deje que GitHub Copilot genere un mensaje de confirmación de manera automática.
  3. Seleccione Confirmar y, a continuación, confirme con .
  4. Seleccione Sincronización de cambios 1 y confirme con Aceptar.

Captura de pantalla en la que se muestran los cambios que se confirman y se insertan en GitHub.

Paso 6: De vuelta en la página Centro de implementación en Azure Portal:

  1. En la pestaña Registros , seleccione Actualizar. Ya se ha iniciado una nueva ejecución de implementación a partir de los cambios confirmados.
  2. En el elemento de registro de la ejecución de implementación, seleccione la entrada Registros de compilación/implementación con la marca de tiempo más reciente.

Captura de pantalla que muestra una implementación correcta en la página Registros del 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.

Captura de pantalla que muestra una ejecución correcta de GitHub.

¿Tiene problemas? Consulte la sección Solución de problemas.

5. 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..

6. 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.
  3. En el menú superior, elija Guardar.

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

7. 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 implementa 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 implementada y seleccionar para examinar y ver los archivos.

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

8. 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. :

2. Creación de recursos de Azure e implementación de una aplicación de ejemplo

En este paso, creará los recursos de Azure e implementará una aplicación de ejemplo en App Service en Linux. Los pasos que se usan en este tutorial crean un conjunto de recursos seguros de valor predeterminado que incluyen App Service y Azure Cosmos DB.

El contenedor de desarrollo ya tiene Azure Developer CLI (AZD).

  1. Desde la raíz del repositorio, ejecute azd init.

    azd init --template nodejs-app-service-cosmos-redis-infra
    
  2. Cuando se le solicite, proporcione las siguientes respuestas:

    Pregunta Respuesta
    El directorio actual no está vacío. ¿Desea inicializar un proyecto aquí en "<su directorio>"? Y
    ¿Qué quiere hacer con estos archivos? Mantener mis archivos existentes sin cambios
    Escribir un nuevo nombre de entorno Escriba un nombre único. La plantilla de AZD usa este nombre como parte del nombre DNS de la aplicación web en Azure (<app-name>-<hash>.azurewebsites.net). Se permiten caracteres alfanuméricos y guiones.
  3. Inicie sesión en Azure mediante la ejecución del comando azd auth login y siga la solicitud:

    azd auth login
    
  4. Cree los recursos de Azure necesarios e implemente el código de la aplicación con el comando azd up. Siga la solicitud para seleccionar la suscripción y la ubicación deseadas para los recursos de Azure.

    azd up
    

    El comando azd up tarda unos 15 minutos en completarse (la Redis Cache tarda más tiempo). También compila e implementa el código de la aplicación, pero modificará el código más adelante para trabajar con App Service. Mientras se ejecuta, el comando proporciona mensajes sobre el proceso de aprovisionamiento e implementación, incluido un vínculo a la implementación en Azure. Cuando termina, el comando también muestra un vínculo a la aplicación implementada.

    Esta plantilla de AZD contiene archivos (azure.yaml y el directorio infra) que generarán una arquitectura segura de manera predeterminada con los siguientes recursos de Azure:

    • Grupo de recursos: contenedor para 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 B1.
    • 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 back-end.
    • Cuenta de Azure Cosmos DB con la API de MongoDB: accesible solo desde detrás de su punto de conexión privado. Se crea una base de datos automáticamente en el servidor.
    • Azure Cache for Redis: accesible solo desde la red virtual.
    • Almacén de claves: accesible solo desde detrás de su punto de conexión privado. Se usa para administrar secretos para la aplicación de App Service.
    • Puntos de conexión privados: acceda a puntos de conexión para el servidor de bases de datos y Redis Cache en la red virtual.
    • Zonas DNS privado: habilite la resolución DNS de la base de datos de Cosmos DB, la caché de Redis y el almacén de claves de la red virtual.
    • Área de trabajo de Log Analytics: actúa como contenedor de destino para que su aplicación envíe sus registros, donde también puede consultar los registros.

    Una vez que el comando termina de crear recursos e implementar el código de la aplicación la primera vez, la aplicación de ejemplo implementada aún no funciona porque debe realizar pequeños cambios para conectarse a la base de datos en Azure.

3. Comprobación de cadenas de conexión

La plantilla de AZD que usa ya ha generado las variables de conectividad como valores de la aplicación y las envía al terminal para mayor comodidad. La configuración de la aplicación es una forma de mantener los secretos de conexión fuera del repositorio de código.

  1. En la salida de AZD, busque el valor de la aplicación AZURE_COSMOS_CONNECTIONSTRING. Solo se muestran los nombres de configuración. Tienen este aspecto en la salida de AZD:

     App Service app has the following app settings:
             - AZURE_COSMOS_CONNECTIONSTRING
             - AZURE_REDIS_CONNECTIONSTRING
             - AZURE_KEYVAULT_RESOURCEENDPOINT
             - AZURE_KEYVAULT_SCOPE
     

    AZURE_COSMOS_CONNECTIONSTRING contiene la cadena de conexión a la base de datos de Cosmos DB en Azure. Debe usarla en el código más adelante.

  2. Para mayor comodidad, la plantilla de AZD muestra el vínculo directo a la página de configuración de la aplicación. Busque el vínculo y ábralo en una nueva pestaña del explorador.

¿Tiene problemas? Consulte la sección Solución de problemas.

4. Modificación del código de ejemplo y reimplementación

  1. En el codespace de GitHub, inicie una nueva sesión de chat haciendo clic en la vista Chat y después en +.

  2. Pregunte: "@workspace ¿Cómo se conecta la aplicación a la base de datos?". Copilot podría indicarle el archivo app.js y la llamada a mongoose.connect.

  3. Por ejemplo, "*Tengo una variable de cadena de conexión en Azure denominada AZURE_COSMOS_CONNECTIONSTRING.". Copilot puede proporcionarle una sugerencia de código similar a la de los pasos a continuación de la Opción 2: sin GitHub Copilot, e incluso indicarle que realice el cambio en app.js.

  4. Abra app.js en el explorador y agregue la sugerencia de código en el método getApp.

    GitHub Copilot no proporciona la misma respuesta cada vez y es posible que tenga que hacer preguntas adicionales para ajustar su respuesta. Para obtener sugerencias, consulte ¿Qué puedo hacer con GitHub Copilot en mi espacio de código?.

  5. De nuevo en el terminal de codespace, ejecute azd deploy.

    azd deploy
    

Sugerencia

También puede usar siempre azd up, que hace todas las azd package, azd provision, y azd deploy.

¿Tiene problemas? Consulte la sección Solución de problemas.

5. Navegación hasta la aplicación

  1. En la salida de AZD, busque la dirección URL de la aplicación y vaya a ella en el explorador. La dirección URL tiene este aspecto en la salida de AZD:

     Deploying services (azd deploy)
    
       (✓) Done: Deploying service web
       - Endpoint: https://<app-name>-<hash>.azurewebsites.net/
     
  2. Agregue algunas tareas a la lista.

    Recorte de pantalla de la aplicación web de Express.js con Cosmos DB ejecutándose en Azure mostrando las tareas.

    Enhorabuena, está ejecutando una aplicación web en Azure App Service, con conectividad segura con Azure Cosmos DB.

¿Tiene problemas? Consulte la sección Solución de problemas.

6. 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.');
    });
});

En la salida de AZD, busque el vínculo para transmitir registros de App Service y vaya a él en el explorador. El vínculo tiene este aspecto en la salida de AZD:

Stream App Service logs at: https://portal.azure.com/#@/resource/subscriptions/<subscription-guid>/resourceGroups/<group-name>/providers/Microsoft.Web/sites/<app-name>/logStream

Para obtener más información sobre el registro de aplicaciones Java en la serie, consulte Habilitación de Azure Monitor OpenTelemetry para aplicaciones de .NET, Node.js, Python y Java.

¿Tiene problemas? Consulte la sección Solución de problemas.

7. Limpieza de recursos

Para eliminar todos los recursos de Azure en el entorno de implementación actual, ejecute azd down y siga las indicaciones.

azd down

Solución de problemas

La vista de implementación del portal para Azure Cosmos DB muestra un estado de conflicto

En función de la suscripción y la región que seleccione, es posible que vea el estado de implementación para que Azure Cosmos DB sea Conflict, con el siguiente mensaje en Detalles de la operación:

Sorry, we are currently experiencing high demand in <region> region, and cannot fulfill your request at this time.

Lo más probable es que el error se deba a un límite de la suscripción para la región que seleccione. Pruebe a elegir otra región para la implementación.

La página del explorador de la aplicación implementada dice "Algo salió mal".

Es probable que aún tenga que realizar los cambios en la cadena de conexión en el código de su aplicación. Consulte 4. Implementación del código de ejemplo.

Preguntas más frecuentes

¿Cuánto cuesta esta configuración?

Los precios por los recursos creados 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.

No tengo permisos para crear una identidad asignada por el usuario

Consulte Configuración de la implementación de Acciones de GitHub desde el centro de implementación.

¿Qué puedo hacer con GitHub Copilot en mi codespace?

Es posible que observe que la vista de chat de GitHub Copilot ya estaba allí cuando creó el codespace. Para mayor comodidad, incluimos la extensión de chat de GitHub Copilot en la definición del contenedor (consulte .devcontainer/devcontainer.json). Sin embargo, necesita una cuenta de GitHub Copilot (versión de prueba gratuita de 30 días disponible).

Algunas sugerencias para usted al hablar con GitHub Copilot:

  • En una sola sesión de chat, las preguntas y respuestas se basan entre sí y puede ajustar sus preguntas para ajustar la respuesta que obtenga.
  • De forma predeterminada, GitHub Copilot no tiene acceso a ningún archivo del repositorio. Para formular preguntas sobre un archivo, abra primero el archivo en el editor.
  • Para permitir que GitHub Copilot tenga acceso a todos los archivos del repositorio al preparar sus respuestas, comience la pregunta con @workspace. Para obtener más información, vea Use the @workspace agent.
  • En la sesión de chat, GitHub Copilot puede sugerir cambios y (con @workspace) incluso donde realizar los cambios, pero no se permite realizar los cambios automáticamente. Es necesario agregar los cambios sugeridos y probarlos.

Estas son algunas otras cosas que puede decir para ajustar la respuesta que obtiene:

  • @workspace ¿Dónde se define MONGODB_URI?
  • ¿En qué archivo se realiza el cambio?
  • ¿Este cambio romperá mi aplicación cuando se ejecute localmente?

Pasos siguientes