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

Temas que se abordarán:

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.

Requisitos previos

Para completar este tutorial:

• Instalación de Git
• Instalación de Node.js y NPM

• Use el entorno de Bash en Azure Cloud Shell.

  

• Si lo prefiere, instale la CLI de Azure para ejecutar sus comandos de referencia.

  • Si usa una instalación local, inicie sesión en la CLI de Azure mediante el comando az login. Siga los pasos que se muestran en el terminal para completar el proceso de autenticación. Para ver otras opciones de inicio de sesión, consulte Inicio de sesión con la CLI de Azure.

  • Cuando se le solicite, instale las extensiones de la CLI de Azure la primera vez que la use. Para más información sobre las extensiones, consulte Uso de extensiones con la CLI de Azure.

  • Ejecute az version para buscar cuál es la versión y las bibliotecas dependientes que están instaladas. Para realizar la actualización a la versión más reciente, ejecute az upgrade.

Creación de una aplicación local Node.js

En este paso, configurará el proyecto local de Node.js.

Clonación de la aplicación de ejemplo

En la ventana del terminal, use cd para cambiar a un directorio de trabajo.

Ejecute el comando siguiente para clonar el repositorio de ejemplo.

git clone https://github.com/Azure-Samples/mean-todoapp.git

Ejecución de la aplicación

Instale los comandos siguientes para instalar los paquetes necesarios e inicie la aplicación.

cd mean-todoapp
npm install
node app.js --alter

Cuando la aplicación se haya cargado completamente, verá algo similar al siguiente mensaje:

debug: -------------------------------------------------------
debug: :: Fri Jul 09 2021 13:10:34 GMT+0200 (Central European Summer Time)

debug: Environment : development
debug: Port        : 1337
debug: -------------------------------------------------------

Vaya a http://localhost:1337 en un explorador. Agregue algunos elementos de tareas pendientes.

La aplicación de ejemplo MEAN almacena datos de usuario en la base de datos. De forma predeterminada, usa una base de datos de desarrollo basada en disco. Si puede crear y ver elementos de tareas pendientes, significa que la aplicación lee y escribe datos.

Para detener Node.js en cualquier momento, presione Ctrl+C en el terminal.

Creación de una base de datos de MongoDB de producción

En este paso, creará una base de datos MongoDB en Azure. Cuando la aplicación se implementa en Azure, utiliza esta base de datos en la nube.

Para MongoDB, en este tutorial se usa Azure Cosmos DB. Cosmos DB admite las conexiones del cliente de MongoDB.

Crear un grupo de recursos

Un grupo de recursos es un contenedor lógico en el que los recursos de Azure, como aplicaciones web, bases de datos y cuentas de almacenamiento, se implementen y administren. Por ejemplo, más adelante puede elegir eliminar todo el grupo de recursos en un solo paso.

En Cloud Shell, cree un grupo de recursos con el comando az group create. En el ejemplo siguiente, se crea un grupo de recursos denominado myResourceGroup en la ubicación Oeste de Europa. Para ver todas las ubicaciones que se admiten en App Service en el nivel Gratis, ejecute el comando az appservice list-locations --sku FREE.

az group create --name myResourceGroup --location "West Europe"

Generalmente se crean el grupo de recursos y los recursos en una región cercana.

Cuando finaliza el comando, una salida de JSON muestra las propiedades del grupo de recursos.

Creación de una cuenta de Cosmos DB

En Cloud Shell, cree una cuenta de Cosmos DB con el comando az cosmosdb create.

En el siguiente comando, sustituya el marcador de posición <cosmosdb-name> por un nombre único de base de datos de Cosmos DB. Este nombre se usa como parte del punto de conexión de Cosmos DB, https://<cosmosdb-name>.documents.azure.com/, por lo que el nombre debe ser único en todas las cuentas de Cosmos DB de Azure. El nombre debe contener solo letras minúsculas, números y el carácter de guion (-), y debe tener una longitud de entre 3 y 50 caracteres.

az cosmosdb create --name <cosmosdb-name> --resource-group myResourceGroup --kind MongoDB

El parámetro --kind MongoDB habilita las conexiones de cliente de MongoDB.

Cuando se crea la cuenta de Cosmos DB, la CLI de Azure muestra información similar a la del ejemplo siguiente:

{
  "apiProperties": {
    "serverVersion": "3.6"
  },
  "backupPolicy": {
    "periodicModeProperties": {
      "backupIntervalInMinutes": 240,
      "backupRetentionIntervalInHours": 8,
      "backupStorageRedundancy": "Geo"
    },
    "type": "Periodic"
  },
  "capabilities": [
    {
      "name": "EnableMongo"
    }
  ],
  "connectorOffer": null,
  "consistencyPolicy": {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "cors": [],
  "databaseAccountOfferType": "Standard",
  "defaultIdentity": "FirstPartyIdentity",
  "disableKeyBasedMetadataWriteAccess": false,
  "documentEndpoint": "https://<cosmosdb-name>.documents.azure.com:443/",
  ...
  < Output truncated for readability >
}

Conexión de la aplicación a la base de datos MongoDB de producción

En este paso, conectará la aplicación de ejemplo a la base de datos Cosmos DB que acaba de crear mediante una cadena de conexión de MongoDB.

Recuperación de la clave de base de datos

Para conectarse a la base de datos Cosmos DB, necesita la clave de base de datos. En Cloud Shell, use el comando az cosmosdb keys list para recuperar la clave principal.

az cosmosdb keys list --name <cosmosdb-name> --resource-group myResourceGroup

La CLI de Azure muestra información similar a la del ejemplo siguiente:

{
  "primaryMasterKey": "RS4CmUwzGRASJPMoc0kiEvdnKmxyRILC9BWisAYh3Hq4zBYKr0XQiSE4pqx3UchBeO4QRCzUt1i7w0rOkitoJw==",
  "primaryReadonlyMasterKey": "HvitsjIYz8TwRmIuPEUAALRwqgKOzJUjW22wPL2U8zoMVhGvregBkBk9LdMTxqBgDETSq7obbwZtdeFY7hElTg==",
  "secondaryMasterKey": "Lu9aeZTiXU4PjuuyGBbvS1N9IRG3oegIrIh95U6VOstf9bJiiIpw3IfwSUgQWSEYM3VeEyrhHJ4rn3Ci0vuFqA==",
  "secondaryReadonlyMasterKey": "LpsCicpVZqHRy7qbMgrzbRKjbYCwCKPQRl0QpgReAOxMcggTvxJFA94fTi0oQ7xtxpftTJcXkjTirQ0pT7QFrQ=="
}

Copie el valor de primaryMasterKey. Esta información la necesitará en el siguiente paso.

Configuración de la cadena de conexión en la aplicación de ejemplo

En el repositorio local, en config/datastores.js, reemplace el contenido existente por el código siguiente y guarde los cambios.

module.exports.datastores = {
  default: {
    adapter: 'sails-mongo',
    url: process.env.MONGODB_URI,
    ssl: true,
  },
};

Se necesita la opción ssl: true porque Cosmos DB requiere TLS/SSL. url se establece en una variable de entorno, que especificará a continuación.

En el terminal, establezca la variable de entorno MONGODB_URI. Asegúrese de reemplazar los dos marcadores de posición <cosmosdb-name> por el nombre de la base de datos de Cosmos DB y el marcador de posición <cosmosdb-key> por la clave que copió en el paso anterior.

export MONGODB_URI=mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp

Prueba de la aplicación con MongoDB

En una ventana de terminal local, vuelva a ejecutar node app.js --alter.

node app.js --alter

Vaya de nuevo a http://localhost:1337. Si puede crear y ver elementos de tareas pendientes, la aplicación lee y escribe datos mediante la base de datos Cosmos DB en Azure.

En el terminal, detenga Node.js escribiendo Ctrl+C.

Implementación de la aplicación en Azure

En este paso, implementará la aplicación Node.js conectada a MongoDB en Azure App Service.

Configuración de un usuario de implementación

Se puede implementar FTP y Git local en una aplicación web de Azure mediante un usuario de implementación. Una vez configurado este usuario de implementación, podrá usarlo en todas las implementaciones de Azure. El nombre de usuario y la contraseña en el nivel de cuenta son diferentes de las credenciales de suscripción de Azure.

Para configurar el usuario de implementación, ejecute el comando az webapp deployment user set en Azure Cloud Shell. Reemplace <username> y <password> por un nombre de usuario y una contraseña de usuario de implementación.

• El nombre de usuario debe ser único dentro de Azure y no debe contener el símbolo "@" para las inserciones de Git local.
• La contraseña debe tener al menos ocho caracteres y dos de los tres elementos siguientes: letras, números y símbolos.

az webapp deployment user set --user-name <username> --password <password>

La salida JSON muestra la contraseña como null. Si se produce un error 'Conflict'. Details: 409, cambie el nombre de usuario. Si se produce un error 'Bad Request'. Details: 400, use una contraseña más segura.

Anote el nombre de usuario y la contraseña que se usarán para implementar las aplicaciones web.

Creación de un plan de App Service

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1

{ 
  "freeOfferExpirationTime": null,
  "geoRegion": "UK West",
  "hostingEnvironmentProfile": null,
  "hyperV": false,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "isSpot": false,
  "isXenon": false,
  "kind": "app",
  "location": "ukwest",
  "maximumElasticWorkerCount": 1,
  "maximumNumberOfWorkers": 0,
  < JSON data removed for brevity. >
} 

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux

{ 
  "freeOfferExpirationTime": null,
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "linux",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Creación de una aplicación web

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "clientCertExclusionPaths": null,
  "clientCertMode": "Required",
  "cloningInfo": null,
  "containerSize": 0,
  "customDomainVerificationId": "54184270DF7B3B4BF30221B6303E789C324E4783C8DF1FBAA3D111FC72328CE9",
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Configuración de una variable de entorno

Recuerde que la aplicación de ejemplo ya está configurada para usar la variable de entorno MONGODB_URI en config/datastores.js. En App Service, esta variable se inserta mediante una configuración de aplicación.

Para establecer la configuración de la aplicación, utilice el comando az webapp config appsettings set en Cloud Shell.

En el ejemplo siguiente se realiza una configuración de aplicación MONGODB_URI en la aplicación de Azure. De nuevo, reemplace los marcadores <app-name> , <cosmosdb-name> y <cosmosdb-key> .

az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings MONGODB_URI='mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp' DEPLOYMENT_BRANCH='main'

Inserción en Azure desde Git

1. Puesto que va a implementar la rama main, debe establecer la rama de implementación predeterminada para la aplicación de App Service en main (consulte Cambio de la rama de implementación). En Cloud Shell, establezca el valor de la aplicación DEPLOYMENT_BRANCH con el comando az webapp config appsettings set.

   az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings DEPLOYMENT_BRANCH='main'
   

2. En la ventana del terminal local, agregue una instancia remota de Azure al repositorio de Git local. Reemplace <deploymentLocalGitUrl-from-create-step> por la dirección URL del repositorio Git remoto que guardó en Creación de una aplicación web.

   git remote add azure <deploymentLocalGitUrl-from-create-step>
   

3. Realice la insercion en la instancia remota de Azure para implementar la aplicación con el comando siguiente. Cuando el Administrador de credenciales de Git le solicite las credenciales, asegúrese de que especifica las que creó en Configuración de un usuario de implementación, no las que se usan para iniciar sesión en Azure Portal.

   git push azure main
   

   Este comando puede tardar varios minutos en ejecutarse. Durante la ejecución, muestra información similar a la del ejemplo siguiente:

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 318 bytes | 318.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id '4eb0ca7190'.
remote: Generating deployment script.
remote: Running deployment command...
remote: Handling node.js deployment.
remote: Creating app_offline.htm
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Copying file: 'package.json'
remote: Deleting app_offline.htm
remote: Looking for app.js/server.js under site root.
remote: Using start-up script app.js
remote: Generated web.config.
.
.
.
remote: Deployment successful.
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
 * [new branch]      main -> main

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 347 bytes | 347.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Deploy Async
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'f776be774a'.
remote: Repository path is /home/site/repository
remote: Running oryx build...
remote: Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
remote: You can report issues at https://github.com/Microsoft/Oryx/issues
remote: 
remote: Oryx Version: 0.2.20210420.1, Commit: 85c6e9278aae3980b86cb1d520aaad532c814ed7, ReleaseTagName: 20210420.1
remote: 
remote: Build Operation ID: |qwejn9R4StI=.5e8a3529_
remote: Repository Commit : f776be774a3ea8abc48e5ee2b5132c037a636f73
.
.
.
remote: Deployment successful.
remote: Deployment Logs : 'https://<app-name>.scm.azurewebsites.net/newui/jsonviewer?view_url=/api/deployments/a6fcf811136739f145e0de3be82ff195bca7a68b/log'
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
   4f7e3ac..a6fcf81  main -> main

Navegación hasta la aplicación de Azure

Vaya a la aplicación implementada mediante el explorador web.

https://<app-name>.azurewebsites.net 

Si puede crear y ver elementos de tareas pendientes en el explorador, la aplicación de ejemplo de Azure tiene conectividad con la base de datos de MongoDB (Cosmos DB).

¡Enhorabuena! Está ejecutando una aplicación Node.js orientada a datos en Azure App Service.

Actualización del modelo de datos y nueva implementación

En este paso, se cambia el modelo de datos de Todo y se publica el cambio en Azure.

Actualización del modelo del lado servidor

En Sails.js, cambiar el modelo del lado servidor y el código de API es tan sencillo como cambiar el modelo de datos, porque Sails.js ya define las rutas comunes para un modelo de forma predeterminada.

En el repositorio local, abra api/models/Todo.js y agregue un atributo done. Cuando haya finalizado, su código de esquema tendrá este aspecto:

module.exports = {

  attributes: {
    value: {type: 'string'},
    done: {type: 'boolean', defaultsTo: false}
  },

};

Actualización del código de cliente

Hay tres archivos que debe modificar: el modelo de cliente, la plantilla HTML y el archivo de componente.

Abra client/src/app/todo.ts y agregue una propiedad done. Cuando haya terminado, el modelo debe tener este aspecto:

export class Todo {
    id!: String;
    value!: String;
    done!: Boolean;
}

Abra client/src/app/app.component.html. Justo encima del único elemento <span>, agregue el código siguiente para agregar una casilla al principio de cada elemento de tarea pendiente:

<input class="form-check-input me-2" type="checkbox" [checked]="todo.done" (click)="toggleDone(todo.id, i)" [disabled]="isProcessing">

Abra client/src/app/app.component.ts. Justo encima de la última llave de cierre (}), inserte el método siguiente. El código de plantilla anterior lo llama cuando se hace clic en la casilla y actualiza los datos del lado servidor.

toggleDone(id:any, i:any) {
  console.log("Toggled checkbox for " + id);
  this.isProcessing = true;
  this.Todos[i].done = !this.Todos[i].done;
  this.restService.updateTodo(id, this.Todos[i])
  .subscribe((res) => {
      console.log('Data updated successfully!');
      this.isProcessing = false;
    }, (err) => {
      console.log(err);
      this.Todos[i].done = !this.Todos[i].done;
  });
}

Prueba de los cambios localmente

En la ventana de terminal local, compile el código de cliente Angular con el script de compilación definido en package.json.

npm run build

Vuelva a probar los cambios con node app.js --alter. Puesto que ha cambiado el modelo del lado servidor, la marca --alter permite que Sails.js modifique la estructura de datos en la base de Cosmos DB.

node app.js --alter

Vaya a http://localhost:1337. Ahora debería ver una casilla delante del elemento de tarea pendiente. Al seleccionar o desactivar una casilla, se actualiza la base de datos de Cosmos DB en Azure para indicar que el elemento de tarea pendiente se ha realizado.

En el terminal, detenga Node.js escribiendo Ctrl+C.

Publicación de los cambios en Azure

En la ventana del terminal local, confirme los cambios en Git e inserte los cambios de código en Azure.

git commit -am "added done field"
git push azure main

Una vez que git push esté completo, vaya a la aplicación de Azure y pruebe la nueva funcionalidad.

Si agregó anteriormente artículos, aún puede verlos. Los datos existentes en Cosmos DB no se pierden. Además, se actualiza el esquema de datos y los datos existentes permanecen sin cambios.

Transmisión de registros de diagnóstico

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

az webapp log config --resource-group <resource-group-name> --name <app-name> --docker-container-logging filesystem --level Verbose

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

Administración de la aplicación de Azure

Vaya a Azure Portal para ver la aplicación que ha creado.

En el menú izquierdo, haga clic en App Services y, luego, en el nombre de la aplicación de Azure.

De manera predeterminada, el portal muestra la página Información general de la aplicación. Esta página proporciona una visión del funcionamiento de la aplicación. En este caso, también puede realizar tareas de administración básicas como examinar, detener, iniciar, reiniciar y eliminar. Las pestañas del lado izquierdo de la página muestran las diferentes páginas de configuración que puede abrir.

Limpieza de recursos

En los pasos anteriores, creó recursos de Azure en un grupo de recursos. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell:

az group delete --name myResourceGroup

Este comando puede tardar varios segundos en ejecutarse.

Pasos siguientes

¿Qué ha aprendido?

Pase al siguiente tutorial para aprender cómo asignar un nombre DNS personalizado a la aplicación.

O bien, eche un vistazo a otros recursos:

• Configuración de la aplicación Node.js
• Environment variables and app settings reference