Tutorial: Conectar una aplicación web Node.js con Azure Cosmos DB for MongoDB (núcleo virtual)
SE APLICA A: núcleo virtual de MongoDB
En este tutorial, se crea una aplicación web Node.js que se conecta a Azure Cosmos DB for MongoDB en arquitectura núcleo virtual. La pila MongoDB, Express, React.js, Node.js (MERN) es una colección popular de tecnologías que se usan para crear muchas aplicaciones web modernas. Con Azure Cosmos DB for MongoDB (núcleo virtual), puede crear una nueva aplicación web o migrar una aplicación existente utilizando controladores MongoDB con los que ya esté familiarizado. En este tutorial, hizo lo siguiente:
- Configurar el entorno
- Prueba de la aplicación MERN con un contenedor local de MongoDB
- Probar la aplicación MERN con un clúster núcleo virtual
- Implementación de la aplicación MERN en Azure App Service
Prerrequisitos
Para completar este tutorial, necesitará los siguientes recursos:
- Un clúster núcleo virtual existente.
- Una cuenta de GitHub.
- GitHub incluye horas gratuitas de Codespaces para todos los usuarios.
Configuración del entorno de desarrollo
Un entorno de contenedor de desarrollo está disponible con todas las dependencias necesarias para completar todos los ejercicios de este proyecto. Puede ejecutar el contenedor de desarrollo en GitHub Codespaces o localmente mediante Visual Studio Code.
GitHub Codespaces ejecuta un contenedor de desarrollo administrado por GitHub con Visual Studio Code para la web como interfaz de usuario. Para el entorno de desarrollo más sencillo, use GitHub Codespaces para tener las herramientas de desarrollo y las dependencias correctas instaladas previamente para completar este módulo de formación.
Importante
Todas las cuentas de GitHub pueden usar Codespaces durante un máximo de 60 horas gratis cada mes con 2 instancias principales.
Inicie el proceso para crear una nueva instancia de GitHub Codespace en la rama
main
del repositorio de GitHubazure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app
.En la página Crear codespace, revise las opciones de configuración de codespace y, después, seleccione Crear nuevo codespace
Espere a que se inicie Codespace. Este proceso de startup puede tardar unos minutos.
Abra un nuevo terminal en el codespace.
Compruebe las versiones de las herramientas que usa en este tutorial.
docker --version node --version npm --version az --version
Nota:
Este tutorial requiere las siguientes versiones de cada herramienta que están preinstaladas en su entorno:
Herramienta Versión Docker ≥ 20.10.0 Node.js ≥ 18.0150 NPM ≥ 9.5.0 Azure CLI ≥ 2.46.0 Cierre el terminal.
Los pasos restantes de este tutorial tienen lugar en el contexto de este contenedor de desarrollo.
Prueba de la API de la aplicación MERN con el contenedor de MongoDB
Para empezar, ejecute la API de la aplicación de ejemplo con el contenedor local de MongoDB para validar que la aplicación funcione.
Ejecute un contenedor de MongoDB mediante Docker y publique el puerto típico de MongoDB (
27017
).docker pull mongo:6.0 docker run --detach --publish 27017:27017 mongo:6.0
En la barra lateral, seleccione la extensión de MongoDB.
Agregue una nueva conexión a la extensión de MongoDB mediante la cadena de conexión
mongodb://localhost
.Una vez que la conexión se haya realizado correctamente, abra el archivo de área de juegos data/products.mongodb.
Seleccione el icono Ejecutar todo para ejecutar el script.
La ejecución del área de juegos debe dar lugar a una lista de documentos de la colección local de MongoDB. Este es un ejemplo truncado de la salida.
[ { "_id": { "$oid": "640a146e89286b79b6628eef" }, "name": "Confira Watch", "category": "watches", "price": 105 }, { "_id": { "$oid": "640a146e89286b79b6628ef0" }, "name": "Diannis Watch", "category": "watches", "price": 98, "sale": true }, ... ]
Nota:
Los identificadores de objeto (
_id
) se generan aleatoriamente y serán diferentes de esta salida de ejemplo truncada.En el directorio server/, crea un nuevo archivo .env.
En el archivo server/.env, agrega una variable de entorno para este valor:
Variable de entorno Valor CONNECTION_STRING
La cadena de conexión al clúster Azure Cosmos DB for MongoDB (núcleo virtual). De momento, utilice mongodb://localhost:27017?directConnection=true
.CONNECTION_STRING=mongodb://localhost:27017?directConnection=true
Cambie el contexto del terminal a la carpeta server/.
cd server
Instale las dependencias del administrador de paquetes de Node (npm).
npm install
Inicie la aplicación Node.js y Express.
npm start
La API abre automáticamente una ventana del explorador para comprobar que devuelve una matriz de documentos de producto.
Cierre la pestaña o ventana del explorador adicional.
Cierre el terminal.
Pruebe la aplicación MERN con el clúster Azure Cosmos DB for MongoDB (núcleo virtual).
Ahora, vamos a validar que la aplicación funciona sin problemas con Azure Cosmos DB for MongoDB (núcleo virtual). Para esta tarea, rellene el clúster preexistente con datos de inicialización mediante el shell de MongoDB y, a continuación, actualice la cadena de conexión de la API.
Inicie sesión en Azure Portal (https://portal.azure.com).
Vaya a la página del clúster Azure Cosmos DB for MongoDB (núcleo virtual) existente.
En la página del clúster Azure Cosmos DB for MongoDB (núcleo virtual), seleccione la opción de menú de navegación Cadenas de conexión.
Registre el valor del campo Cadena de conexión.
Importante
La cadena de conexión del portal no incluye los valores de nombre de usuario y contraseña. Debe reemplazar los marcadores de posición
<user>
y<password>
por las credenciales que usó al crear originalmente el clúster.En el entorno de desarrollo integrado (IDE), abra un nuevo terminal.
Inicie el shell de MongoDB con el comando
mongosh
y la cadena de conexión que registró anteriormente. Asegúrese de reemplazar los marcadores de posición<user>
y<password>
por las credenciales que usó al crear originalmente el clúster.mongosh "<mongodb-cluster-connection-string>"
Nota:
Es posible que tenga que codificar valores específicos para la cadena de conexión. En este ejemplo, el nombre del clúster es
msdocs-cosmos-tutorial
, el nombre de usuario esclusteradmin
y la contraseña esP@ssw.rd
. En la contraseña, el carácter@
tendrá que codificarse mediante%40
. Aquí se proporciona una cadena de conexión de ejemplo con la codificación correcta de la contraseña.CONNECTION_STRING=mongodb+srv://clusteradmin:P%40ssw.rd@msdocs-cosmos-tutorial.mongocluster.cosmos.azure.com/?tls=true&authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000
En el shell, ejecute los siguientes comandos para crear la base de datos, crear la colección y inicializar con datos de inicio.
use('cosmicworks'); db.products.drop(); db.products.insertMany([ { name: "Confira Watch", category: "watches", price: 105.00 }, { name: "Diannis Watch", category: "watches", price: 98.00, sale: true }, { name: "Sterse Gloves", category: "gloves", price: 42.00 }, { name: "Peache Sunglasses", category: "eyewear", price: 32.00, sale: false, sizes: [ "S", "M", "L" ] }, { name: "Icento Pack", category: "bags", price: 58.00 }, { name: "Iroowl Bracelet", category: "watches", price: 66.00 }, { name: "Glaark Bag", category: "bags", price: 56.00, sale: true }, { name: "Windry Mittens", category: "gloves", price: 35.00 }, { name: "Tuvila Hat", category: "hats", price: 120.00 }, { name: "Klinto Hat", category: "hats", subcategory: "hats-beanies", price: 65.00 } ]); db.products.find({});
Los comandos deben dar lugar a una lista de documentos de la colección local de MongoDB. Este es un ejemplo truncado de la salida.
[ { "_id": { "$oid": "640a146e89286b79b6628eef" }, "name": "Confira Watch", "category": "watches", "price": 105 }, { "_id": { "$oid": "640a146e89286b79b6628ef0" }, "name": "Diannis Watch", "category": "watches", "price": 98, "sale": true }, ... ]
Nota:
Los identificadores de objeto (
_id
) se generan aleatoriamente y serán diferentes de esta salida de ejemplo truncada.Salga del shell de MongoDB.
exit
En el directorio client/, cree un nuevo archivo .env.
En el archivo client/.env, agregue una variable de entorno para este valor:
Variable de entorno Valor CONNECTION_STRING
La cadena de conexión al clúster Azure Cosmos DB for MongoDB (núcleo virtual). Use la misma cadena de conexión que usó con el shell de mongo. CONNECTION_STRING=<your-connection-string>
Compruebe que la aplicación use el servicio de base de datos cambiando el contexto del terminal a la carpeta server/, instalando dependencias del administrador de paquetes de Node (npm) e iniciando la aplicación.
cd server npm install npm start
La API abre automáticamente una ventana del explorador para comprobar que devuelve una matriz de documentos de producto.
Cierre la pestaña o ventana del explorador adicional. A continuación, cierre el terminal.
Implementación de la aplicación MERN en Azure App Service
Implemente el servicio y el cliente en Azure App Service para demostrar que la aplicación funciona de un extremo a otro. Use secretos en las aplicaciones web para almacenar variables de entorno con credenciales y puntos de conexión de API.
En el entorno de desarrollo integrado (IDE), abra un nuevo terminal.
Cree una variable de shell para el nombre del grupo de recursos existente denominado resourceGroupName.
# Variable for resource group name resourceGroupName="<existing-resource-group>"
Cree variables de shell para las dos aplicaciones web denominadas serverAppName y clientAppName.
# Variable for randomnly generated suffix let suffix=$RANDOM*$RANDOM # Variable for web app names with a randomnly generated suffix serverAppName="server-app-$suffix" clientAppName="client-app-$suffix"
Si aún no lo ha hecho, inicie sesión en la CLI de Azure con el comando
az login --use-device-code
.Cambie el directorio de trabajo actual a la ruta de acceso server/.
cd server
Cree una nueva aplicación web para el componente de servidor de la aplicación MERN con
az webapp up
.az webapp up \ --resource-group $resourceGroupName \ --name $serverAppName \ --sku F1 \ --runtime "NODE|18-lts"
Cree una nueva configuración de cadena de conexión para la aplicación web de servidor denominada
CONNECTION_STRING
conaz webapp config connection-string set
. Use el mismo valor para la cadena de conexión que usó con el shell de MongoDB y el archivo .env anteriormente en este tutorial.az webapp config connection-string set \ --resource-group $resourceGroupName \ --name $serverAppName \ --connection-string-type custom \ --settings "CONNECTION_STRING=<mongodb-connection-string>"
Obtenga el URI de la aplicación web de servidor con
az webapp show
y almacénelo en un nombre de variable de shell denominado serverUri.serverUri=$(az webapp show \ --resource-group $resourceGroupName \ --name $serverAppName \ --query hostNames[0] \ --output tsv)
Use el paquete
open-cli
y el comando de NuGet connpx
para abrir una ventana del explorador mediante el URI de la aplicación web de servidor. Valide que la aplicación de servidor está devolviendo sus datos de matriz JSON desde el clúster MongoDB (núcleo virtual).npx open-cli "https://$serverUri/products" --yes
Sugerencia
A veces, las implementaciones pueden finalizar de forma asincrónica. Si no ve lo que esperaba, espere otro minuto y actualice la ventana del explorador.
Cambie el directorio de trabajo a la ruta de acceso client/.
cd ../client
Cree una nueva aplicación web para el componente cliente de la aplicación MERN con
az webapp up
.az webapp up \ --resource-group $resourceGroupName \ --name $clientAppName \ --sku F1 \ --runtime "NODE|18-lts"
Cree una nueva configuración de aplicación para la aplicación web cliente denominada
REACT_APP_API_ENDPOINT
conaz webapp config appsettings set
. Use el punto de conexión de la API de servidor almacenado en la variable de shell serverUri.az webapp config appsettings set \ --resource-group $resourceGroupName \ --name $clientAppName \ --settings "REACT_APP_API_ENDPOINT=https://$serverUri"
Obtenga el URI de la aplicación web de cliente con
az webapp show
y almacénelo en un nombre de variable de shell denominado clientUri.clientUri=$(az webapp show \ --resource-group $resourceGroupName \ --name $clientAppName \ --query hostNames[0] \ --output tsv)
Use el paquete
open-cli
y el comando de NuGet connpx
para abrir una ventana del explorador mediante el URI de la aplicación web de cliente. Compruebe que la aplicación cliente represente los datos de la API de la aplicación de servidor.npx open-cli "https://$clientUri" --yes
Sugerencia
A veces, las implementaciones pueden finalizar de forma asincrónica. Si no ve lo que esperaba, espere otro minuto y actualice la ventana del explorador.
Cierre el terminal.
Limpieza de recursos
Cuando trabaje con su propia suscripción, al final de un proyecto, es recomendable eliminar los recursos que ya no necesite. Los recursos que se dejan en ejecución pueden costarle mucho dinero. Puede eliminar los recursos de forma individual o eliminar el grupo de recursos para eliminar todo el conjunto de recursos.
Para eliminar un grupo de recursos entero, use
az group delete
.az group delete \ --name $resourceGroupName \ --yes
Compruebe que el grupo de recursos se haya eliminado mediante
az group list
.az group list
Limpieza del entorno de desarrollo
También es posible que desee limpiar el entorno de desarrollo o devolverlo a su estado típico.
La eliminación del entorno de GitHub Codespaces garantiza que pueda maximizar la cantidad de derechos de horas gratuitas por núcleo que obtiene para su cuenta.
Inicie sesión en el panel de GitHub Codespaces (https://github.com/codespaces).
Busque los codespaces en ejecución actualmente procedentes del repositorio de GitHub
azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app
.Abra el menú contextual del codespace y, a continuación, seleccione Eliminar.
Paso siguiente
Ahora que ha creado su primera aplicación para el clúster MongoDB (núcleo virtual), aprenda cómo migrar sus datos a Azure Cosmos DB.