Implementación de una aplicación de Express.js y MongoDB en App Service desde Visual Studio Code

Implemente la aplicación Express.js que se conecta a MongoDB en Azure App Service (en Linux) y una instancia de Cosmos DB.

El trabajo de programación se realiza automáticamente. Este tutorial se centra en el uso correcto de los entornos de Azure locales y remotos desde Visual Studio Code con extensiones de Azure.

• Código de ejemplo

Principales tareas

En este tutorial se incluyen varias tareas principales de Azure para desarrolladores de JavaScript:

• Creación de un recurso de Cosmos DB para hospedar la base de datos de MongoDB
• Creación de un recurso de App Service para hospedar la aplicación de Express.js
• Implementación de la aplicación de Express.js en App Service

Aplicación de ejemplo

La aplicación de Express.js de ejemplo consta de los siguientes elementos:

• Servidor Express.js, hospedado en el puerto 8080
• Motor de vista del servidor React.js sencillo
• Funciones de la API nativa de MongoDB para insertar, eliminar y buscar datos

Creación o uso de una suscripción de Azure existente

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

Instalación del software

• Node.js 12 (LTS) y npm, el administrador de paquetes de Node.js, instalados en el equipo local.
• Visual Studio Code instalado en la máquina local.
• Extensiones de Visual Studio Code:
  • Extensión de Azure App Service para Visual Studio Code (instalada desde Visual Studio Code).
  • Bases de datos de Azure
  • Recursos de Azure

Creación de un recurso de base de datos de Cosmos DB para MongoDB

Cree un recurso de Cosmos en primer lugar, ya que tardará varios minutos.

1. En Visual Studio Code, seleccione el icono de Azure en el menú de la izquierda y, a continuación, seleccione la sección Bases de datos.

   Si la sección Bases de datos no está visible, asegúrese de que ha seleccionado la sección en el menú ... en la parte superior de Azure.

   

2. En la sección Bases de datos del explorador de Azure, seleccione su suscripción haciendo clic con el botón derecho y, después, seleccione Crear servidor.

3. En la paleta de comandos Create new Azure Database Server (Crear nuevo servidor de base de datos de Azure), seleccione Azure Cosmos DB para la API de MongoDB.

4. Siga las indicaciones que se indican en la tabla siguiente para comprender cómo se usan los valores. La base de datos puede tardar hasta 15 minutos en crearse.

   Propiedad	Valor
   Escriba un nombre de cuenta único global para el nuevo recurso.	Escriba un valor como, por ejemplo cosmos-mongodb-YOUR-NAME, para el recurso. Reemplace YOUR-NAME por su nombre o identificador único. Este nombre único también se usa como parte de la dirección URL para acceder al recurso en un explorador.
   Seleccione o cree un grupo de recursos.	Cree un nuevo grupo de recursos denominado js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE.
   Location	Ubicación del recurso. Para este tutorial, seleccione una ubicación regional cercana.

   El recurso puede tardar hasta 15 minutos en crearse. Puede pasar por alto la siguiente sección si tiene restricciones de tiempo, pero recuerde volver a finalizar la siguiente sección en unos minutos.

Obtención de la cadena de conexión de Cosmos DB

Mientras sigue en el explorador de bases de datos de Azure, haga clic con el botón derecho en el nombre del recurso y seleccione Copy Connection String (Copiar cadena de conexión) para copiar la cadena de conexión. La necesitará más adelante en el tutorial para el archivo de variables de entorno.

Clonación de la aplicación Express.js de ejemplo

Se le proporciona la aplicación web de Express.js. Clone la aplicación con Git, instale las dependencias y ejecute la aplicación.

1. Clone el repositorio de ejemplo, instale las dependencias y, a continuación, abra el proyecto en Visual Studio Code.

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

2. Edite el archivo de entorno, .env, y agregue la propiedad de la cadena de conexión para Cosmos DB como el valor de la propiedad DATABASE_URL.

   DATABASE_URL=ADD-YOUR-CONNECTION-STRING_HERE
   

3. En Visual Studio Code, abra una ventana de terminal y ejecute los siguientes comandos para instalar las dependencias del ejemplo e iniciar la aplicación web.

   npm start
   

4. Puede ver la aplicación web en el equipo local en un explorador.

   http://localhost:8080/
   

   

Creación de un recurso de aplicación web e implementación de la aplicación de Express.js

Use la extensión de Visual Studio Code para App Service para crear un recurso de App Service e implementar la aplicación web de Express.js en el recurso.

1. Vaya al explorador de Azure. Haga clic con el botón derecho en la suscripción y, a continuación, seleccione Create new web app...(Advanced).

   

2. Siga las indicaciones que se indican en la tabla siguiente para comprender cómo se usan los valores.

   Propiedad	Valor
   Escriba un nombre único global para la nueva aplicación web.	Escriba un valor, como por ejemplo web-app-with-mongodb-YOUR-NAME, para el recurso de App Service. Reemplace <YOUR-NAME> por su nombre o identificador único. Este nombre único también se usa como parte de la dirección URL para acceder al recurso en un explorador.
   Seleccione un grupo de recursos para los nuevos recursos.	Seleccione el grupo de recursos que creó para el recurso de Cosmos DB, js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE, y reemplace YOUR-NAME-HERE por su nombre o alias de correo electrónico.
   Seleccione un tiempo de ejecución para la aplicación de Linux.	Seleccione Node 12 LTS.
   Seleccione un sistema operativo.	Seleccione Linux.
   Crear un plan de App Service de Linux.	Cree un nuevo plan de servicio denominado js-demo-mongodb-web-app-plan-YOUR-NAME-HERE, y reemplace YOUR-NAME-HERE por su nombre o alias de correo electrónico.
   Seleccione un nivel de precios.	Gratuito
   Seleccione un recurso de Application Insights.	Omítalo por ahora.
   Seleccione una ubicación para los nuevos recursos.	Seleccione la misma ubicación que seleccionó al crear el recurso de Cosmos DB y el grupo de recursos.

3. Una vez completado el proceso de creación de la aplicación, aparece un mensaje de estado en la esquina inferior derecha de Visual Studio Code con una opción Deploy de o View output . Seleccione Deploy.

   

   Si el mensaje de estado ya no está visible, para realizar la implementación puede seleccionar el explorador de Azure, hacer clic con el botón derecho en el nombre del recurso y, después, seleccionar Implementar en aplicación web.

4. Durante el proceso de implementación, una notificación le permite mostrar la ventana de salida. En ella se muestra el estado gradual de la implementación.

5. Una vez completada la implementación, aparece una notificación. Seleccione Hacer streaming de registros para ver los registros graduales.

   

   

Configuración de una variable de entorno de App Service para la cadena de conexión de base de datos

La variable de entorno DATABASE_URL almacenada localmente en el archivo .env, no se implementó en la aplicación web. Esto se debe a que aparece como un archivo omitido en el archivo ./.vscode/settings.json:

{
    "appService.zipIgnorePattern": [
        "node_modules{,/**}",
        ".vscode{,/**}",
        ".env",
        "test{,/**}"
    ],
    "appService.deploySubpath": ".",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

1. Seleccione el icono de Azure en la barra de actividad y, a continuación, seleccione la aplicación web en App Service y la suscripción.

2. Haga clic con el botón derecho en Configuración de la aplicación y seleccione Agregar nueva configuración.

3. Agregue el mismo nombre y valor del archivo .env.

   Nombre del valor	Value
   DATABASE_URL	mongodb://...

4. Haga clic con el botón derecho en la aplicación web de Azure y seleccione Reiniciar.

Visualización de una aplicación web de Azure en un explorador

1. Abra el sitio web en un explorador y reemplace el texto YOUR-RESOURCE_NAME por su propio nombre de recurso: https://YOUR-RESOURCE_NAME.azurewebsites.net.
2. Use la aplicación web para agregar y eliminar elementos.

Cambios y reimplementación

Realice algunos cambios y vuelva a implementar la aplicación mediante la extensión de App Service.

Limpieza de recursos

Una vez que haya completado este tutorial, elimine los recursos.

En Visual Studio Code, use el Explorador de Azure para grupos de recursos, haga clic con el botón derecho en el grupo de recursos, como , reemplazando por su nombre o alias de correo electrónico y, a js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE continuación, YOUR-NAME-HERE seleccione js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE

¿Quiere saber más?

Extensión de Azure App Service

• Wiki de GitHub
• Wiki de GitHub sobre la implementación del archivo ZIP

Pasos siguientes

Siga aprendiendo sobre App Service y Cosmos DB:

• Más información acerca de la configuración de aplicaciones
• Configuración de una aplicación de Node.js para Azure App Service
• Conexión con SSH
• Migración de datos a Cosmos DB