Créer et déployer une application Node.js

Cet article explique comment utiliser Azure Pipelines pour créer un pipeline qui génère et déploie une application Node.js sur Azure App Service avec intégration continue (CI) et déploiement continu (CD). CI/CD réduit les temps d’arrêt et les risques d’erreur en créant et en déployant automatiquement votre application chaque fois qu’il existe une validation dans votre référentiel de code d’application.

Prérequis

Dupliquer l’exemple d'application

1. Dans GitHub, accédez au dépôt Node.js Hello World , puis sélectionnez Fork dans le menu supérieur.

   

2. Sélectionnez votre organisation GitHub en tant que propriétaire du fork s’il n’est pas déjà sélectionné, puis sélectionnez Créer un fork.

   

Le navigateur accède à votre fork à l'URL https://github.com/<owner>/nodejs-docs-hello-world.

Créer et déployer l’application web App Service

Créez votre application web Azure App Service à l’aide de Cloud Shell dans le portail Azure. Pour utiliser Cloud Shell, connectez-vous au portail Azure et sélectionnez le bouton Cloud Shell dans la barre d’outils supérieure.

Cloud Shell apparaît le long du bas du navigateur. Vérifiez que Bash est sélectionné comme environnement dans le menu déroulant.

Créer et déployer l’application web

1. Dans Cloud Shell, clonez votre dépôt forké vers Azure avec la commande suivante, en remplaçant <your-forked-repository-url> par l'URL de votre dépôt forké.

   git clone <your-forked-repository-url>
   

2. Remplacez le répertoire par le dossier de référentiel cloné.

   cd nodejs-docs-hello-world
   

3. Exécutez la commande az webapp up pour provisionner une application web App Service et effectuer le premier déploiement. L’argument --sku F1 crée l’application web sur le niveau tarifaire Gratuit, ce qui n’entraîne aucun coût.

   L’exécution az webapp up sans name paramètre affecte automatiquement un nom d’application web généré de manière aléatoire unique dans Azure. Vous pouvez également utiliser le --name <web-app-name> paramètre pour affecter n’importe quel nom unique dans Azure, tel qu’un nom personnel ou d’entreprise avec un identificateur d’application, par exemple --name <your-name>-nodeapp.

   az webapp up --sku F1 --name <app-name>
   

La az webapp up commande reconnaît l’application en tant qu’application Node.js et effectue les actions suivantes :

1. Crée un groupe de ressources par défaut.
2. Crée un plan App Service par défaut.
3. Crée une application web avec le nom attribué et l’URL <your-web-app-name>.azurewebsites.net.
4. ZIP déploie tous les fichiers à partir du répertoire de travail actuel, avec l’automatisation de build activée.
5. Met en cache les paramètres localement dans le fichier .azure/config . Vous n’avez donc pas besoin de les spécifier à nouveau lors du déploiement à partir du dossier du projet avec az webapp up ou d’autres az webapp commandes.

Vous pouvez remplacer les actions par défaut par vos propres valeurs à l’aide des paramètres de commande. Pour plus d’informations, consultez az webapp up.

La commande génère des messages d’état au fur et à mesure qu’elle s’exécute. Une fois le site web démarré, vous pouvez sélectionner le lien vers You can launch the app at https://<your-web-app-name>.azurewebsites.net l’application web Hello World .

La az webapp up commande produit la sortie JSON suivante pour l’exemple d’application web :

{
  "URL": "<your-web-app-url>",
  "appserviceplan": "<your-app-service-plan-name>",
  "location": "<your-azure-region>",
  "name": "<your-web-app-name>",
  "os": "Linux",
  "resourcegroup": "<your-resource-group-name>",
  "runtime_version": "node|20-LTS",
  "runtime_version_detected": "10.0",
  "sku": "FREE",
  "src_path": "<repository-source-path>"
}

Créer le pipeline à partir d’un modèle

1. Dans votre projet Azure DevOps, sélectionnez Pipelines dans le menu de navigation de gauche, puis sélectionnez Nouveau pipeline ou Créer un pipeline si ce pipeline est le premier dans le projet.

2. Dans l’écran Où se trouve votre code , sélectionnez GitHub.

3. Dans l'écran Sélectionner un référentiel, sélectionnez votre référentiel dupliqué nodejs-docs-hello-world.

4. Azure Pipelines reconnaît le code en tant qu’application Node.js et suggère plusieurs modèles de pipeline sur la page Configurer votre pipeline . Sélectionnez Application web Node.js Express pour Linux sur Azure.

5. Dans l’écran suivant, sélectionnez votre abonnement Azure et sélectionnez Continuer. Cette action crée une connexion de service à vos ressources Azure.

6. Dans l’écran suivant, sélectionnez votre application web Azure, puis sélectionnez Valider et configurer. Azure Pipelines crée un fichier azure-pipelines.yml et l’affiche dans l’éditeur de pipeline YAML.

7. Dans l’écran Vérifier votre YAML de pipeline, passez en revue le code de votre pipeline.

   Le pipeline effectue les actions suivantes :

   • Définit un déclencheur à exécuter sur chaque validation dans la branche de code principale.
   • Établit et utilise des variables pour la connexion de service, l’application web, l’image de machine et l’environnement.
   • Installe Node.js sur l’agent de build et utilise npm pour exécuter et tester la build de l’application.
   • Empaquette l’application générée dans une archive ZIP et charge le fichier ZIP dans un emplacement de dépôt.
   • Déploie le package ZIP sur l’application App Service et démarre l’application.

Enregistrer et exécuter le pipeline

1. Après avoir examiné le code, sélectionnez Enregistrer et exécuter puis Enregistrer et exécuter de nouveau pour enregistrer et exécuter votre pipeline. Le fichier azure-pipelines.yml s'enregistre dans votre référentiel forké et le code est déployé sur Azure App Service.

   Remarque

   La première fois que le pipeline s’exécute, il demande l’autorisation d’accéder à l’environnement qu’il crée. Sélectionnez Autoriser pour permettre au pipeline d’accéder à l’environnement.

2. Sur la page Résumé de l’exécution, sélectionnez le travail pour consulter l’exécution de votre pipeline et suivre sa construction.

3. Une fois l’exécution réussie, sélectionnez la tâche Azure Web App Deploy , puis sélectionnez l’URL de l’application App Service pour afficher le site web déployé.

   

4. Vérifiez que le site s’exécute sur App Service à l’URL du site web déployé.

   

Exécuter une compilation CI et un déploiement

Le trigger: main mot clé configure votre pipeline pour qu’il s’exécute chaque fois qu’une modification est validée dans la main branche de votre dépôt de code forké. Pour exécuter une compilation CI :

1. Accédez à votre dépôt GitHub forké et apportez une petite modification du fichier README.md.
2. Sélectionnez Valider les modifications, puis valider à nouveau les modifications .
3. Dans Azure Pipelines, vérifiez que votre pipeline nodejs-docs-hello-world s’exécute à nouveau avec une description de Individual CI.

Nettoyer les ressources

Vous pouvez supprimer les ressources que vous avez créées pour cet article si vous n’en avez plus besoin.

• Pour supprimer les ressources Azure App Service, exécutez les commandes suivantes dans Cloud Shell. Vous devez supprimer l’application web avant de pouvoir supprimer son plan App Service, et vous devez supprimer le plan App Service avant de pouvoir supprimer son groupe de ressources.

  az webapp delete --name <web-app-name> --resource-group <resource-group-name>
  az appservice plan delete --name <app-service-plan-name> --resource-group <resource-group-name>
  az group delete --name <resource-group-name>
  

• Pour supprimer votre pipeline dans Azure Pipelines, sélectionnez le pipeline, sélectionnez l’icône Autres actions en haut à droite dans la page de pipeline, puis sélectionnez Supprimer. Pour supprimer votre projet Azure DevOps, consultez Supprimer un projet.

• Pour supprimer votre dépôt GitHub nodejs-docs-hello-world , accédez au dépôt et sélectionnez Paramètres dans la barre de menus supérieure. Faites défiler jusqu’au bas de la page, puis sélectionnez Supprimer ce référentiel.

Contenu connexe

• Personnaliser JavaScript
• Déployer sur App Service avec Azure Pipelines