Didacticiel : Créer une application Node.js et MongoDB dans AzureTutorial: Build a Node.js and MongoDB app in Azure

Notes

Cet article explique comment déployer une application sur App Service sous Windows.This article deploys an app to App Service on Windows. Pour déployer une application App Service sur Linux, consultez Créer une application Node.js et MongoDB dans Azure App Service sur 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 offre un service d’hébergement web hautement scalable appliquant des mises à jour correctives automatiques.Azure App Service provides a highly scalable, self-patching web hosting service. Ce tutoriel montre comment créer une application Node.js dans App Service et comment la connecter à une base de données MongoDB.This tutorial shows how to create a Node.js app in App Service and connect it to a MongoDB database. Lorsque vous aurez terminé, vous disposerez d’une application MEAN (MongoDB, Express, AngularJS et Node.js) exécutée sous Azure App Service.When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in Azure App Service. Pour plus de simplicité, l’exemple d’application utilise l’infrastructure de développement web MEAN.js.For simplicity, the sample application uses the MEAN.js web framework.

Application MEAN.js exécutée dans Azure App Service

Ce que vous allez apprendre :What you'll learn:

  • Créer une base de données MongoDB dans AzureCreate a MongoDB database in Azure
  • Connecter une application Node.js à MongoDBConnect a Node.js app to MongoDB
  • Déploiement de l’application dans AzureDeploy the app to Azure
  • Mise à jour du modèle de données et redéploiement de l’applicationUpdate the data model and redeploy the app
  • Diffusion des journaux de diagnostic à partir d’AzureStream diagnostic logs from Azure
  • Gérer l’application dans le portail AzureManage the app in the Azure portal

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.If you don't have an Azure subscription, create a free account before you begin.

PrérequisPrerequisites

Pour suivre ce tutoriel :To complete this tutorial:

  1. Installez GitInstall Git
  2. Installez Node.js et NPMInstall Node.js and NPM
  3. Installer Bower (requis par MEAN.js)Install Bower (required by MEAN.js)
  4. Installer Gulp.js (requis par MEAN.js)Install Gulp.js (required by MEAN.js)
  5. Installez et exécutez MongoDB Community EditionInstall and run MongoDB Community Edition

Tester la base de données MongoDB localeTest local MongoDB

Ouvrez la fenêtre du terminal et cd dans le répertoire bin de votre installation MongoDB.Open the terminal window and cd to the bin directory of your MongoDB installation. Vous pouvez utilisez cette fenêtre de terminal pour exécuter toutes les commandes de ce didacticiel.You can use this terminal window to run all the commands in this tutorial.

Exécutez mongo dans le terminal pour vous connecter à votre serveur MongoDB local.Run mongo in the terminal to connect to your local MongoDB server.

mongo

Si la connexion est établie, cela signifie que votre base de données MongoDB est déjà en cours d’exécution.If your connection is successful, then your MongoDB database is already running. Dans le cas contraire, assurez-vous que votre base de données MongoDB locale est démarrée en suivant les étapes de la procédure d’installation de MongoDB Community Edition.If not, make sure that your local MongoDB database is started by following the steps at Install MongoDB Community Edition. Souvent, MongoDB est installé, mais vous devez néanmoins le démarrer en exécutant mongod.Often, MongoDB is installed, but you still need to start it by running mongod.

Lorsque vous avez fini de tester votre base de données MongoDB, tapez Ctrl+C dans le terminal.When you're done testing your MongoDB database, type Ctrl+C in the terminal.

Créer une application Node.js localeCreate local Node.js app

Cette étape consiste à configurer le projet Node.js local.In this step, you set up the local Node.js project.

Clonage de l’exemple d’applicationClone the sample application

Dans la fenêtre de terminal, cd vers un répertoire de travail.In the terminal window, cd to a working directory.

Exécutez la commande suivante pour cloner l’exemple de référentiel :Run the following command to clone the sample repository.

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

Cet exemple de référentiel contient une copie du référentiel MEAN.js.This sample repository contains a copy of the MEAN.js repository. Il est modifié pour s’exécuter sous App Service (pour plus d’informations, consultez le fichier Lisez-moi du référentiel MEAN.js).It is modified to run on App Service (for more information, see the MEAN.js repository README file).

Exécution de l'applicationRun the application

Exécutez la commande suivante pour installer les packages requis et démarrer l’application.Run the following commands to install the required packages and start the application.

cd meanjs
npm install
npm start

Lorsque l’application est entièrement chargée, vous obtenez un message similaire à celui-ci :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
--

Dans un navigateur, accédez à http://localhost:3000.Navigate to http://localhost:3000 in a browser. Cliquez sur S’inscrire dans le menu supérieur et créez un utilisateur test.Click Sign Up in the top menu and create a test user.

L’exemple d’application MEAN.js stocke les données utilisateur dans la base de données.The MEAN.js sample application stores user data in the database. Si vous parvenez à créer un utilisateur et à vous connecter, votre application écrit les données dans la base de données MongoDB locale.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 connecte correctement à MongoDB

Sélectionnez Admin > Manage Articles (Administrateur > Gérer les articles) pour ajouter des articles.Select Admin > Manage Articles to add some articles.

Pour arrêter Node.js à tout moment, appuyez sur Ctrl+C dans le terminal.To stop Node.js at any time, press Ctrl+C in the terminal.

Notes

Le guide de démarrage rapide Node.js mentionne la nécessité d’un fichier web.config au sein du répertoire racine de l’application.The Node.js quickstart mentions the need for a web.config in the root app directory. Toutefois, dans ce didacticiel, ce fichier web.config sera automatiquement généré par App Service lorsque vous déployez vos fichiers à l’aide du déploiement Git local au lieu du déploiement de fichier 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.

Utiliser Azure Cloud ShellUse Azure Cloud Shell

Azure héberge Azure Cloud Shell, un environnement d’interpréteur de commandes interactif que vous pouvez utiliser dans votre navigateur.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell vous permet d’utiliser bash ou PowerShell pour travailler avec les services Azure.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Vous pouvez utiliser les commandes préinstallées Cloud Shell pour exécuter le code de cet article sans avoir à installer quoi que ce soit dans votre environnement local.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Pour lancer Azure Cloud Shell :To launch Azure Cloud Shell:

OptionOption Exemple/LienExample/Link
Sélectionnez Essayer dans le coin supérieur droit d’un bloc de code.Select Try It in the upper-right corner of a code block. La sélection de Essayer ne copie pas automatiquement le code dans Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemple Essayer pour Azure Cloud Shell
Accédez à https://shell.azure.com ou sélectionnez le bouton Lancer Cloud Shell pour ouvrir Cloud Shell dans votre navigateur.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Lancer Cloud Shell dans une nouvelle fenêtreLaunch Cloud Shell in a new window
Sélectionnez le bouton Cloud Shell dans la barre de menus en haut à droite du portail Azure.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Bouton Cloud Shell du portail Azure

Pour exécuter le code de cet article dans Azure Cloud Shell :To run the code in this article in Azure Cloud Shell:

  1. Lancez Cloud Shell.Launch Cloud Shell.
  2. Sélectionnez le bouton Copier dans un bloc de code pour copier le code.Select the Copy button on a code block to copy the code.
  3. Collez le code dans la session Cloud Shell avec Ctrl+Maj+V sur Windows et Linux, ou Cmd+ Maj+V sur macOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Appuyez sur Entrée pour exécuter le code.Press Enter to run the code.

Créer une base de données MongoDB de productionCreate production MongoDB

Dans cette étape, vous allez créer une base de données MongoDB dans Azure.In this step, you create a MongoDB database in Azure. Lorsque votre application est déployée sur Azure, elle utilise cette base de données cloud.When your app is deployed to Azure, it uses this cloud database.

Pour MongoDB, ce didacticiel utilise Azure Cosmos DB.For MongoDB, this tutorial uses Azure Cosmos DB. Cosmos DB prend en charge les connexions client MongoDB.Cosmos DB supports MongoDB client connections.

Créer un groupe de ressourcesCreate a resource group

Un groupe de ressources est un conteneur logique dans lequel les ressources Azure comme les applications web, les bases de données et les comptes de stockage sont déployés et gérés.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Par exemple, vous pouvez choisir de supprimer le groupe de ressources complet ultérieurement en une seule étape.For example, you can choose to delete the entire resource group in one simple step later.

Dans Cloud Shell, créez un groupe de ressources avec la commande az group create.In the Cloud Shell, create a resource group with the az group create command. L’exemple suivant crée un groupe de ressources nommé myResourceGroup à l’emplacement Europe Ouest.The following example creates a resource group named myResourceGroup in the West Europe location. Pour afficher tous les emplacements pris en charge pour App Service au niveau Gratuit, exécutez la commande 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"

Vous créez généralement votre groupe de ressources et les ressources dans une région proche de chez vous.You generally create your resource group and the resources in a region near you.

Une fois la commande terminée, une sortie JSON affiche les propriétés du groupe de ressources.When the command finishes, a JSON output shows you the resource group properties.

Création d’un compte Cosmos DBCreate a Cosmos DB account

Notes

La création de bases de données Azure Cosmos DB dans votre propre abonnement Azure au cours de ce didacticiel peut entraîner un coût.There is a cost to creating the Azure Cosmos DB databases in this tutorial in your own Azure subscription. Pour utiliser un compte Azure Cosmos DB gratuit pendant sept jours, vous pouvez utiliser l’expérience Essayez gratuitement 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. Cliquez simplement sur le bouton Créer dans la vignette MongoDB pour créer une base de données MongoDB gratuite sur Azure.Just click the Create button in the MongoDB tile to create a free MongoDB database on Azure. Une fois la base de données créée, accédez à la Chaîne de connexion dans le portail et récupérez votre chaîne de connexion Azure Cosmos DB que vous utiliserez plus loin dans le didacticiel.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.

Dans Cloud Shell, créez un compte Cosmos DB à l’aide de la commande az cosmosdb create.In the Cloud Shell, create a Cosmos DB account with the az cosmosdb create command.

Dans la commande suivante, remplacez l’espace réservé <nom_cosmosdb> par un nom unique Cosmos DB.In the following command, substitute a unique Cosmos DB name for the <cosmosdb_name> placeholder. Ce nom est utilisé en tant que point de terminaison Cosmos DB, https://<cosmosdb_name>.documents.azure.com/. Pour cette raison, le nom doit être unique sur l’ensemble des comptes Cosmos DB dans 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. Le nom ne peut contenir que des minuscules, des chiffres, le tiret -) et doit compter entre 3 et 50 caractères.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

Le paramètre --kind MongoDB prend en charge les connexions clientes MongoDB.The --kind MongoDB parameter enables MongoDB client connections.

Une fois le compte Cosmos DB créé, Azure CLI affiche des informations similaires à celles de l’exemple suivant :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 >
}

Connecter l’application à la production MongoDBConnect app to production MongoDB

Pendant cette étape, vous connectez votre exemple d’application MEAN.js à la base de données Cosmos DB que vous venez de créer, en utilisant une chaîne de connexion MongoDB.In this step, you connect your MEAN.js sample application to the Cosmos DB database you just created, using a MongoDB connection string.

Récupérer la clé de la base de donnéesRetrieve the database key

Pour se connecter à la base de données Cosmos DB, vous avez besoin de la clé de la base de données.To connect to the Cosmos DB database, you need the database key. Dans Cloud Shell, utilisez la commande az cosmosdb list-keys pour récupérer la clé primaire.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

L’interface de ligne de commande Azure montre des informations semblables à ce qui suit :The Azure CLI shows information similar to the following example:

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

Copiez la valeur de primaryMasterKey. Vous aurez besoin de ces informations dans l’étape suivante.You need this information in the next step.

Configurer la chaîne de connexion dans votre application Node.jsConfigure the connection string in your Node.js application

Dans votre référentiel MEAN.js local, dans le dossier config/env/ , créez un fichier nommé local-production.js.In your local MEAN.js repository, in the config/env/ folder, create a file named local-production.js. Par défaut, .gitignore est configuré pour conserver ce fichier en dehors du référentiel.By default, .gitignore is configured to keep this file out of the repository.

Copiez-y le code ci-après.Copy the following code into it. Veillez à remplacer les deux espaces réservés <nom_cosmosdb> par le nom de votre base de données Cosmos DB, et remplacez l’espace réservé <clé_primaire_principale> par la clé que vous avez copiée à l’étape précédente.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'
  }
};

L’option ssl=true est requise, car Cosmos DB nécessite SSL.The ssl=true option is required because Cosmos DB requires SSL.

Enregistrez vos modifications.Save your changes.

Tester l’application en mode de productionTest the application in production mode

Exécutez la commande suivante pour réduire et regrouper des scripts pour l’environnement de production.Run the following command to minify and bundle scripts for the production environment. Ce processus génère les fichiers nécessaires à l’environnement de production.This process generates the files needed by the production environment.

gulp prod

Exécutez la commande suivante pour utiliser la chaîne de connexion que vous avez configurée dans 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 définit la variable d’environnement qui indique à Node.js de s’exécuter dans l’environnement de production.NODE_ENV=production sets the environment variable that tells Node.js to run in the production environment. node server.js démarre le serveur Node.js avec server.js à la racine du référentiel.node server.js starts the Node.js server with server.js in your repository root. Voici comment est chargée votre application Node.js dans Azure.This is how your Node.js application is loaded in Azure.

Lorsque l’application est chargée, assurez-vous qu’elle s’exécute dans l’environnement de production :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

Dans un navigateur, accédez à http://localhost:8443.Navigate to http://localhost:8443 in a browser. Cliquez sur S’inscrire dans le menu supérieur et créez un utilisateur test.Click Sign Up in the top menu and create a test user. Si vous parvenez à créer un utilisateur et à vous connecter, votre application écrit les données dans la base de données Cosmo DB dans Azure.If you are successful creating a user and signing in, then your app is writing data to the Cosmos DB database in Azure.

Dans le terminal, arrêtez Node.js en tapant Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Déployer des applications dans AzureDeploy app to Azure

Dans cette étape, vous allez déployer dans Azure App Service votre application Node.js connectée à MongoDB.In this step, you deploy your MongoDB-connected Node.js application to Azure App Service.

Configuration d’un utilisateur de déploiementConfigure a deployment user

Vous pouvez déployer le protocole FTP et Git local sur une application web Azure en faisant appel à un utilisateur de déploiement.FTP and local Git can deploy to an Azure web app by using a deployment user. Une fois que vous avez créé votre utilisateur de déploiement, vous pouvez l’utiliser pour tous vos déploiements Azure.Once you configure your deployment user, you can use it for all your Azure deployments. Votre nom d’utilisateur et votre mot de passe de déploiement au niveau du compte sont différents de vos informations d’identification de l’abonnement Azure.Your account-level deployment username and password are different from your Azure subscription credentials.

Pour configurer l’utilisateur de déploiement, exécutez la commande az webapp deployment user set dans Azure Cloud Shell.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Remplacez <username> et <password> par un nom d’utilisateur et un mot de passe de déploiement.Replace <username> and <password> with a deployment user username and password.

  • Le nom d’utilisateur doit être unique dans Azure et, pour les push Git locaux, ne doit pas contenir le symbole « @ ».The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Le mot de passe doit comporter au moins huit caractères et inclure deux des trois éléments suivants : lettres, chiffres et symboles.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>

La sortie JSON affiche le mot de passe comme étant null.The JSON output shows the password as null. Si vous obtenez une erreur 'Conflict'. Details: 409, modifiez le nom d’utilisateur.If you get a 'Conflict'. Details: 409 error, change the username. Si vous obtenez une erreur 'Bad Request'. Details: 400, utilisez un mot de passe plus fort.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Enregistrez le nom d’utilisateur et le mot de passe à utiliser pour déployer vos applications web.Record your username and password to use to deploy your web apps.

Créer un plan App ServiceCreate an App Service plan

Dans Cloud Shell, créez un plan App Service avec la commande az appservice plan create.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

L’exemple suivant crée un plan App Service nommé myAppServicePlan dans le niveau tarifaire Gratuit :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

Lorsque le plan App Service est créé, l’interface Azure CLI affiche des informations similaires à l’exemple suivant :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
} 

Créer une application webCreate a web app

Créer une application web dans le plan App Service myAppServicePlan.Create a web app in the myAppServicePlan App Service plan.

Dans Cloud Shell, vous pouvez utiliser la commande az webapp create.In the Cloud Shell, you can use the az webapp create command. Dans l’exemple suivant, remplacez <app-name> par un nom d’application unique (les caractères autorisés sont a-z, 0-9 et -).In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). Le runtime est défini sur NODE|6.9.The runtime is set to NODE|6.9. Pour voir tous les runtimes, exécutez 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

Une fois l’application web créée, Azure CLI affiche une sortie similaire à l’exemple suivant :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. >
}

Vous avez créé une application web vide, avec le déploiement Git activé.You’ve created an empty web app, with git deployment enabled.

Notes

L’URL du Git distant est indiquée dans la propriété deploymentLocalGitUrl, avec le format 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. Enregistrez cette URL, car vous en aurez besoin ultérieurement.Save this URL as you need it later.

Configurer une variable d’environnementConfigure an environment variable

Par défaut, le projet MEAN.js conserve config/env/local-production.js hors du référentiel Git.By default, the MEAN.js project keeps config/env/local-production.js out of the Git repository. Ainsi, pour votre application Azure, vous utilisez des paramètres d’application pour définir votre chaîne de connexion MongoDB.So for your Azure app, you use app settings to define your MongoDB connection string.

Pour définir les paramètres de l’application, utilisez la commande az webapp config appsettings set dans Cloud Shell.To set app settings, use the az webapp config appsettings set command in the Cloud Shell.

L’exemple suivant configure un paramètre d’application MONGODB_URI dans votre application Azure.The following example configures a MONGODB_URI app setting in your Azure app. Remplacez les espaces réservés <app_name> , <cosmosdb_name> , et <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"

Dans le code Node.js, vous accédez à ce paramètre d’application avec process.env.MONGODB_URI, comme vous accéderiez à n’importe quelle variable d’environnement.In Node.js code, you access this app setting with process.env.MONGODB_URI, just like you would access any environment variable.

Dans votre référentiel MEAN.js local, ouvrez config/env/production.js (et non pas config/env/local-production.js), qui a une configuration propre à l’environnement de production.In your local MEAN.js repository, open config/env/production.js (not config/env/local-production.js), which has production-environment specific configuration. L’application MEAN.js par défaut est déjà configurée pour utiliser la variable d’environnement MONGODB_URI que vous avez créée.The default MEAN.js app is already configured to use the MONGODB_URI environment variable that you created.

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

Effectuer une transmission de type push vers Azure à partir de GitPush to Azure from Git

De retour dans la fenêtre du terminal local, ajoutez un référentiel distant Azure dans votre référentiel Git local.Back in the local terminal window, add an Azure remote to your local Git repository. Remplacez <deploymentLocalGitUrl-from-create-step> par l’URL du Git distant que vous avez enregistrée à la section Créer une app 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>

Effectuez une transmission de type push vers le référentiel distant Azure pour déployer votre application à l’aide de la commande suivante.Push to the Azure remote to deploy your app with the following command. Quand Git Credential Manager vous invite à entrer vos informations d’identification, veillez à entrer celles que vous avez créées dans la section Configurer un utilisateur de déploiement, et non pas celles vous permettant de vous connecter au portail Azure.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

L’exécution de cette commande peut prendre quelques minutes.This command may take a few minutes to run. Pendant son exécution, des informations semblables à ce qui suit s’affichent :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

Vous remarquerez peut-être que le processus de déploiement exécute Gulp après npm install.You may notice that the deployment process runs Gulp after npm install. App Service n’exécute pas les tâches Gulp ou Grunt pendant le déploiement ; cet exemple de référentiel possède donc deux fichiers supplémentaires dans son répertoire racine pour l’activer :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 : ce fichier indique à App Service d’exécuter bash deploy.sh en tant que script de déploiement personnalisé..deployment - This file tells App Service to run bash deploy.sh as the custom deployment script.
  • deploy.sh : le script de déploiement personnalisé.deploy.sh - The custom deployment script. Si vous examinez le fichier, vous verrez qu’il exécute gulp prod après npm install et bower install.If you review the file, you will see that it runs gulp prod after npm install and bower install.

Vous pouvez utiliser cette approche pour ajouter une étape à votre déploiement Git.You can use this approach to add any step to your Git-based deployment. Si vous redémarrez votre application Azure à un moment donné, App Service ne réexécute pas ces tâches d’automatisation.If you restart your Azure app at any point, App Service doesn't rerun these automation tasks.

Accéder à l’application AzureBrowse to the Azure app

Accédez à l’application déployée à l’aide de votre navigateur web.Browse to the deployed app using your web browser.

http://<app_name>.azurewebsites.net 

Cliquez sur S’inscrire dans le menu supérieur et créez un utilisateur fictif.Click Sign Up in the top menu and create a dummy user.

Si vous réussissez, et si l’application se connecte automatiquement à l’utilisateur créé, cela signifie que votre application MEAN.js dans Azure dispose d’une connectivité à la base de données 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.

Application MEAN.js exécutée dans Azure App Service

Sélectionnez Admin > Manage Articles (Administrateur > Gérer les articles) pour ajouter des articles.Select Admin > Manage Articles to add some articles.

Félicitations !Congratulations! Vous exécutez une application Node.js orientée données dans Azure App Service.You're running a data-driven Node.js app in Azure App Service.

Mettre à jour le modèle de données et redéployerUpdate data model and redeploy

Dans cette étape, vous allez changer le modèle de données article et publier vos modifications dans Azure.In this step, you change the article data model and publish your change to Azure.

Mettre à jour le modèle de donnéesUpdate the data model

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

Dans ArticleSchema, ajoutez un type String appelé comment.In ArticleSchema, add a String type called comment. Lorsque vous aurez terminé, votre code de schéma doit ressembler à ceci :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
  }
});

Mettre à jour le code d’articlesUpdate the articles code

Mettez à jour le reste de votre code articles afin d’utiliser comment.Update the rest of your articles code to use comment.

Vous avez cinq fichiers à modifier : le contrôleur de serveur et les quatre vues clientes.There are five files you need to modify: the server controller and the four client views.

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

Dans la fonction update, ajoutez une affectation de article.comment.In the update function, add an assignment for article.comment. Le code suivant illustre la fonction update achevée :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;

  ...
};

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

Juste au-dessus de la balise de fermeture </section>, ajoutez la ligne suivante pour afficher comment avec le reste des données de l’article :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>

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

Juste au-dessus de la balise de fermeture </a>, ajoutez la ligne suivante pour afficher comment avec le reste des données de l’article :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>

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

À l’intérieur de l’élément <div class="list-group">, juste au-dessus de la balise de fermeture </a>, ajoutez la ligne suivante pour afficher comment avec le reste des données de l’article :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>

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

Recherchez l’élément <div class="form-group"> qui contient le bouton Envoyer, qui ressemble à ceci :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>

Juste au-dessus de cette balise, ajoutez un autre élément <div class="form-group"> permettant aux utilisateurs de modifier le champ comment.Just above this tag, add another <div class="form-group"> element that lets people edit the comment field. Votre nouvel élément doit avoir l’aspect suivant :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>

Tester vos modifications en localTest your changes locally

Enregistrez toutes vos modifications.Save all your changes.

Dans la fenêtre de terminal local, retestez vos modifications en mode de production.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

Accédez à http://localhost:8443 dans un navigateur et assurez-vous que vous êtes connecté.Navigate to http://localhost:8443 in a browser and make sure that you're signed in.

Sélectionnez Admin > Manage Articles (Administrateur > Gérer les articles), puis ajoutez un article en cliquant sur le bouton + .Select Admin > Manage Articles, then add an article by selecting the + button.

Vous voyez maintenant la nouvelle zone de texte Comment.You see the new Comment textbox now.

Champ de commentaire ajouté aux Articles

Dans le terminal, arrêtez Node.js en tapant Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Publier les modifications dans AzurePublish changes to Azure

Dans la fenêtre du terminal local, validez vos modifications dans Git, puis envoyez les modifications de code à 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

Une fois le git push terminé, accédez à votre application Azure et testez la nouvelle fonctionnalité.Once the git push is complete, navigate to your Azure app and try out the new functionality.

Modifications du modèle et de la base de données publiées dans Azure

Si vous avez ajouté des articles précédemment, vous pouvez toujours les visualiser.If you added any articles earlier, you still can see them. Les données existantes dans votre Cosmos DB ne sont pas perdues.Existing data in your Cosmos DB is not lost. De plus, les mises à jour que vous appliquez au schéma de données n’affectent pas vos données existantes.Also, your updates to the data schema and leaves your existing data intact.

Diffuser les journaux de diagnosticStream diagnostic logs

Pendant l’exécution de votre application Node.js dans Azure App Service, vous pouvez acheminer les journaux d’activité de la console vers votre terminal.While your Node.js application runs in Azure App Service, you can get the console logs piped to your terminal. De cette façon, vous pouvez obtenir les mêmes messages de diagnostic pour vous aider à déboguer les erreurs d’application.That way, you can get the same diagnostic messages to help you debug application errors.

Pour démarrer la diffusion de journaux, utilisez la commande az webapp log tail dans 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

Une fois que la diffusion a démarré, actualisez votre application Azure dans le navigateur pour générer un trafic web.Once log streaming has started, refresh your Azure app in the browser to get some web traffic. Vous voyez maintenant les journaux d’activité de la console acheminés vers votre terminal.You now see console logs piped to your terminal.

Pour arrêter la diffusion de journaux à tout moment, tapez Ctrl+C.Stop log streaming at any time by typing Ctrl+C.

Gérer votre application AzureManage your Azure app

Accédez au portail Azure pour voir l’application que vous avez créée.Go to the Azure portal to see the app you created.

Dans le menu de gauche, cliquez sur App Services, puis sur le nom de votre application Azure.From the left menu, click App Services, then click the name of your Azure app.

Navigation au sein du portail pour accéder à l’application Azure

Par défaut, le portail affiche la page Vue d’ensemble de votre application.By default, the portal shows your app's Overview page. Cette page propose un aperçu de votre application.This page gives you a view of how your app is doing. Ici, vous pouvez également effectuer des tâches de gestion de base (parcourir, arrêter, démarrer, redémarrer et supprimer des éléments, par exemple).Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. Les onglets sur le côté gauche de la page affichent les différentes pages de configuration que vous pouvez ouvrir.The tabs on the left side of the page show the different configuration pages you can open.

Page App Service du Portail Azure

Supprimer des ressourcesClean up resources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources.In the preceding steps, you created Azure resources in a resource group. Si vous ne pensez pas avoir besoin de ces ressources à l’avenir, supprimez le groupe de ressources en exécutant la commande suivante dans 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

L’exécution de cette commande peut prendre une minute.This command may take a minute to run.

Étapes suivantesNext steps

Vous avez appris à effectuer les opérations suivantes :What you learned:

  • Créer une base de données MongoDB dans AzureCreate a MongoDB database in Azure
  • Connecter une application Node.js à MongoDBConnect a Node.js app to MongoDB
  • Déploiement de l’application dans AzureDeploy the app to Azure
  • Mettre à jour le modèle de données et redéployer l’applicationUpdate the data model and redeploy the app
  • Diffuser des journaux d’activité à partir d’Azure vers votre terminalStream logs from Azure to your terminal
  • Gérer l’application dans le portail AzureManage the app in the Azure portal

Passez au didacticiel suivant pour découvrir comment mapper un nom DNS personnalisé à l’application.Advance to the next tutorial to learn how to map a custom DNS name to the app.