Créer une application web Node.js dans AzureCreate a Node.js web app in Azure

Commencez avec Azure App Service en créant une application Node.js/Express localement à l’aide de Visual Studio Code et en la déployant dans le cloud.Get started with Azure App Service by creating a Node.js/Express app locally using Visual Studio Code and then deploying the app to the cloud. Comme vous utilisez un niveau App Service gratuit, vous pouvez suivre ce guide de démarrage rapide gratuitement.Because you use a free App Service tier, you incur no costs to complete this quickstart.

PrérequisPrerequisites

Cloner et exécuter une application Node.js localeClone and run a local Node.js application

  1. Sur votre ordinateur local, ouvrez un terminal et clonez l’exemple de référentiel :On your local computer, open a terminal and clone the sample repository:

    git clone https://github.com/Azure-Samples/nodejs-docs-hello-world
    
  2. Accédez au nouveau dossier de l’application :Navigate into the new app folder:

    cd nodejs-docs-hello-world
    
  3. Démarrez l’application pour la tester localement :Start the app to test it locally:

    npm start
    
  4. Ouvrez votre navigateur et accédez à http://localhost:1337.Open your browser and navigate to http://localhost:1337. Le navigateur doit afficher le message « Hello World! ».The browser should display "Hello World!".

  5. Appuyez sur Ctrl+C dans le terminal pour arrêter le serveur.Press Ctrl+C in the terminal to stop the server.

Déploiement de l’application dans AzureDeploy the app to Azure

Dans cette section, vous déployez votre application Node.js sur Azure à l’aide de VS Code et de l’extension Azure App Service.In this section, you deploy your Node.js app to Azure using VS Code and the Azure App Service extension.

  1. Dans le terminal, vérifiez que vous vous trouvez dans le dossier nodejs-docs-hello-world, puis démarrez Visual Studio Code à l’aide de la commande suivante :In the terminal, make sure you're in the nodejs-docs-hello-world folder, then start Visual Studio Code with the following command:

    code .
    
  2. Dans la barre d’activité de VS Code, sélectionnez le logo Azure pour afficher l’explorateur AZURE APP SERVICE.In the VS Code activity bar, select the Azure logo to show the AZURE APP SERVICE explorer. Sélectionnez Se connecter à Azure... et suivez les instructions.Select Sign in to Azure... and follow the instructions. (Consultez la section Résolution des problèmes de connexion à Azure plus bas si vous rencontrez des erreurs.) Quand vous êtes connecté, l’explorateur doit afficher le nom de votre abonnement Azure.(See Troubleshooting Azure sign-in below if you run into errors.) Once signed in, the explorer should show the name of your Azure subscription.

    Connexion à Azure

  3. Dans l’explorateur AZURE APP SERVICE de VS Code, sélectionnez l’icône représentant une flèche bleue pointant vers le haut pour déployer votre application sur Azure.In the AZURE APP SERVICE explorer of VS Code, select the blue up arrow icon to deploy your app to Azure. (Vous pouvez également appeler la même commande à partir de la palette de commandes (Ctrl+Maj+P) en tapant « déployer sur l’application web » et en choisissant Azure App Service : Déployer sur l’application web).(You can also invoke the same command from the Command Palette (Ctrl+Shift+P) by typing 'deploy to web app' and choosing Azure App Service: Deploy to Web App).

    Capture d’écran d’Azure App Service dans VS Code montrant l’icône de flèche bleue sélectionnée.

  4. Choisissez le dossier nodejs-docs-hello-world.Choose the nodejs-docs-hello-world folder.

  5. Choisissez une option de création basée sur le système d’exploitation sur lequel vous souhaitez effectuer le déploiement :Choose a creation option based on the operating system to which you want to deploy:

    • Linux : Sélectionnez Créer une application web.Linux: Choose Create new Web App
    • Windows : Sélectionnez Créer une application web... AvancéWindows: Choose Create new Web App... Advanced
  6. Saisissez un nom unique pour votre application web et appuyez sur Entrée.Type a globally unique name for your web app and press Enter. Le nom doit être unique sur l’ensemble d’Azure et comporter uniquement des caractères alphanumériques (« A-Z », « a-z » et « 0-9 ») et des traits d’union (« - »).The name must be unique across all of Azure and use only alphanumeric characters ('A-Z', 'a-z', and '0-9') and hyphens ('-').

  7. Si vous ciblez Linux, sélectionnez une version de Node.js quand vous y êtes invité.If targeting Linux, select a Node.js version when prompted. Une version LTS est recommandée.An LTS version is recommended.

  8. Si vous ciblez Windows, suivez les invites supplémentaires :If targeting Windows, follow the additional prompts:

    1. Sélectionnez Créer un groupe de ressources et entrez un nom pour le groupe de ressources, par exemple AppServiceQS-rg.Select Create a new resource group, then enter a name for the resource group, such as AppServiceQS-rg.
    2. Sélectionnez Windows comme système d’exploitation.Select Windows for the operating system.
    3. Sélectionnez Créer un plan App Service, entrez un nom pour le plan (par exemple, AppServiceQS-plan), puis sélectionnez le niveau tarifaire F1 Gratuit.Select Create new App Service plan, then enter a name for the plan (such as AppServiceQS-plan), then select F1 Free for the pricing tier.
    4. À l’invite Application Insights, choisissez Ignorer pour le moment.Choose Skip for now when prompted about Application Insights.
    5. Choisissez une région près de chez vous ou à proximité des ressources auxquelles vous souhaitez accéder.Choose a region near you or near resources you wish to access.
  9. Quand vous avez répondu à toutes les invites, VS Code affiche les ressources Azure qui sont créées pour votre application dans sa fenêtre de notification.After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.

    Si vous effectuez un déploiement dans Linux, sélectionnez Oui quand vous êtes invité à mettre à jour votre configuration pour exécuter npm install sur le serveur Linux cible.When deploying to Linux, select Yes when prompted to update your configuration to run npm install on the target Linux server.

    Invite concernant la mise à jour de la configuration sur le serveur Linux cible

  10. Sélectionnez Oui quand le message suivant s’affiche : Toujours déployer l’espace de travail "nodejs-docs-hello-world" sur (nom de l’application)" .Select Yes when prompted with Always deploy the workspace "nodejs-docs-hello-world" to (app name)". Quand vous sélectionnez Oui, vous indiquez à VS Code de cibler automatiquement la même application web App Service pour les déploiements suivants.Selecting Yes tells VS Code to automatically target the same App Service Web App with subsequent deployments.

  11. Si vous effectuez le déploiement sur Linux, à l’issue du déploiement, sélectionnez Parcourir le site Web dans l’invite pour voir l’application web que vous venez de déployer.If deploying to Linux, select Browse Website in the prompt to view your freshly deployed web app once deployment is complete. Le navigateur doit afficher le message « Hello World! ».The browser should display "Hello World!"

  12. Si vous effectuez le déploiement sur Windows, vous devez d’abord définir le numéro de version Node.js pour l’application web :If deploying to Windows, you must first set the Node.js version number for the web app:

    1. Dans VS Code, développez le nœud de votre nouveau service d’application, cliquez avec le bouton droit sur Paramètres de l’application, puis sélectionnez Ajouter un nouveau paramètre...  :In VS Code, expand the node for the new app service, right-click Application Settings, and select Add New Setting...:

      Commande d’ajout de paramètre d’application

    2. Entrez WEBSITE_NODE_DEFAULT_VERSION pour la clé du paramètre.Enter WEBSITE_NODE_DEFAULT_VERSION for the setting key.

    3. Entrez 10.15.2 pour la valeur du paramètre.Enter 10.15.2 for the setting value.

    4. Cliquez avec le bouton droit sur le nœud du service d’application et sélectionnez Redémarrer.Right-click the node for the app service and select Restart

      Commande de redémarrage du service d’application

    5. Cliquez de nouveau sur le nœud du service d’application avec le bouton droit et sélectionnez Parcourir le site Web.Right-click the node for the app service once more and select Browse Website.

Résolution des problèmes de connexion à AzureTroubleshooting Azure sign-in

Si vous rencontrez l’erreur « Cannot find subscription with name [subscription ID] » (L’abonnement avec le nom [ID d’abonnement] est introuvable) quand vous vous connectez à Azure, cela peut être dû au fait que vous vous trouvez derrière un proxy qui vous empêche d’atteindre l’API Azure.If you see the error "Cannot find subscription with name [subscription ID]" when signing into Azure, it might be because you're behind a proxy and unable to reach the Azure API. Configurez les variables d’environnement HTTP_PROXY et HTTPS_PROXY avec vos informations de proxy dans votre terminal à l’aide de export.Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Si la définition des variables d’environnement ne corrige pas le problème, contactez-nous en sélectionnant le bouton J’ai rencontré un problème plus haut.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button above.

Mettre à jour l’applicationUpdate the app

Pour déployer les modifications apportées à cette application, vous pouvez effectuer les modifications dans VS Code, enregistrer vos fichiers, puis appliquer la procédure suivie précédemment en choisissant l’application existante au lieu d’en créer une nouvelle.You can deploy changes to this app by making edits in VS Code, saving your files, and then using the same process as before only choosing the existing app rather than creating a new one.

Consultation des journauxViewing Logs

Vous pouvez voir la sortie de journal (appels à console.log) à partir de l’application directement dans la fenêtre de sortie de VS Code.You can view log output (calls to console.log) from the app directly in the VS Code output window.

  1. Dans l’explorateur AZURE APP SERVICE, cliquez avec le bouton droit sur le nœud de l’application, puis choisissez Commencer le streaming des journaux.In the AZURE APP SERVICE explorer, right-click the app node and choose Start Streaming Logs.

    Commencer le streaming des journaux

  2. Lorsque vous y êtes invité, choisissez d’activer la journalisation et de redémarrer l’application.When prompted, choose to enable logging and restart the application. Une fois l’application redémarrée, la fenêtre de résultats de VS Code s’ouvre avec une connexion au flux de journaux.Once the app is restarted, the VS Code output window opens with a connection to the log stream.

    Capture d’écran de l’invite de Visual Studio Code pour activer la journalisation et redémarrer l’application avec le bouton Oui sélectionné.

  3. Après quelques secondes, la fenêtre de sortie affiche un message indiquant que vous êtes connecté au service de streaming de journaux.After a few seconds, the output window shows a message indicating that you're connected to the log-streaming service. Vous pouvez générer plus d’activités de sortie en actualisant la page dans le navigateur.You can generate more output activity by refreshing the page in the browser.

     Connecting to log stream...
     2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
     Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
     

Étapes suivantesNext steps

Félicitations, vous avez terminé ce démarrage rapide !Congratulations, you've successfully completed this quickstart!

Consultez les autres extensions Azure.Check out the other Azure extensions.

Vous pouvez également tous les obtenir en installant le pack d’extension Pack de nœuds pour Azure.Or get them all by installing the Node Pack for Azure extension pack.

PrérequisPrerequisites

Si vous n’avez pas de compte Azure, inscrivez-vous dès maintenant pour obtenir un compte gratuit avec 200 $ de crédits Azure, ce qui vous permettra d’essayer toutes les combinaisons de services.If you don't have an Azure account, sign up today for a free account with $200 in Azure credits to try out any combination of services.

Vous devez avoir installé Visual Studio Code ainsi que Node.js et npm, le gestionnaire de package Node.js.You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

Vous devez également installer l’extension Azure App Service, que vous pouvez utiliser pour créer, gérer et déployer des Web Apps Linux sur la plateforme PaaS (Platform as a Service) Azure.You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).

Se connecterSign in

Une fois l’extension installée, connectez-vous à votre compte Azure.Once the extension is installed, log into your Azure account. Dans la barre d’activité, sélectionnez le logo Azure pour afficher l’Explorateur AZURE APP SERVICE.In the Activity Bar, select the Azure logo to show the AZURE APP SERVICE explorer. Sélectionnez Se connecter à Azure... et suivez les instructions.Select Sign in to Azure... and follow the instructions.

se connecter à Azure

DépannageTroubleshooting

Si vous rencontrez l’erreur « Cannot find subscription with name [subscription ID] » (L’abonnement avec le nom [ID d’abonnement] est introuvable), cela peut être dû au fait que vous vous trouvez derrière un proxy qui vous empêche d’atteindre l’API Azure.If you see the error "Cannot find subscription with name [subscription ID]", it might be because you're behind a proxy and unable to reach the Azure API. Configurez les variables d’environnement HTTP_PROXY et HTTPS_PROXY avec vos informations de proxy dans votre terminal à l’aide de export.Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080

Si la définition des variables d’environnement ne corrige pas le problème, contactez-nous en sélectionnant le bouton J’ai rencontré un problème ci-dessous.If setting the environment variables doesn't correct the issue, contact us by selecting the I ran into an issue button below.

Vérification du prérequisPrerequisite check

Avant de continuer, assurez-vous que tous les composants requis ont bien été installés et configurés.Before you continue, ensure that you have all the prerequisites installed and configured.

Dans VS Code, vous devriez voir votre adresse e-mail Azure dans la barre d’État et votre abonnement dans l’Explorateur AZURE APP SERVICE.In VS Code, you should see your Azure email address in the Status Bar and your subscription in the AZURE APP SERVICE explorer.

Créer votre application Node.jsCreate your Node.js application

Créez ensuite une application Node.js pouvant être déployée dans le Cloud.Next, create a Node.js application that can be deployed to the Cloud. Ce démarrage rapide utilise un générateur d’applications pour déployer rapidement l’application depuis un terminal.This quickstart uses an application generator to quickly scaffold out the application from a terminal.

Conseil

Si vous avez déjà terminé le tutoriel Node.js, vous pouvez passer directement à la section Déployer sur Azure.If you have already completed the Node.js tutorial, you can skip ahead to Deploy to Azure.

Structurer une nouvelle application avec le générateur ExpressScaffold a new application with the Express Generator

Express est un framework couramment utilisé pour la création et l’exécution des applications Node.js.Express is a popular framework for building and running Node.js applications. Vous pouvez créer/définir la structure d’une nouvelle application Express à l'aide de l’outil Générateur Express.You can scaffold (create) a new Express application using the Express Generator tool. Le générateur Express est fourni en tant que module npm et peut être exécuté directement (sans installation) à l’aide de l’outil en ligne de commande npm npx.The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool npx.

npx express-generator myExpressApp --view pug --git

Les paramètres --view pug --git indiquent au générateur qu’il doit utiliser le moteur de modèle pug (auparavant appelé jade) et créer un fichier .gitignore.The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

Pour installer toutes les dépendances de l’application, accédez au nouveau dossier et exécutez npm install.To install all of the application's dependencies, go to the new folder and run npm install.

cd myExpressApp
npm install

Exécution de l'applicationRun the application

Assurez-vous ensuite que l’application s’exécute.Next, ensure that the application runs. À partir du terminal, démarrez l’application à l’aide de la commande npm start pour démarrer le serveur.From the terminal, start the application using the npm start command to start the server.

npm start

À présent, ouvrez votre navigateur et accédez à http://localhost:3000. Voici ce que vous devriez obtenir :Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Exécution de l’application Express

Déployer dans AzureDeploy to Azure

Dans cette section, vous déployez votre application Node.js à l’aide de VS Code et de l’extension Azure App Service.In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. Ce démarrage rapide utilise le modèle de déploiement le plus basique dans lequel votre application est compressée et déployée sur une application Web Azure sur Linux.This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux.

Déployer à l’aide d’Azure App ServiceDeploy using Azure App Service

Tout d’abord, ouvrez le dossier de votre application dans VS Code.First, open your application folder in VS Code.

code .

Dans l’explorateur AZURE APP SERVICE, sélectionnez l’icône représentant une flèche bleue pointant vers le haut pour déployer votre application sur Azure.In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Capture d’écran du menu Azure App Service dans Visual Studio Code avec la flèche bleue Déployer sélectionnée.

Conseil

Vous pouvez également effectuer le déploiement à partir de la palette de commandes (Ctrl + Maj + P) en tapant « déployer sur l'application web » et en exécutant l’Azure App Service : Commande Déployer sur l'application web.You can also deploy from the Command Palette (CTRL + SHIFT + P) by typing 'deploy to web app' and running the Azure App Service: Deploy to Web App command.

  1. Choisissez le répertoire actuellement ouvert, myExpressApp.Choose the directory that you currently have open, myExpressApp.

  2. Choisissez Créer une application web pour déployer sur App Service sur Linux par défaut.Choose Create new Web App, which deploys to App Service on Linux by default.

  3. Saisissez un nom unique pour votre application Web et appuyez sur Entrée.Type a globally unique name for your Web App and press ENTER. Les caractères valides dans un nom d’application sont les suivants : « a-z », « 0-9 » et « - ».Valid characters for an app name are 'a-z', '0-9', and '-'.

  4. Choisissez votre version Node.js (LTS est recommandé).Choose your Node.js version, LTS is recommended.

    Le canal de notification affiche les ressources Azure qui sont créées pour votre application.The notification channel shows the Azure resources that are being created for your app.

  5. Sélectionnez Oui lorsque vous êtes invité à mettre à jour votre configuration pour exécuter npm install sur le serveur cible.Select Yes when prompted to update your configuration to run npm install on the target server. Votre application est alors déployée.Your app is then deployed.

    Capture d’écran de l’invite de mise à jour de votre configuration sur le serveur cible avec le bouton Oui sélectionné.

  6. Lorsque le déploiement démarre, vous êtes invité à mettre à jour votre espace de travail afin que les déploiements ultérieurs ciblent automatiquement la même application web App Service.When the deployment starts, you're prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Choisissez Oui pour vous assurer que vos modifications sont déployées sur la bonne application.Choose Yes to ensure your changes are deployed to the correct app.

    Capture d’écran de l’invite de mise à jour de votre espace de travail avec le bouton Oui sélectionné.

Conseil

Assurez-vous que votre application utilise le port d’écoute fourni par la variable d’environnement PORT process.env.PORT.Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

Accéder à l’application dans AzureBrowse the app in Azure

Une fois le déploiement terminé, sélectionnez Parcourir le site web dans l’invite pour afficher l’application web que vous venez de déployer.Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

DépannageTroubleshooting

Si vous voyez s’afficher le message d’erreur « Vous n’êtes pas autorisé à afficher ce répertoire ou cette page. » , c’est que l’application n’a probablement pas réussi à démarrer correctement.If you see the error "You do not have permission to view this directory or page.", then the application probably failed to start correctly. Accédez à la section suivante et affichez la sortie du journal pour rechercher et corriger l’erreur.Head to the next section and view the log output to find and fix the error. Si vous n’êtes pas en mesure de la corriger, contactez-nous en sélectionnant le bouton J’ai rencontré un problème ci-dessous.If you aren't able to fix it, contact us by selecting the I ran into an issue button below. Nous sommes là pour vous aider !We're happy to help!

Mettre à jour l’applicationUpdate the app

Vous pouvez déployer les modifications apportées à cette application en utilisant le même procédure et en choisissant l’application existante au lieu d’en créer une nouvelle.You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

Consultation des journauxViewing Logs

Dans cette section, vous allez apprendre à visionner les journaux à partir de l’application App Service en cours d’exécution.In this section, you learn how to view (or "tail") the logs from the running App Service app. Tous les appels à console.log dans l’application sont affichés dans la fenêtre de résultats de Visual Studio Code.Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Recherchez l’application dans l'explorateur AZURE APP SERVICE, cliquez avec le bouton droit de la souris sur l’application, puis choisissez Afficher les journaux d’activité de diffusion en continu.Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

La fenêtre de résultats de VS Code s’ouvre avec une connexion au flux de journaux.The VS Code output window opens with a connection to the log stream.

Afficher les journaux d’activité de diffusion en continu

Capture d’écran de l’invite de VS Code pour permettre la journalisation des fichiers et le redémarrage de l’application web avec le bouton Oui sélectionné.

Après quelques secondes, vous verrez s’afficher un message indiquant que vous êtes connecté au service de diffusion en continu de journaux.After a few seconds, you'll see a message indicating that you're connected to the log-streaming service. Actualisez la page plusieurs fois pour voir davantage d’activité.Refresh the page a few times to see more activity.

2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None

Étapes suivantesNext steps

Félicitations, vous avez terminé ce démarrage rapide !Congratulations, you've successfully completed this quickstart!

Consultez ensuite les autres extensions Azure.Next, check out the other Azure extensions.

Vous pouvez également tous les obtenir en installant le pack d’extension Pack de nœuds pour Azure.Or get them all by installing the Node Pack for Azure extension pack.