Tutorial: Compilación de una aplicación Node.js y MongoDB en AzureTutorial: Build a Node.js and MongoDB app in Azure

Nota

En este artículo se implementa una aplicación en App Service en Windows.This article deploys an app to App Service on Windows. Para realizar implementaciones en App Service en Linux, consulte Compilación de una aplicación Node.js y MongoDB en Azure App Service en Linux.To deploy to App Service on Linux, see Build a Node.js and MongoDB app in Azure App Service on Linux.

Azure App Service proporciona un servicio de hospedaje web muy escalable y con aplicación de revisiones de un modo automático.Azure App Service provides a highly scalable, self-patching web hosting service. En este tutorial se muestra cómo crear una aplicación Node.js en App Service y conectarla a una base de datos de MongoDB.This tutorial shows how to create a Node.js app in App Service and connect it to a MongoDB database. Cuando haya terminado, tendrá una aplicación MEAN (MongoDB, Express, AngularJS y Node.js) que se ejecuta en Azure App Service.When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in Azure App Service. Por sencillez, la aplicación de ejemplo usa el marco web MEAN.js .For simplicity, the sample application uses the MEAN.js web framework.

Aplicación MEAN.js que se ejecuta en Azure App Service

Temas que se abordarán:What you'll learn:

  • Crear una base de datos MongoDB en AzureCreate a MongoDB database in Azure
  • Conectar una aplicación Node.js a MongoDBConnect a Node.js app to MongoDB
  • Implementación de la aplicación en AzureDeploy the app to Azure
  • Actualizar el modelo de datos y volver a implementar la aplicaciónUpdate the data model and redeploy the app
  • Transmitir registros de diagnóstico desde AzureStream diagnostic logs from Azure
  • Administrar la aplicación en Azure PortalManage the app in the Azure portal

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.If you don't have an Azure subscription, create a free account before you begin.

Requisitos previosPrerequisites

Para completar este tutorial:To complete this tutorial:

  1. Instalación de GitInstall Git
  2. Instalación de Node.js y NPMInstall Node.js and NPM
  3. Instale Bower (necesario para MEAN.js)Install Bower (required by MEAN.js)
  4. Instale Gulp.js (necesario para MEAN.js)Install Gulp.js (required by MEAN.js)
  5. Descarga y ejecución de MongoDB Community EditionInstall and run MongoDB Community Edition

Prueba de la base de datos MongoDB localTest local MongoDB

Abra la ventana de terminal y use cd para cambiar al directorio bin de la instalación de MongoDB.Open the terminal window and cd to the bin directory of your MongoDB installation. Esta ventana de terminal se puede usar para ejecutar todos los comandos de este tutorial.You can use this terminal window to run all the commands in this tutorial.

Ejecute mongo en el terminal para conectarse a su servidor local de MongoDB.Run mongo in the terminal to connect to your local MongoDB server.

mongo

Si la conexión se realiza correctamente, la base de datos de MongoDB estará ya funcionando.If your connection is successful, then your MongoDB database is already running. En caso contrario, asegúrese de que la base de datos de MongoDB local se inicia con los pasos descritos en Install MongoDB Community Edition (Instalación de MongoDB Community Edition).If not, make sure that your local MongoDB database is started by following the steps at Install MongoDB Community Edition. Con frecuencia, MongoDB ya estará instalado, pero aun así deberá iniciarlo ejecutando mongod.Often, MongoDB is installed, but you still need to start it by running mongod.

Cuando haya terminado de probar la base de datos de MongoDB, escriba Ctrl+C en el terminal.When you're done testing your MongoDB database, type Ctrl+C in the terminal.

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

En este paso, configurará el proyecto local de Node.js.In this step, you set up the local Node.js project.

Clonación de la aplicación de ejemploClone the sample application

En la ventana del terminal, use cd para cambiar a un directorio de trabajo.In the terminal window, cd to a working directory.

Ejecute el comando siguiente para clonar el repositorio de ejemplo.Run the following command to clone the sample repository.

git clone https://github.com/Azure-Samples/meanjs.git

Este repositorio de ejemplo contiene una copia del repositorio MEAN.js.This sample repository contains a copy of the MEAN.js repository. Se ha modificado para ejecutarse App Service (para más información, consulte el archivo LÉAME del repositorio MEAN.js).It is modified to run on App Service (for more information, see the MEAN.js repository README file).

Ejecución de la aplicaciónRun the application

Instale los comandos siguientes para instalar los paquetes necesarios e inicie la aplicación.Run the following commands to install the required packages and start the application.

cd meanjs
npm install
npm start

Cuando la aplicación se haya cargado completamente, verá algo similar al siguiente mensaje:When the app is fully loaded, you see something similar to the following message:

--
MEAN.JS - Development Environment

Environment:     development
Server:          http://0.0.0.0:3000
Database:        mongodb://localhost/mean-dev
App version:     0.5.0
MEAN.JS version: 0.5.0
--

Vaya a http://localhost:3000 en un explorador.Navigate to http://localhost:3000 in a browser. Haga clic en Registrarse en el menú superior y cree un usuario de prueba.Click Sign Up in the top menu and create a test user.

La aplicación de ejemplo MEAN.js almacena datos de usuario en la base de datos.The MEAN.js sample application stores user data in the database. Si crea un usuario e inicia sesión con él correctamente, la aplicación escribe datos en la base de datos de MongoDB local.If you are successful at creating a user and signing in, then your app is writing data to the local MongoDB database.

MEAN.js se conecta correctamente a MongoDB

Seleccione Admin (Administrador) > Manage Articles (Administrar artículos) para agregar algunos artículos.Select Admin > Manage Articles to add some articles.

Para detener Node.js en cualquier momento, presione Ctrl+C en el terminal.To stop Node.js at any time, press Ctrl+C in the terminal.

Nota

En la guía de inicio rápido de Node.js se menciona la necesidad de un archivo web.config en el directorio raíz de la aplicación.The Node.js quickstart mentions the need for a web.config in the root app directory. Sin embargo, en este tutorial, App Service generará este archivo automáticamente al implementar los archivos mediante la implementación de Git local, en lugar de la implementación de un archivo ZIP.However, in this tutorial, this web.config file will be automatically generated by App Service when you deploy your files using local Git deployment instead of ZIP file deployment.

Apertura de Azure Cloud ShellOpen Azure Cloud Shell

Azure Cloud Shell es un entorno de shell interactivo que se hospeda en Azure y se utiliza a través del explorador.Azure Cloud Shell is an interactive shell environment hosted in Azure and used through your browse. Azure Cloud Shell le permite usar los shell bash o PowerShell para ejecutar una variedad de herramientas para trabajar con los servicios de Azure.Azure Cloud Shell allows you to use either bash or PowerShell shells to run a variety of tools to work with Azure services. Azure Cloud Shell viene preinstalado con los comandos para permitirle ejecutar el contenido de este artículo sin tener que instalar nada en su entorno local.Azure Cloud Shell comes pre-installed with the commands to allow you to run the content of this article without having to install anything on your local environment.

Para ejecutar cualquier código contenido en este artículo en Azure Cloud Shell, abra una sesión de Cloud Shell, utilice el botón Copiar en un bloque de código para copiar el código y péguelo en la sesión de Cloud Shell con Ctrl+Mayús+V en Windows y Linux, o Cmd+Mayús+V en macOS.To run any code contained in this article on Azure Cloud Shell, open a Cloud Shell session, use the Copy button on a code block to copy the code, and paste it into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS. El texto pegado no se ejecuta automáticamente, así que presione ENTRAR para ejecutar el código.Pasted text is not automatically executed, so press Enter to run code.

Puede iniciar Azure Cloud Shell con:You can launch Azure Cloud Shell with:

Seleccione Probarlo en la esquina superior derecha de un bloque de código.Select Try It in the upper-right corner of a code block. Esto no copia automáticamente el texto en Cloud Shell.This doesn't automatically copy text to Cloud Shell. Ejemplo de Probarlo para Azure Cloud Shell
Abra shell.azure.com en el explorador.Open shell.azure.com in your browser. Botón Iniciar Cloud ShellLaunch Azure Cloud Shell button
Seleccione el botón Cloud Shell en el menú de la esquina superior derecha de Azure Portal.Select the Cloud Shell button on the menu in the upper-right corner of the Azure portal. Botón Cloud Shell en Azure Portal

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

En este paso, creará una base de datos MongoDB en Azure.In this step, you create a MongoDB database in Azure. Cuando la aplicación se implementa en Azure, utiliza esta base de datos en la nube.When your app is deployed to Azure, it uses this cloud database.

Para MongoDB, en este tutorial se usa Azure Cosmos DB.For MongoDB, this tutorial uses Azure Cosmos DB. Cosmos DB admite las conexiones del cliente de MongoDB.Cosmos DB supports MongoDB client connections.

Crear un grupo de recursosCreate a resource group

Un grupo de recursos es un contenedor lógico en el que se implementan y administran recursos de Azure como aplicaciones web, bases de datos y cuentas de almacenamiento.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Por ejemplo, más adelante puede elegir eliminar todo el grupo de recursos en un solo paso.For example, you can choose to delete the entire resource group in one simple step later.

En Cloud Shell, cree un grupo de recursos con el comando az group create.In the Cloud Shell, create a resource group with the az group create command. En el ejemplo siguiente, se crea un grupo de recursos denominado myResourceGroup en la ubicación Europa Occidental.The following example creates a resource group named myResourceGroup in the West Europe location. Para ver todas las ubicaciones que se admiten en App Service en el nivel Gratis, ejecute el comando az appservice list-locations --sku FREE.To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

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

Generalmente se crean el grupo de recursos y los recursos en una región cercana.You generally create your resource group and the resources in a region near you.

Cuando finaliza el comando, una salida de JSON muestra las propiedades del grupo de recursos.When the command finishes, a JSON output shows you the resource group properties.

Creación de una cuenta de Cosmos DBCreate a Cosmos DB account

Nota

Hay un costo por la creación de las bases de datos de Azure Cosmos DB en este tutorial en su propia suscripción de Azure.There is a cost to creating the Azure Cosmos DB databases in this tutorial in your own Azure subscription. Para usar una cuenta gratuita de Azure Cosmos DB durante siete días, puede usar la experiencia Pruebe gratis Azure Cosmos DB.To use a free Azure Cosmos DB account for seven days, you can use the Try Azure Cosmos DB for free experience. Simplemente haga clic en el botón Crear en el icono de MongoDB para crear una base de datos gratuita de MongoDB en Azure.Just click the Create button in the MongoDB tile to create a free MongoDB database on Azure. Una vez creada la base de datos, vaya a Cadena de conexión en el portal y recupere la cadena de conexión de Azure Cosmos DB para su uso posterior en el tutorial.Once the database is created, navigate to Connection String in the portal and retrieve your Azure Cosmos DB connection string for use later in the tutorial.

En Cloud Shell, cree una cuenta de Cosmos DB con el comando az cosmosdb create.In the Cloud Shell, create a Cosmos DB account with the az cosmosdb create command.

En el siguiente comando, sustituya un nombre único de Cosmos DB por el marcador de posición <cosmosdb_name>.In the following command, substitute a unique Cosmos DB name for the <cosmosdb_name> placeholder. 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.This name is used as the part of the Cosmos DB endpoint, https://<cosmosdb_name>.documents.azure.com/, so the name needs to be unique across all Cosmos DB accounts in Azure. El nombre debe contener solo letras minúsculas, números y el carácter de guión (-), y debe tener una longitud de entre 3 y 50 caracteres.The name must contain only lowercase letters, numbers, and the hyphen (-) character, and must be between 3 and 50 characters long.

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

El parámetro --kind MongoDB habilita las conexiones de cliente de MongoDB.The --kind MongoDB parameter enables MongoDB client connections.

Cuando se crea la cuenta de Cosmos DB, la CLI de Azure muestra información similar a la del ejemplo siguiente:When the Cosmos DB account is created, the Azure CLI shows information similar to the following example:

{
  "consistencyPolicy":
  {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "databaseAccountOfferType": "Standard",
  "documentEndpoint": "https://<cosmosdb_name>.documents.azure.com:443/",
  "failoverPolicies": 
  ...
  < Output truncated for readability >
}

Conexión de la aplicación a la base de datos MongoDB de producciónConnect app to production MongoDB

En este paso, conectará la aplicación de ejemplo MEAN.js a la base de datos Cosmos DB que acaba de crear mediante una cadena de conexión de MongoDB.In this step, you connect your MEAN.js sample application to the Cosmos DB database you just created, using a MongoDB connection string.

Recuperación de la clave de base de datosRetrieve the database key

Para conectarse a la base de datos Cosmos DB, necesita la clave de base de datos.To connect to the Cosmos DB database, you need the database key. En Cloud Shell, use el comando az cosmosdb list-keys para recuperar la clave principal.In the Cloud Shell, use the az cosmosdb list-keys command to retrieve the primary key.

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

La CLI de Azure muestra información similar a la del ejemplo siguiente:The Azure CLI shows information similar to the following example:

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

Copie el valor de primaryMasterKey. Esta información la necesitará en el siguiente paso.You need this information in the next step.

Configuración de la cadena de conexión en la aplicación Node.jsConfigure the connection string in your Node.js application

En la carpeta config/env/ del repositorio MEAN.js local, cree un archivo llamado local-production.js.In your local MEAN.js repository, in the config/env/ folder, create a file named local-production.js. De forma predeterminada, .gitignore está configurado para mantener este archivo fuera del repositorio.By default, .gitignore is configured to keep this file out of the repository.

Copie en él el código siguiente.Copy the following code into it. Asegúrese de reemplazar los dos marcadores de posición <cosmosdb_name> por el nombre de la base de datos Cosmos DB y de reemplazar el marcador de posición <primary_master_key> por la clave que copió en el paso anterior.Be sure to replace the two <cosmosdb_name> placeholders with your Cosmos DB database name, and replace the <primary_master_key> placeholder with the key you copied in the previous step.

module.exports = {
  db: {
    uri: 'mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false'
  }
};

La opción ssl=true se requiere porque Cosmos DB requiere SSL.The ssl=true option is required because Cosmos DB requires SSL.

Guarde los cambios.Save your changes.

Prueba de la aplicación en modo de producciónTest the application in production mode

Ejecute el siguiente comando para minimizar y agrupar scripts para el entorno de producción.Run the following command to minify and bundle scripts for the production environment. Este proceso genera los archivos que necesita dicho entorno.This process generates the files needed by the production environment.

gulp prod

Ejecute el siguiente comando para usar la cadena de conexión que configuró en config/env/local-production.js.Run the following command to use the connection string you configured in config/env/local-production.js.

# Bash
NODE_ENV=production node server.js

# Windows PowerShell
$env:NODE_ENV = "production" 
node server.js

NODE_ENV=production establece la variable de entorno que indica a Node.js que se ejecute en el entorno de producción.NODE_ENV=production sets the environment variable that tells Node.js to run in the production environment. node server.js inicia el servidor de Node.js con server.js en la raíz del repositorio.node server.js starts the Node.js server with server.js in your repository root. Así es como se carga la aplicación de Node.js en Azure.This is how your Node.js application is loaded in Azure.

Cuando se cargue la aplicación, compruebe que se ejecuta en el entorno de producción:When the app is loaded, check to make sure that it's running in the production environment:

--
MEAN.JS

Environment:     production
Server:          http://0.0.0.0:8443
Database:        mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false
App version:     0.5.0
MEAN.JS version: 0.5.0

Vaya a http://localhost:8443 en un explorador.Navigate to http://localhost:8443 in a browser. Haga clic en Registrarse en el menú superior y cree un usuario de prueba.Click Sign Up in the top menu and create a test user. Si crea un usuario e inicia sesión con él correctamente, la aplicación escribe datos en la base de datos de Cosmos DB en Azure.If you are successful creating a user and signing in, then your app is writing data to the Cosmos DB database in Azure.

En el terminal, detenga Node.js escribiendo Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Implementación de aplicación en AzureDeploy app to Azure

En este paso, implementará la aplicación Node.js conectada a MongoDB en Azure App Service.In this step, you deploy your MongoDB-connected Node.js application to Azure App Service.

Configuración de un usuario de implementaciónConfigure a deployment user

En Azure Cloud Shell, configure las credenciales de implementación con el comando az webapp deployment user set.In the Azure Cloud Shell, configure deployment credentials with the az webapp deployment user set command. Se requiere este usuario de implementación para la implementación de FTP y Git local en una aplicación web.This deployment user is required for FTP and local Git deployment to a web app. El nombre de usuario y la contraseña predeterminados están en el nivel de la cuenta.The username and password are account level. No son los mismos que los de las credenciales de suscripción de Azure.They're different from your Azure subscription credentials.

En el siguiente ejemplo, reemplace <username> y <password> (corchetes angulares incluidos) por un nuevo nombre de usuario y contraseña.In the following example, replace <username> and <password>, including the brackets, with a new username and password. El nombre de usuario debe ser único en Azure.The username must be unique within Azure. La contraseña debe tener al menos ocho caracteres y dos de los tres elementos siguientes: letras, números y símbolos.The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.

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

Se obtiene una salida de JSON y la contraseña mostrada como null.You get a JSON output with the password shown as null. Si se produce un error 'Conflict'. Details: 409, cambie el nombre de usuario.If you get a 'Conflict'. Details: 409 error, change the username. Si se produce un error 'Bad Request'. Details: 400, use una contraseña más segura.If you get a 'Bad Request'. Details: 400 error, use a stronger password. El nombre de usuario de la implementación no debe contener el símbolo ' @' en las inserciones de Git locales.The deployment username must not contain ‘@’ symbol for local Git pushes.

Este usuario de implementación se configura una sola vez.You configure this deployment user only once. Puede usarlo para todas las implementaciones de Azure.You can use it for all your Azure deployments.

Nota

Grabe el nombre de usuario y la contraseña.Record the username and password. Los va a necesitar para implementar la aplicación web más adelante.You need them to deploy the web app later.

Creación de un plan de App ServiceCreate an App Service plan

En Cloud Shell, cree un plan de App Service con el comando az appservice plan create.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

En el siguiente ejemplo se crea un plan de App Service denominado myAppServicePlan con el plan de tarifa Gratis:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

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

Cuando se ha creado el plan de App Service, la CLI de Azure muestra información similar al ejemplo siguiente:When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "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 webCreate a web app

Cree una aplicación web en el plan de App Service de myAppServicePlan.Create a web app in the myAppServicePlan App Service plan.

En Cloud Shell, puede usar el comando az webapp create.In the Cloud Shell, you can use the az webapp create command. En el siguiente ejemplo, reemplace <app-name> por un nombre único global de aplicación (los caracteres válidos son a-z, 0-9 y -).In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). El tiempo de ejecución se establece en NODE|6.9.The runtime is set to NODE|6.9. Para ver todos los entornos en tiempo de ejecución admitidos, ejecute az webapp list-runtimes.To see all supported runtimes, run az webapp list-runtimes.

# Bash
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git
# PowerShell
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git

Cuando se haya creado la aplicación web, la CLI de Azure mostrará información similar a la del ejemplo siguiente:When the web app has been created, the Azure CLI shows output similar to the following example:

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

Ha creado una aplicación web vacía, con la implementación de Git habilitada.You’ve created an empty web app, with git deployment enabled.

Nota

La dirección URL del repositorio de Git remoto se muestra en la propiedad deploymentLocalGitUrl, con el formato https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git.The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. Guarde esta dirección URL, ya que la necesitará más adelante.Save this URL as you need it later.

Configuración de una variable de entornoConfigure an environment variable

De forma predeterminada, el proyecto MEAN.js mantiene config/env/local-production.js fuera del repositorio de Git.By default, the MEAN.js project keeps config/env/local-production.js out of the Git repository. Por lo tanto, para su aplicación de Azure, use la configuración de aplicación para definir la cadena de conexión de MongoDB.So for your Azure app, you use app settings to define your MongoDB connection string.

Para establecer la configuración de la aplicación, utilice el comando az webapp config appsettings set en Cloud Shell.To set app settings, use the az webapp config appsettings set command in the Cloud Shell.

En el ejemplo siguiente se configura una configuración de aplicación MONGODB_URI en la aplicación de Azure.The following example configures a MONGODB_URI app setting in your Azure app. Reemplace los marcadores de posición <app_name >, <cosmosdb_name > y <primary_master_key >.Replace the <app_name>, <cosmosdb_name>, and <primary_master_key> placeholders.

az webapp config appsettings set --name <app_name> --resource-group myResourceGroup --settings MONGODB_URI="mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.com:10250/mean?ssl=true"

En el código de Node.js, accederá a este valor de aplicación con process.env.MONGODB_URI, al igual que accedería a cualquier variable de entorno.In Node.js code, you access this app setting with process.env.MONGODB_URI, just like you would access any environment variable.

En el repositorio MEAN.js local, abra config/env/production.js (no config/env/local-production.js), que tiene la configuración específica para el entorno de producción.In your local MEAN.js repository, open config/env/production.js (not config/env/local-production.js), which has production-environment specific configuration. La aplicación MEAN.js predeterminada ya está configurada para usar la variable de entorno MONGODB_URI que ha creado.The default MEAN.js app is already configured to use the MONGODB_URI environment variable that you created.

db: {
  uri: ... || process.env.MONGODB_URI || ...,
  ...
},

Inserción en Azure desde GitPush to Azure from Git

En la ventana del terminal local, agregue una instancia remota de Azure al repositorio de Git local.Back in the local terminal window, add an Azure remote to your local Git repository. Reemplace <deploymentLocalGitUrl-from-create-step> por la dirección URL del repositorio de Git remoto que guardó en Creación de una aplicación web.Replace <deploymentLocalGitUrl-from-create-step> with the URL of the Git remote that you saved from Create a web app.

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

Inserte en la instancia remota de Azure para implementar la aplicación con el comando siguiente.Push to the Azure remote to deploy your app with the following command. Cuando el Administrador de credenciales de Git le solicite las credenciales, asegúrese de que especifica las credenciales que creó en Configuración de un usuario de implementación, no las que usó para iniciar sesión en Azure Portal.When prompted for credentials by Git Credential Manager, make sure that you enter the credentials you created in Configure a deployment user, not the credentials you use to sign in to the Azure portal.

git push azure master

Este comando puede tardar varios minutos en ejecutarse.This command may take a few minutes to run. Durante la ejecución, muestra información similar a la del ejemplo siguiente:While running, it displays information similar to the following example:

Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 489 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '6c7c716eee'.
remote: Running custom deployment command...
remote: Running deployment command...
remote: Handling node.js deployment.
.
.
.
remote: Deployment successful.
To https://<app_name>.scm.azurewebsites.net/<app_name>.git
 * [new branch]      master -> master

Puede observar que el proceso de implementación ejecuta Gulp después de npm install.You may notice that the deployment process runs Gulp after npm install. App Service no ejecuta tareas Gulp o Grunt durante la implementación, así que este repositorio de ejemplo tiene dos archivos adicionales en su directorio raíz para permitirlo:App Service does not run Gulp or Grunt tasks during deployment, so this sample repository has two additional files in its root directory to enable it:

  • .deployment: este archivo indica a App Service que ejecute bash deploy.sh como script de implementación personalizado..deployment - This file tells App Service to run bash deploy.sh as the custom deployment script.
  • deploy.sh: se trata del script de implementación personalizado.deploy.sh - The custom deployment script. Si revisa el archivo, verá que se ejecuta gulp prod después de npm install y bower install.If you review the file, you will see that it runs gulp prod after npm install and bower install.

Puede usar este enfoque para agregar cualquier paso a la implementación basada en Git.You can use this approach to add any step to your Git-based deployment. Si reinicia la aplicación de Azure en cualquier momento, App Service no vuelve a ejecutar estas tareas de automatización.If you restart your Azure app at any point, App Service doesn't rerun these automation tasks.

Navegación hasta la aplicación de AzureBrowse to the Azure app

Vaya a la aplicación implementada mediante el explorador web.Browse to the deployed app using your web browser.

http://<app_name>.azurewebsites.net 

Haga clic en Registrarse en el menú superior y cree un usuario ficticio.Click Sign Up in the top menu and create a dummy user.

Si se realiza correctamente y la aplicación inicia automáticamente la sesión del usuario creado, la aplicación MEAN.js de Azure tiene conectividad con la base de datos de MongoDB (Cosmos DB).If you are successful and the app automatically signs in to the created user, then your MEAN.js app in Azure has connectivity to the MongoDB (Cosmos DB) database.

Aplicación MEAN.js que se ejecuta en Azure App Service

Seleccione Admin (Administrador) > Manage Articles (Administrar artículos) para agregar algunos artículos.Select Admin > Manage Articles to add some articles.

¡Enhorabuena!Congratulations! Está ejecutando una aplicación Node.js orientada a datos en Azure App Service.You're running a data-driven Node.js app in Azure App Service.

Actualización del modelo de datos y nueva implementaciónUpdate data model and redeploy

En este paso, se cambia el modelo de datos de article y se publica el cambio en Azure.In this step, you change the article data model and publish your change to Azure.

Actualización del modelo de datosUpdate the data model

Abra modules/articles/server/models/article.server.model.js.Open modules/articles/server/models/article.server.model.js.

En ArticleSchema, agregue un tipo String llamado comment.In ArticleSchema, add a String type called comment. Cuando haya finalizado, su código de esquema tendrá este aspecto:When you're done, your schema code should look like this:

const ArticleSchema = new Schema({
  ...,
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  },
  comment: {
    type: String,
    default: '',
    trim: true
  }
});

Actualización del código de artículosUpdate the articles code

Actualice el resto del código de articles para usar comment.Update the rest of your articles code to use comment.

Hay cinco archivos que es necesario modificar: el controlador del servidor y las cuatro vistas del cliente.There are five files you need to modify: the server controller and the four client views.

Abra modules/articles/server/controllers/articles.server.controller.js.Open modules/articles/server/controllers/articles.server.controller.js.

En la función update, agregue una asignación para article.comment.In the update function, add an assignment for article.comment. El código siguiente muestra la función update completada:The following code shows the completed update function:

exports.update = function (req, res) {
  let article = req.article;

  article.title = req.body.title;
  article.content = req.body.content;
  article.comment = req.body.comment;

  ...
};

Abra modules/articles/client/views/view-article.client.view.html.Open modules/articles/client/views/view-article.client.view.html.

Justo antes de la etiqueta </section> de cierre, agregue la línea siguiente para mostrar comment junto con el resto de los datos de artículo:Just above the closing </section> tag, add the following line to display comment along with the rest of the article data:

<p class="lead" ng-bind="vm.article.comment"></p>

Abra modules/articles/client/views/list-articles.client.view.html.Open modules/articles/client/views/list-articles.client.view.html.

Justo antes de la etiqueta </a> de cierre, agregue la línea siguiente para mostrar comment junto con el resto de los datos de artículo:Just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" ng-bind="article.comment"></p>

Abra modules/articles/client/views/admin/list-articles.client.view.html.Open modules/articles/client/views/admin/list-articles.client.view.html.

Dentro del elemento <div class="list-group"> e inmediatamente encima de la etiqueta </a> de cierre, agregue la siguiente línea para mostrar comment junto con el resto de los datos de artículo:Inside the <div class="list-group"> element and just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" data-ng-bind="article.comment"></p>

Abra modules/articles/client/views/admin/form-article.client.view.html.Open modules/articles/client/views/admin/form-article.client.view.html.

Busque el elemento <div class="form-group"> que contiene el botón de envío, que es similar a este:Find the <div class="form-group"> element that contains the submit button, which looks like this:

<div class="form-group">
  <button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
</div>

Inmediatamente encima de esta etiqueta, agregue otro elemento <div class="form-group"> que permita a los usuarios editar el campo comment.Just above this tag, add another <div class="form-group"> element that lets people edit the comment field. El nuevo elemento debe ser como este:Your new element should look like this:

<div class="form-group">
  <label class="control-label" for="comment">Comment</label>
  <textarea name="comment" data-ng-model="vm.article.comment" id="comment" class="form-control" cols="30" rows="10" placeholder="Comment"></textarea>
</div>

Prueba de los cambios localmenteTest your changes locally

Guarde todos los cambios.Save all your changes.

En la ventana de terminal local, pruebe de nuevo los cambios en el modo de producción.In the local terminal window, test your changes in production mode again.

# Bash
gulp prod
NODE_ENV=production node server.js

# Windows PowerShell
gulp prod
$env:NODE_ENV = "production" 
node server.js

Vaya a http://localhost:8443 en un explorador y asegúrese de que ha iniciado sesión.Navigate to http://localhost:8443 in a browser and make sure that you're signed in.

Seleccione Admin (Administrador) > Manage Articles (Administrar artículos) y luego haga clic en el botón + para agregar un artículo.Select Admin > Manage Articles, then add an article by selecting the + button.

Ahora verá el nuevo cuadro de texto Comment.You see the new Comment textbox now.

Campo de comentario agregado a los artículos

En el terminal, detenga Node.js escribiendo Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Publicación de los cambios en AzurePublish changes to Azure

En la ventana del terminal local, confirme los cambios en Git e inserte los cambios de código en Azure.In the local terminal window, commit your changes in Git, then push the code changes to Azure.

git commit -am "added article comment"
git push azure master

Una vez que git push esté completo, vaya a la aplicación de Azure y pruebe la nueva funcionalidad.Once the git push is complete, navigate to your Azure app and try out the new functionality.

Modelo y cambios en la base de datos publicados en Azure

Si agregó anteriormente artículos, aún puede verlos.If you added any articles earlier, you still can see them. Los datos existentes en Cosmos DB no se pierden.Existing data in your Cosmos DB is not lost. Además, se actualiza el esquema de datos y los datos existentes permanecen sin cambios.Also, your updates to the data schema and leaves your existing data intact.

Transmisión de registros de diagnósticoStream diagnostic logs

Mientras se ejecuta la aplicación de Node.js en Azure App Service, los registros de la consola se canalizan a su terminal.While your Node.js application runs in Azure App Service, you can get the console logs piped to your terminal. De este modo, puede obtener los mismos mensajes de diagnóstico para ayudarle a depurar errores de la aplicación.That way, you can get the same diagnostic messages to help you debug application errors.

Para iniciar la transmisión del registro, use el comando az webapp log tail en Cloud Shell.To start log streaming, use the az webapp log tail command in the Cloud Shell.

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

Cuando se inicie la secuencia de registro, actualice la aplicación de Azure en el explorador para obtener algún tráfico web.Once log streaming has started, refresh your Azure app in the browser to get some web traffic. Ahora verá los registros de la consola canalizados a su terminal.You now see console logs piped to your terminal.

Para detener las secuencias de registro en cualquier momento, escriba Ctrl+C.Stop log streaming at any time by typing Ctrl+C.

Administración de la aplicación de AzureManage your Azure app

Vaya a Azure Portal para ver la aplicación que ha creado.Go to the Azure portal to see the app you created.

En el menú izquierdo, haga clic en App Services y, luego, en el nombre de la aplicación de Azure.From the left menu, click App Services, then click the name of your Azure app.

Navegación en el portal a la aplicación de Azure

De manera predeterminada, el portal muestra la página Información general de la aplicación.By default, the portal shows your app's Overview page. Esta página proporciona una visión del funcionamiento de la aplicación.This page gives you a view of how your app is doing. En este caso, también puede realizar tareas de administración básicas como examinar, detener, iniciar, reiniciar y eliminar.Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. Las pestañas del lado izquierdo de la página muestran las diferentes páginas de configuración que puede abrir.The tabs on the left side of the page show the different configuration pages you can open.

Página de App Service en Azure Portal

Limpieza de recursosClean up resources

En los pasos anteriores, creó recursos de Azure en un grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

Este comando puede tardar varios segundos en ejecutarse.This command may take a minute to run.

Pasos siguientesNext steps

¿Qué ha aprendido?What you learned:

  • Crear una base de datos MongoDB en AzureCreate a MongoDB database in Azure
  • Conectar una aplicación Node.js a MongoDBConnect a Node.js app to MongoDB
  • Implementación de la aplicación en AzureDeploy the app to Azure
  • Actualizar el modelo de datos y volver a implementar la aplicaciónUpdate the data model and redeploy the app
  • Transmitir registros desde Azure a un terminalStream logs from Azure to your terminal
  • Administrar la aplicación en Azure PortalManage the app in the Azure portal

Pase al siguiente tutorial para aprender cómo asignar un nombre DNS personalizado a la aplicación.Advance to the next tutorial to learn how to map a custom DNS name to the app.