Déployer une application Web Node.js dans Azure

Dans ce guide de démarrage rapide, vous allez apprendre à créer et déployer votre première application web Node.js (Express) sur Azure App Service. App Service prend en charge diverses versions de Node.js à la fois sur Linux et Windows.

Les étapes de l’Azure CLI dans ce démarrage rapide utilisent le niveau Premium v3 payant. Les étapes dans Visual Studio Code et le portail Azure montrent comment utiliser le niveau Gratuit.

Cette vidéo vous montre comment déployer une application web Node.js dans Azure.

Les étapes de la vidéo sont également décrites dans les sections suivantes.

Configurer votre environnement initial

• Vous devez disposer d’un compte Azure avec un abonnement actif. Si vous n’en avez pas, vous pouvez créer un compte gratuitement.
• Installez Node.js LTS. Exécutez la commande node --version pour vérifier que Node.js est installé.
• Installez Visual Studio Code.
• Installez l’extension Azure App Service pour Visual Studio Code.

• Vous devez disposer d’un compte Azure avec un abonnement actif. Si vous n’en avez pas, vous pouvez créer un compte gratuitement.
• Installez Node.js LTS. Exécutez la commande node --version pour vérifier que Node.js est installé.
• Installez Azure CLI, que vous pouvez utiliser pour exécuter des commandes dans un interpréteur de commandes pour créer et configurer des ressources Azure.

• Vous devez disposer d’un compte Azure avec un abonnement actif. Si vous n’en avez pas, vous pouvez créer un compte gratuitement.
• Installez Node.js LTS. Exécutez la commande node --version pour vérifier que Node.js est installé.
• Avoir un client FTP, tel que FileZilla, pour transférer des fichiers vers App Service.

Créer votre application Node.js

Pendant cette étape, vous allez créer une application Node.js de base et vérifier qu’elle s’exécute sur votre ordinateur.

Conseil

Si vous avez déjà terminé le didacticielNode.js, vous pouvez passer à l’étape déployer sur Azure.

1. Créez une application Node.js à l’aide du générateur d’applications express, qui est installé par défaut avec Node.js et npm.

   npx express-generator myExpressApp --view ejs
   

   Si c’est la première fois que vous avez installé le générateur, npx vous demande d’accepter l’installation.

2. Accédez au répertoire de l’application et installez les packages npm.

   cd myExpressApp && npm install
   

3. Mettez à jour les dépendances vers la version la plus sécurisée.

   npm audit fix --force
   

4. Démarrez le serveur de développement avec les informations de débogage.

   DEBUG=myexpressapp:* npm start
   

5. Dans un navigateur, accédez à http://localhost:3000. Le résultat suivant devrait s'afficher :

   

J’ai rencontré un problème

Déployer dans Azure

Avant de continuer, assurez-vous que tous les composants requis ont bien été installés et configurés.

Remarque

Pour que votre application Node.js s’exécute dans Azure, elle a besoin d’écouter le port fourni par la variable d’environnement PORT. Dans votre application Express générée, cette variable d’environnement est déjà utilisée dans le script de démarrage bin/www. (Recherchez process.env.PORT.)

Connexion à Azure

1. Dans le terminal, vérifiez que vous êtes dans le répertoire myExpressApp, puis démarrez Visual Studio Code en utilisant la commande suivante :

   code .
   

2. Dans Visual Studio Code, dans la barre d’activité, sélectionnez le logo Azure.

3. Vérifiez que vous êtes connecté avec votre compte Azure.

J’ai rencontré un problème

Configurer l’application App Service et déployer du code

Déployer sur Linux

1. Cliquez avec le bouton droit sur App Services, puis sélectionnez Créer une application web. Un conteneur Linux est utilisé par défaut.

2. Entrez un nom globalement unique pour votre application web, puis sélectionnez Entrée. Le nom doit être unique dans l’ensemble d’Azure et utiliser uniquement des caractères alphanumériques (A-Z, a-zet ) et 0-9des traits d’union (-).

3. Dans Sélectionner une pile d’exécution, sélectionnez la version de Node.js souhaitée. Le nœud 24 LTS est recommandé.

4. Dans Sélectionner un niveau tarifaire, sélectionnez Gratuit (F1) et attendez que les ressources soient créées dans Azure.

5. Dans le menu contextuel Toujours déployer l’espace de travail « myExpressApp » sur <app-name>, sélectionnez Oui. Procéder ainsi garantit que tant que vous êtes dans le même espace de travail, Visual Studio Code se déploie chaque fois sur la même application App Service.

   Pendant que Visual Studio Code crée les ressources Azure et déploie le code, des notifications de progression s’affichent.

6. Une fois le déploiement terminé, sélectionnez Parcourir le site web dans la fenêtre contextuelle de notification. Le navigateur doit afficher la page par défaut Express.

Déployer sur Windows

1. Sous Ressources, dans l’abonnement que vous souhaitez utiliser, cliquez avec le bouton droit sur App Services, puis sélectionnez Créer une application web... (Avancé).

2. Sélectionnez l’emplacement à partir duquel vous souhaitez servir votre application. Par exemple, Europe Ouest.

3. Sélectionnez Le nom d’hôte par défaut unique sécurisé.

4. Sélectionnez Créer un groupe de ressources, puis entrez un nom pour le groupe de ressources, par exemple AppServiceQS-rg.

5. Tapez un nom global unique pour votre application web, puis sélectionnez Entrée. Le nom doit être unique dans l’ensemble d’Azure et utiliser uniquement des caractères alphanumériques (A-Z, a-zet ) et 0-9des traits d’union (-).

6. Sélectionnez la version de Node.js souhaitée. Le nœud 24 LTS est recommandé.

7. Sélectionnez Windows comme système d’exploitation.

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

9. Pour sélectionner une ressource Application Insights pour votre application, sélectionnez Ignorer pour le moment. Attendez que les ressources soient créées dans Azure.

10. Dans le menu contextuel Toujours déployer l’espace de travail « myExpressApp » sur <app-name>, sélectionnez Oui. Procéder ainsi garantit que tant que vous êtes dans le même espace de travail, Visual Studio Code se déploie chaque fois sur la même application App Service.

    Pendant que Visual Studio Code crée les ressources Azure et déploie le code, des notifications de progression s’affichent.

    Remarque

    Une fois le déploiement terminé, votre application Azure ne s’exécute pas encore, car la racine de votre projet n’a pas de fichier web.config . Suivez les étapes restantes pour la générer automatiquement. Pour plus d’informations, consultez Vous n’êtes pas autorisé à afficher ce répertoire ou cette page dans Configurer une application Node.js.

11. Dans Ressources dans Visual Studio Code, développez le nœud de la nouvelle application, cliquez avec le bouton droit sur Paramètres de l’application, puis sélectionnez Ajouter un nouveau paramètre :

    

12. Entrez SCM_DO_BUILD_DURING_DEPLOYMENT pour la clé du paramètre.

13. Entrez true pour la valeur de paramètre.

    Ce paramètre d’application active l’automatisation de build au moment du déploiement, qui détecte automatiquement le script de démarrage et génère le fichier web.config avec celui-ci.

14. Dans l’explorateur App Service, resélectionnez l’icône Déployer sur l’application web, puis confirmez en resélectionnant Déployer.

15. Attendez la fin du déploiement, puis sélectionnez Parcourir le site web dans le message de notification. Le navigateur doit afficher la page par défaut Express.

J’ai rencontré un problème

Dans le terminal, assurez-vous d’être dans le répertoire myExpressApp . Remplacez <app-name> par un nom globalement unique, puis créez le groupe de ressources, le plan de service d’applications et l’application. Configurez SCM_DO_BUILD_DURING_DEPLOYMENT pour que l’App Service installe les dépendances et construise l’application lors du déploiement de l’archive source.

Déployer sur Linux

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

Déployer sur Windows

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• Si la commande az n’est pas reconnue, vérifiez qu’Azure CLI est installé, comme décrit dans Configurer votre environnement initial.
• Remplacez <app-name> par un nom unique sur tout Azure (les caractères valides sont a-z, 0-9, et -).
• L’argument --sku P0v3 sélectionne le fourchet tarifaire Premium v3 payant. Remplacez eastus par votre région préférée ; listez les régions disponibles avec az account list-locations.
• --is-linux sélectionne un forfait Linux. Omettez-le pour un forfait Windows, comme indiqué dans l’onglet Windows.

Créez une archive ZIP des fichiers dans myExpressApp, pas le répertoire qui l’entoure. Sous Linux ou macOS, lancez zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' depuis myExpressApp. Sous Windows, exécutez-le Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip dans PowerShell depuis myExpressApp. Ensuite, déployez l’archive :

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

Accédez à https://<app-name>.azurewebsites.net pour voir l’application.

Créer des ressources Azure

1. Connectez-vous au portail Azure.

2. Pour commencer la création d’une application Node.js, accédez à https://portal.azure.com/#create/Microsoft.WebSite.

3. Dans l’onglet De base, sous Détails du projet, vérifiez que l’abonnement approprié est sélectionné, puis sélectionnez Créer pour créer un groupe de ressources. Tapez myResourceGroup comme nom.

   

4. Sous Détails de l’instance, saisissez un nom global unique pour votre application web et sélectionnez Code. Sélectionnez Node 24 LTS dans la pile Runtime, un système d’exploitation et une région à partir de laquelle vous souhaitez servir votre application.

   

5. Sous Plans tarifaires, sélectionnez Créer nouveau pour créer un plan App Service. Saisissez myAppServicePlan comme nom. Pour passer au niveau Gratuit, sélectionnez Gratuit F1 dans la liste des plans tarifaires .

   

6. Sélectionnez le bouton Vérifier + créer au bas de la page.

   

7. Après avoir exécuté la validation, sélectionnez le bouton Créer en bas de la page.

8. Une fois le déploiement effectué, sélectionnez Accéder à la ressource.

   

Obtenir les informations d'identification FTPS

Azure App Service prend en charge deux types d’informations d’identification pour le déploiement FTP/S. Ces informations d’identification ne sont pas les mêmes que les informations d’identification de votre abonnement Azure. Dans cette section, vous obtenez les informations d'identification à l'échelle de l'application à utiliser avec votre client FTP.

1. Dans la page de l’application App Service, sélectionnez Centre de déploiement sous Déploiement dans le menu de la barre latérale, puis sélectionnez l’onglet Informations d’identification FTPS .

   

2. Ouvrez votre client FTP et accédez à votre dossier myExpressApp .

3. Sous l’onglet Informations d’identification FTPS , copiez le point de terminaison FTPS, le nom d’utilisateur et le mot de passe dans votre client FTP.

   

4. Sélectionnez Se connecter dans votre client FTP.

Déployer des fichiers avec FTPS

1. Copiez tous les fichiers et répertoires dans le répertoire /site/wwwroot dans Azure.

   

2. Accédez à l’URL de votre application pour vérifier que l’application s’exécute correctement.

Redéployer les mises à jour

Vous pouvez déployer des changements apportés à cette application en effectuant des modifications dans Visual Studio Code, en enregistrant vos fichiers, puis en les redéployant sur votre application Azure. Par exemple :

1. À partir du projet d'exemple, ouvrez views/index.ejs et modifiez

   <p>Welcome to <%= title %></p>
   

   to

   <p>Welcome to Azure</p>
   

2. Dans l’explorateur App Service, resélectionnez l’icône Déployer sur l’application web, puis confirmez en resélectionnant Déployer.

3. Attendez la fin du déploiement, puis sélectionnez Parcourir le site web dans le message de notification. Vous devez voir que le Welcome to Express message a été modifié en Welcome to Azure.

2. Enregistrez vos modifications, recréez ../app.zip à partir des fichiers de l’application comme décrit dans Déployer vers Azure, puis redéployez :

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Remplacez <app-name> par le nom que vous avez utilisé lors de la création de l’application web.

3. Une fois le déploiement terminé, actualisez la page web. Vous devez voir que le Welcome to Express message a été modifié en Welcome to Azure.

2. Enregistrez vos modifications, puis redéployez l’application à l’aide de votre client FTP.

3. Une fois le déploiement terminé, actualisez la page web. Vous devez voir que le Welcome to Express message a été modifié en Welcome to Azure.

Diffuser les journaux d’activité en continu

Vous pouvez diffuser en streaming la sortie de journal (appels à console.log()) à partir de l’application Azure directement dans la fenêtre de sortie Visual Studio Code.

1. Dans Ressources dans Visual Studio Code, cliquez avec le bouton droit sur le nœud de l’application, puis sélectionnez Démarrer les journaux de streaming.

   

2. Si vous êtes invité à redémarrer l’application, sélectionnez Oui. Une fois l’application redémarrée, la fenêtre de sortie Visual Studio Code s’ouvre avec une connexion au flux de journaux.

3. Après quelques secondes, la fenêtre de sortie affiche un message indiquant que vous êtes connecté au service de streaming de journaux. Vous pouvez générer plus d’activités de sortie en actualisant la page dans le navigateur.

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

J’ai rencontré un problème

Vous pouvez accéder aux journaux de la console générés à l’intérieur de l’application et au conteneur dans lequel elle s’exécute. Les journaux de logs incluent toutes les sorties générées par les appels à console.log().

Pour activer le streaming des journaux, exécutez la commande az webapp log tail :

• Activez d’abord la journalisation : sous Linux, exécutez az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; sous Windows, exécutez az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

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

Remplacez <app-name> par le nom que vous avez utilisé lors de la création de l’application web.

Actualisez l’application dans le navigateur pour générer des journaux de console, qui incluent des messages décrivant les requêtes HTTP envoyées à l’application. Si aucune sortie ne s’affiche immédiatement, réessayez dans 30 secondes.

Vous pouvez arrêter à tout moment le streaming de journaux en appuyant sur Ctrl+C dans le terminal.

Vous pouvez accéder aux journaux de la console générés à l’intérieur de l’application et au conteneur dans lequel elle s’exécute. Vous pouvez diffuser la sortie de log (appels à console.log()) depuis l’application Node.js directement dans le portail Azure.

1. Dans la même page App Service pour votre application, utilisez le menu de la barre latérale pour faire défiler vers la section Surveillance et sélectionnez Flux de journal.

   

2. Après quelques secondes, la fenêtre de sortie affiche un message indiquant que vous êtes connecté au service de streaming de journaux. Vous pouvez générer plus d’activités de sortie en actualisant la page dans le navigateur.

   Connecting...
   2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
   Starting Log Tail -n 10 of existing logs ----
   /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
   2021-10-26T21:04:08.614384810Z: [INFO]
   2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
   2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
   2021-10-26T21:04:08.614403210Z: [INFO]
   2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
   2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
   2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
   2021-10-26T21:04:08.614419610Z: [INFO]  fi
   2021-10-26T21:04:08.614423411Z: [INFO]
   2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
   Ending Log Tail of existing logs ---
   

Nettoyer les ressources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources. Les étapes de ce guide de démarrage rapide placent toutes les ressources dans ce groupe de ressources. Pour effectuer un nettoyage, il vous suffit simplement de supprimer le groupe de ressources.

1. Dans l’extension Azure de Visual Studio Code, dans la liste Groupe par , sélectionnez Grouper par groupe de ressources.

2. Dans la liste Ressources , développez l’abonnement, cliquez avec le bouton droit sur le groupe de ressources que vous avez créé précédemment, puis sélectionnez Supprimer le groupe de ressources.

   

3. À l’invite, confirmez la suppression en entrant le nom du groupe de ressources que vous supprimez. Une fois que vous avez confirmé, le groupe de ressources est supprimé et vous voyez une notification lorsqu’il est terminé.

J’ai rencontré un problème

Dans les étapes précédentes de la CLI, vous avez créé des ressources Azure dans myResourceGroup.

Si vous ne pensez pas avoir besoin de ces ressources à l’avenir, supprimez le groupe de ressources en exécutant la commande suivante :

az group delete --name myResourceGroup --no-wait

Avec l’argument --no-wait, la commande peut retourner avant que l’opération ne soit terminée.

Vous pouvez supprimer le groupe de ressources, App Service et toutes les ressources associées quand elles ne sont plus nécessaires.

1. Dans la page Vue d’ensemble de votre instance App Service, sélectionnez le groupe de ressources que vous avez créé à l’étape Créer des ressources Azure.

   

2. Dans la page Groupe de ressources, sélectionnez Supprimer un groupe de ressources. Confirmez le nom du groupe de ressources pour terminer la suppression des ressources.

   

Contenu connexe

Félicitations, vous avez terminé ce démarrage rapide !

Déployer une application web Node.js + MongoDB sur Azure

Configurer une application Node.js

  Utiliser un domaine personnalisé et un certificat managé pour sécuriser votre application

Consultez les autres extensions Azure.

• Azure Cosmos DB
• Azure Functions
• Pack d’extension Docker
• Outils Azure CLI
• Outils Azure Resource Manager

Vous pouvez également tous les obtenir en installant le pack d’extension Pack de nœuds pour Azure.