Configurer votre environnement de développement JavaScript local pour Azure

Lors de la création d’applications cloud, les développeurs préfèrent généralement tester le code sur leurs stations de travail locales avant de le déployer dans un environnement cloud comme Azure. Le développement local vous offre l’avantage d’un choix plus large d’outils ainsi qu’un environnement qui vous est familier.

Cet article fournit des instructions de configuration pour créer et valider un environnement de développement local adapté pour JavaScript avec Azure.

Création unique d’un abonnement

Les ressources Azure sont créées dans un abonnement et un groupe de ressources.

Type	Description
Abonnement d’évaluation	Créez un abonnement d’essai gratuit.
Abonnements existants	Si vous disposez déjà d’un abonnement, accédez à votre abonnement existant dans le portail Azure, dans Azure CLI ou dans les SDK Azure pour JavaScript.
Sur plusieurs abonnements	Si vous devez gérer plusieurs abonnements, découvrez comment créer un groupe d’administration avec JavaScript.

Installation unique de logiciels

Pour du développement Azure avec JavaScript sur votre station de travail locale, nous vous suggérons d’installer les éléments suivants :

Nom/programme d’installation	Description
Node.js LTS	Installez l’environnement d’exécution LTS (Long Term Support) le plus récent pour le développement sur station de travail locale.
Visual Studio Code	Visual Studio Code vous offre une bonne expérience d’intégration et de codage de JavaScript, mais ce n’est pas obligatoire. Vous pouvez utiliser n’importe quel éditeur de code.

Runtime d’hébergement Azure

Si vous prévoyez d’utiliser une ressource Azure comme environnement d’hébergement pour votre application, par exemple une application web Azure ou Azure Functions, vous devez vérifier que la version du runtime de votre environnement de développement Node.js local correspond au runtime de la ressource Azure que vous prévoyez d’utiliser.

Installations locales recommandées

Les installations sur station de travail locale courantes suivantes sont recommandées pour faciliter vos tâches de développement local.

Nom	Description
Azure CLI	Interface CLI locale ou cloud pour créer et utiliser des ressources Azure.
Azure Developer CLI	Outil en ligne de commande centré sur les développeurs pour la création d’applications cloud dans le flux de travail des développeurs.
Extensions Visual Studio Code pour Azure	Extensions VS Code pour l’IDE.
Git ou Git pour Windows	Outils en ligne de commande pour le contrôle de code source. Vous pouvez utiliser d’autres outils de contrôle de code source si vous le souhaitez.

Configuration unique pour l’authentification

Pour utiliser le même code d’authentification dans le développement local et dans l’environnement d’hébergement Azure distant, utilisez DefaultAzureCredential.

Créer un groupe de ressources pour votre projet

Azure portal

1. Ouvrez le portail Azure dans un navigateur web.

2. Dans la barre de recherche, entrez des groupes de ressources et sélectionnez-le.

3. Sélectionnez + Créer.

4. Entrez les paramètres de votre groupe de ressources :

   Propriété	Valeur
   Abonnement	Sélectionnez votre abonnement.
   Resource group	Entrez le nom de votre groupe de ressources. Ce nom de groupe de ressources est utilisé dans le cadre d’un URI de ressources lorsque vous accédez au Gestionnaire de ressources (plan de gestion). Le nom n’est pas utilisé pour le contrôle (par exemple, la création d’une base de données) ou le plan de données (insertion de données dans une table).
   Région	Sélectionnez une région géographique pour le groupe de ressources.

5. Sélectionnez Vérifier + créer pour commencer la validation.

6. Lorsque la validation réussit, sélectionnez Créer.

Visual Studio Code

1. Ouvrez la palette de commandes, Ctrl + Maj + P.

2. Recherchez un groupe de ressources et sélectionnez-le.

3. Répondez aux invites à l’aide des paramètres suivants :

   Prompt	Valeur
   Sélectionner un abonnement	Connectez-vous à Azure si vous y êtes invité. Sélectionnez un abonnement existant ou créez un compte Azure si vous n’en avez pas.
   Entrer le nom du nouveau groupe de ressources	Entrez le nom de votre groupe de ressources. Ce nom de groupe de ressources est utilisé dans le cadre d’un URI de ressources lorsque vous accédez au Gestionnaire de ressources (plan de gestion). Le nom n’est pas utilisé pour le contrôle (par exemple, la création d’une base de données) ou le plan de données (insertion de données dans une table).
   Sélectionnez un emplacement pour les nouvelles ressources.	Sélectionnez une région géographique pour le groupe de ressources.

Azure CLI

1. Connexion à Azure :

   az login
   

   Terminez l’authentification dans un navigateur.

2. Répertoriez les noms et ID de votre abonnement. Copiez la valeur SubscriptionId pour utiliser la commande suivante.

   az account subscription list --output table 
   

3. Définissez votre abonnement par défaut, utilisé par les commandes suivantes :

   az account set --subscription YOUR_SUBSCRIPTION_ID
   

4. Sélectionnez une liste d’emplacements pris en charge pour votre abonnement. Copiez la valeur Name d’une région proche de vous.

   az account list-locations --output table
   

5. Utilisez l’interface de ligne de commande Azure suivante pour créer un groupe de ressources avec le nom ou l’ID de votre abonnement :

   az group create --name "YOUR_RESOURCE_GROUP_NAME" --location YOUR_REGION
   

   Par exemple :

   az group create --name "my-azure-app" --location westus
   

Utilisation d’Azure et des bibliothèques clientes du SDK Azure

Les bibliothèques de SDK Azure sont fournies individuellement pour chaque service. Vous installez chaque bibliothèque en fonction du service Azure que vous devez utiliser.

Chaque nouveau projet utilisant Azure doit :

• Créer des ressources Azure et enregistrer les clés ou la configuration associées dans un emplacement sécurisé.
• Installer les bibliothèques du SDK Azure à partir de NPM ou de Yarn.
• Utilisez les informations d’identification de votre principal de service pour vous authentifier auprès du SDK Azure, puis utilisez les informations de configuration pour accéder à des services spécifiques.

Sécurisation des informations de configuration

Vous disposez de plusieurs options pour stocker les informations de configuration :

• Azure Key Vault pour créer et gérer les clés qui accèdent à vos ressources, applications et solutions cloud, et qui les chiffrent.
• Dotenv est un package npm courant permettant de lire des variables d’environnement à partir d’un fichier .env. Veillez à ajouter le fichier .env au fichier .gitignore, de façon à ce que le fichier .env ne fasse pas l’objet d’un check-in dans le contrôle de code source. Découvrez-en plus sur les variables d’environnement dans les applications web pour Azure.

Créer des variables d’environnement pour les bibliothèques Azure

Pour utiliser les paramètres Azure nécessaires aux bibliothèques du SDK Azure pour accéder au cloud Azure, définissez les valeurs les plus courantes dans des variables d’environnement. Les commandes suivantes définissent les variables d’environnement pour la station de travail locale.

Dans les exemples suivants, l’ID client est l’ID du principal de service et le secret du principal de service.

bash

AZURE_SUBSCRIPTION_ID="<REPLACE-WITH-YOUR-AZURE-SUBSCRIPTION-ID>"
AZURE_TENANT_ID="<REPLACE-WITH-YOUR-AZURE-TENANT-ID>"
AZURE_CLIENT_ID="<REPLACE-WITH-YOUR-AZURE-CLIENT-ID>"
AZURE_CLIENT_SECRET="<REPLACE-WITH-YOUR-AZURE-CLIENT-SECRET>"

cmd

set AZURE_SUBSCRIPTION_ID="<REPLACE-WITH-YOUR-AZURE-SUBSCRIPTION-ID>"
set AZURE_TENANT_ID="<REPLACE-WITH-YOUR-AZURE-TENANT-ID>"
set AZURE_CLIENT_ID="<REPLACE-WITH-YOUR-AZURE-CLIENT-ID>"
set AZURE_CLIENT_SECRET="<REPLACE-WITH-YOUR-AZURE-CLIENT-SECRET>"

Remplacez les valeurs indiquées dans ces commandes par celles de votre principal de service spécifique.

Créer un fichier .env

Un autre mécanisme courant consiste à utiliser le package NPM DOTENV pour créer un fichier .env destiné à ces paramètres. Si vous prévoyez d’utiliser un fichier .env, veillez à ne pas effectuer de check-in du fichier dans le contrôle de code source. Ajouter le fichier .env au fichier .ignore de Git est la méthode standard pour garantir que ces paramètres font l’objet d’un check-in dans le contrôle de code source.

Installer les packages npm

Pour chaque projet, nous vous recommandons de toujours créer un dossier distinct et son propre fichier package.json en effectuant les étapes suivantes :

1. Ouvrez un terminal, une invite de commandes ou un shell Bash, et créez un dossier pour le projet. Accédez ensuite à ce nouveau dossier.

   mkdir MY-NEW-PROJECT && cd MY-NEW-PROJECT
   

2. Initialisez le fichier du package :

   npm init -y
   

   Ceci crée le fichier package.json et initialise les propriétés minimales.

3. Installez les bibliothèques du SDK Azure dont vous avez besoin, comme dans cet exemple :

   npm install @azure/ai-text-analytics@5.0.0
   

Utiliser le contrôle de code source avec Visual Studio Code

Nous vous recommandons de prendre l’habitude de créer un référentiel de contrôle de code source chaque fois que vous démarrez un projet. Vous pouvez le faire à partir de Visual Studio Code.

1. Dans Visual Studio Code, sélectionnez l’icône du contrôle de code source pour ouvrir l’Explorateur du contrôle de code source, puis sélectionnez Initialiser le dépôt pour initialiser un dépôt Git local :

   

2. Une fois que vous avez initialisé le dépôt et que vous avez des fichiers à stocker dans le contrôle de code source, entrez le message Initial commit et cochez la case pour créer la validation initiale de vos fichiers sources.

   

3. Créez un dépôt sur GitHub ou Azure DevOps, et copiez l’URL du dépôt pour les étapes suivantes.

4. Dans le terminal intégré de Visual Studio, utilisez la commande git suivante pour ajouter votre dépôt distant à votre dépôt local. Remplacez YOUR-ALIAS et YOUR-REPOSITORY par vos propres valeurs.

   git remote add origin https://github.com/YOUR-ALIAS/YOUR-REPOSITORY
   

Visual Studio Code inclut de nombreuses fonctionnalités Git intégrées. Pour plus d’informations, consultez Utilisation de la gestion de version dans VS Code.

Étapes suivantes

• Créer et utiliser un principal de service
• S’authentifier auprès des modules Azure pour Node.js