Vue d’ensemble du déploiement de l’application JavaScript sur Azure

Pour déployer votre application JavaScript sur Azure, vous déplacez un fichier ou un ensemble de fichiers vers Azure à servir via un point de terminaison HTTP. Le processus de déplacement des fichiers est appelé déploiement.

Conditions préalables

• Abonnement Azure - en créer un gratuitement.
• Node.js LTS.
• Un compte GitHub si vous envisagez de déployer à partir d’un dépôt GitHub.

Outils de déploiement

Azure offre différents outils de déploiement pour répondre à différents besoins. Voici quelques méthodes courantes :

D’autres outils de déploiement existent, en fonction du service spécifique. Par exemple, Azure App Service prend en charge un large éventail d’outils de déploiement :

• À partir d’un fichier ZIP
• Avec FTP
• Dropbox ou OneDrive
• Git local
• cURL
• SSH

Vous pouvez effectuer un redéploiement vers votre App Service à l’aide de l’une des méthodes fournies, même si vous n’avez pas utilisé cette méthode pour effectuer le déploiement initial. Vous devrez peut-être effectuer une certaine configuration avant de redéployer si vous passez d’une méthode à une autre.

Services d’hébergement Azure pour les applications JavaScript

Commencez par choisir le service d’hébergement qui correspond le mieux à votre application. Une fois que vous avez choisi un service, utilisez le chemin de déploiement recommandé pour accéder au didacticiel approprié plus rapidement.

Pour plus d’informations sur le choix du service d’hébergement approprié, consultez Hébergement d’applications sur Azure.

Méthodes de déploiement avec des outils

Après avoir choisi un service d’hébergement, choisissez la méthode de déploiement qui correspond à votre fonctionnement.

• Générer avant le déploiement: pour des builds complexes ou longues, empaquetez votre application dans un fichier zip et déployez-la. Un package de déploiement vous permet de contrôler et de tester la build avant le déploiement.
• Générer pendant le déploiement: pour des builds plus simples, utilisez la variable d’environnement fournie par Azure SCM_DO_BUILD_DURING_DEPLOYMENT=true pour générer votre application pendant le déploiement.

Si vous effectuez un déploiement sur App Service, d’autres méthodes de déploiement sont également disponibles :

Emplacements de déploiement dans Azure App Service vous permettent de créer des environnements séparés pour la préproduction et la production. L’utilisation des emplacements vous permet de tester votre application dans un environnement intermédiaire avant de l’échanger avec l’emplacement de production, ce qui garantit un déploiement sans erreur et fluide. En savoir plus sur les emplacements de déploiement.

N’utilisez pas les emplacements de déploiement pour mélanger les objets du déploiement. Tous les emplacements de déploiement partagent le service d’application afin de vous assurer que les modèles de trafic et l’utilisation prévue de tous les emplacements sont identiques. Si vous devez disposer d’un environnement de test ou d’étape hébergé qui doit être un service d’application distinct.

Déployer avec Azure Developer CLI

Pour le chemin d’accès de bout en bout le plus rapide au provisionnement de ressources Azure et au déploiement de votre application, commencez par l’interface CLI Azure développeur (azd).

L’interface CLI Azure développeur simplifie le processus de déploiement de votre application sur Azure. Procédez comme suit :

1. Installez l'interface de programmation Azure Developer CLI.

2. Recherchez un projet existant qui utilise la plupart des mêmes ressources que celles utilisées par votre projet.

3. Initialisez une version locale du projet à utiliser comme modèle d’infrastructure pour votre propre projet.

4. Créez les ressources et déployez le code sur Azure.

   azd auth login
   azd init --template <template-name>
   azd up
   

Utilisez ce chemin lorsque vous souhaitez un flux de travail pour l’infrastructure, le déploiement et les environnements reproductibles.

Déployer avec Visual Studio Code

Si vous souhaitez un flux de déploiement guidé dans votre éditeur, utilisez les extensions Azure pour Visual Studio Code.

Pour déployer ou redéployer votre application App Service à l’aide de Visual Studio Code, procédez comme suit :

1. Installez les extensions Azure associées, telles que Azure App Service ou Azure Functions.

2. Ouvrez l’Explorateur Azure. Sélectionnez l’icône Azure dans la barre latérale principale ou utilisez le raccourci clavier (Maj + Alt + A).

3. Dans le groupe de ressources, sélectionnez votre abonnement et votre service.

4. Cliquez avec le bouton droit sur votre service, puis sélectionnez Déployer sur l’application web....

   

Étapes suivantes spécifiques au service

Après avoir choisi un service d’hébergement et une méthode de déploiement, poursuivez avec le chemin spécifique au service qui correspond à votre application.

Déployer sur Azure Static Web Apps

Azure Static Web Apps est idéal pour les applications web modernes créées avec des infrastructures JavaScript. Pour déployer :

1. Installez l’extension Azure Static Web Apps pour Visual Studio Code.
2. Générez votre application localement pour vous assurer qu’elle fonctionne comme prévu.
3. Dans Visual Studio Code, ouvrez l’explorateur Azure et recherchez Azure Static Web Apps.
4. Cliquez avec le bouton droit sur votre abonnement, puis sélectionnez Créer une application web statique.
5. Suivez les instructions pour connecter votre référentiel GitHub. Azure crée automatiquement un workflow GitHub Actions.
6. Envoyez des modifications à votre référentiel pour déclencher des déploiements automatiques.

Pour plus d’informations, consultez Déployer votre application web sur Azure Static Web Apps.

Déployer dans Azure App Service

Azure App Service convient parfaitement lorsque vous avez besoin d’un hébergement géré pour une application web ou une API. Vous pouvez effectuer un déploiement à l’aide azdde Visual Studio Code, de Azure CLI ou de GitHub Actions.

Vous pouvez effectuer un redéploiement vers votre App Service à l’aide de l’une des méthodes disponibles, même si vous n’avez pas utilisé cette méthode pour effectuer le déploiement initial. Vous aurez peut-être besoin d’une configuration avant de redéployer si vous changez de méthode.

Pour un chemin de déploiement spécifique au service, commencez par l’un des tutoriels suivants :

• Déployer une application web Node.js et MongoDB sur Azure App Service
• Déployer sur App Service à l’aide de GitHub Actions
• Déployer sur App Service à partir de packages ZIP

Déployer avec Azure CLI

Pour déployer votre application JavaScript à l’aide du Azure CLI, procédez comme suit :

1. Installez le Azure CLI si vous ne l'avez pas déjà.

2. Connectez-vous à votre compte Azure.

   az login
   

3. Créez ou utilisez un plan App Service existant et un service d’application.

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. Déployez votre code d’application en tant que fichier ZIP ou à partir d’un dépôt Git local.

   Pour le déploiement ZIP :

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   Pour le déploiement Git local :

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

Déployer avec GitHub Actions

GitHub Actions automatise votre processus de déploiement chaque fois que vous envoyez des modifications à votre dépôt GitHub. Pour configurer GitHub Actions pour le déploiement de Azure :

1. Dans votre référentiel GitHub, créez un .github/workflows/ répertoire s'il n'existe pas.

2. Créez un fichier de flux de travail (par exemple) azure-deploy.ymlqui définit vos étapes de déploiement.

3. Utilisez une action de connexion Azure pour vous authentifier auprès de Azure. Recommandé: Utilisez OpenID Connect (OIDC) pour renforcer la sécurité au lieu de stocker les informations d’identification en tant que secrets.

   Option A : OpenID Connect (recommandé)

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   Pour obtenir des instructions d’installation, consultez Configurer OpenID Connect avec GitHub Actions.

   Option B : Authentification basée sur les informations d’identification (héritée)

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. Ajoutez les étapes de déploiement appropriées pour votre service d’hébergement (App Service, Static Web Apps ou Container Apps).

5. Validez et envoyez (push) le fichier de flux de travail à votre référentiel pour activer les déploiements automatiques.

Pour obtenir des instructions plus détaillées, consultez Déployer avec GitHub Actions.

Déployer sur Azure Functions

Azure Functions convient parfaitement aux applications JavaScript pilotées par les événements et aux API serverless.

Pour effectuer le déploiement à partir de Visual Studio Code :

1. Installez l’extension Azure Functions.
2. Ouvrez l’explorateur Azure, puis sélectionnez votre abonnement Azure.
3. Créez ou sélectionnez votre application de fonction.
4. Utilisez les commandes d’extension pour publier votre projet local.

Pour obtenir des conseils sur le service, consultez Azure Functions documentation et vue d’ensemble de Functions.

Déployer sur Azure Container Apps

Azure Container Apps fournit un hébergement de conteneurs serverless pour les applications JavaScript. Pour déployer :

1. Conteneurisez votre application à l’aide de Docker. Créez un(e) Dockerfile dans le répertoire racine de votre projet.
2. Générez et testez votre conteneur localement.
3. Envoyez votre image conteneur à Azure Container Registry.
4. Utilisez l’extension Azure Container Apps ou Azure CLI pour créer et déployer votre application conteneur.

Pour obtenir un guide complet, consultez la vue d’ensemble de JavaScript sur Azure Container Apps.

Étapes de génération

Une fois que vous avez choisi votre service et votre méthode de déploiement, décidez quand la compilation doit avoir lieu.

En fonction de la complexité et des besoins de déploiement de votre application, vous pouvez choisir de créer votre application JavaScript avant ou pendant le déploiement :

• Générer avant le déploiement: pour des builds complexes ou longues, empaquetez votre application dans un fichier zip et déployez-la. Un package de déploiement vous permet de contrôler le processus de génération et de le tester avant le déploiement.
• Générer pendant le déploiement : pour des builds plus simples, utilisez la variable SCM_DO_BUILD_DURING_DEPLOYMENT=true d’environnement fournie Azure pour générer votre application pendant le déploiement.

Emplacements de déploiement

Utilisez des emplacements de déploiement une fois que vous disposez d’une application App Service déjà en cours d’exécution et que vous avez besoin d’un processus de déploiement plus sûr.

Emplacements de déploiement dans Azure App Service vous permettent de créer des environnements séparés pour la préproduction et la production. En utilisant des slots de déploiement, vous pouvez tester votre application dans un environnement de préproduction avant de le permuter avec le slot de production, ce qui garantit un déploiement fluide et sans erreur.

N’utilisez pas les emplacements de déploiement pour mélanger les objets du déploiement. Tous les emplacements de déploiement partagent l’App Service. Vous devez donc vous assurer que les modèles de trafic et l’utilisation prévue de tous les emplacements sont identiques. Si vous avez besoin d’un environnement de test ou de phase hébergé, utilisez un app Service distinct.

Se connecter à votre environnement hébergé Azure

• Pour un accès manuel ou occasionnel à vos environnements hébergés, consultez la rubrique qui vous explique comment afficher des fichiers dans votre environnement hébergé sur Azure.
• Pour un accès automatisé ou cohérent ou, envisagez de prendre les mesures nécessaires pour configurer l'une des méthodes de déploiement.

Afficher les fichiers dans un environnement hébergé Azure

Il existe plusieurs façons de voir immédiatement les fichiers dans votre application web Azure hébergée ou l’application de fonction. Si vous utilisez des emplacements dans votre ressource hébergée, vous devez vous assurer que vous êtes sur l’emplacement approprié avant d’afficher les fichiers.

• Affichez les fichiers dans portail Azure : sélectionnez console sous Outils de développement pour votre ressource d’hébergement.

• Afficher les fichiers dans l’extension VS Code : sélectionnez l’icône Azure dans la barre d’activité. Dans la section Ressources, sélectionnez votre abonnement et votre service. Le nœud Files fournit une vue de vos fichiers distants.

  • Azure App Service et les extensions Azure Functions fournissent tous deux une vue des fichiers distants.

  

Afficher le point de terminaison HTTP dans le portail Azure

Affichez votre point de terminaison HTTP à partir de la page Vue d’ensemble du service sur le portail Azure.

Contenu connexe

• didacticiels de déploiement à l’aide de Visual Studio Code
• Hébergement d’applications sur Azure
• Documentation de Azure Static Web Apps
• Documentation des Azure Container Apps
• Documentation de Azure App Service
• Documentation d’Azure Functions