Précédent

Suivant

Exercice - Ajouter un conteneur de développement à un projet existant

Effectué

Quand vous configurez le conteneur de développement d’un projet, vous devez d’abord ajouter une configuration de conteneur à ce projet. Une configuration de conteneur configure votre environnement dans Visual Studio Code.

Dans cet exercice, vous allez ajouter un conteneur de développement et ouvrir le projet de tableau de bord de produits dans le conteneur.

Ajouter un conteneur de développement

1. Revenez à VS Code et au projet que vous avez cloné.

2. Appuyez sur F1 pour ouvrir la palette de commandes.

3. Tapez add dev container et sélectionnez Dev Containers: Add Development Container Configuration Files.

4. Sélectionnez les options suivantes :

   Option	Valeur
   Sélection d’un modèle de configuration de conteneur	Python 3
   Version Python	3.11
   Sélection des fonctionnalités supplémentaires à installer	Sélectionnez OK.

Important

Lors de la première étape de choix d’un modèle de configuration, vous devrez peut-être sélectionner « Afficher toutes les définitions… » dans la liste, puis Python une fois l’ensemble complet de modèles chargé.

Une configuration de Dev Container sera ajoutée à votre projet. Visual Studio Code vous notifie que vous pouvez désormais ouvrir le projet dans un conteneur. Pour le moment, ignorez cette notification.

Inspecter les fichiers de configuration

1. Notez qu’un nouveau dossier nommé« .devcontainer » a été ajouté au projet.
2. Si vous développez ce dossier, vous pouvez remarquer qu’il contient un fichier devcontainer.json.

Ouvrir le projet dans un conteneur

1. Appuyez sur F1 pour ouvrir la palette de commandes.
2. Tapez reopen in container (rouvrir dans un conteneur).
3. Sélectionnez Dev Containers: Reopen in Container dans la liste des options disponibles.

Le conteneur commence la génération. La génération initiale peut prendre quelques minutes, car une nouvelle image doit être extraite et générée sur votre machine. Une fois que le conteneur a été généré pour la première fois, les générations suivantes sont beaucoup plus rapides.

Affichez l’indicateur distant

Une fois la génération du conteneur terminée, vous pouvez confirmer que vous êtes connecté au conteneur en regardant l’indicateur distant. Vous devez également voir maintenant vos fichiers projet chargés dans VS Code.

• Examinez l’indicateur distant en consultant l’angle inférieur gauche de VS Code. Notez qu’il affiche à présent « Dev Container: Python 3 ».

  

Important

Vous pouvez voir des notifications sur Pylance ou l’amélioration des performances sur Windows. Vous pouvez ignorer en toute sécurité les notifications que vous voyez dans VS Code. Vous n’avez pas besoin d’effectuer ces opérations.

Inspecter le conteneur

1. Pour ouvrir le terminal intégré dans Visual Studio Code s’il ne l’est pas déjà, appuyez sur Ctrl + `.

2. Notez que l’invite de terminal peut paraître différente de celle de votre invite de terminal normale.

   

3. Exécutez la commande suivante pour vérifier que Python est installé :

   python --version
   

   La sortie du terminal doit correspondre à la version de Python utilisée dans le conteneur.

Installer les dépendances du projet

• Exécutez la commande suivante dans le terminal pour installer les dépendances Flask nécessaires à l’exécution du projet :

  pip3 install --user -r requirements.txt
  

Exécuter le projet

1. Entrez la commande suivante dans le terminal pour démarrer le projet :

   python app.py
   

2. Ouvrez le projet dans un navigateur en accédant à http://127.0.0.1:5000.

   

Beau travail ! Une application web Python avec Flask s’exécute sur votre machine, alors que vous ne savez peut-être même pas ce que sont Python et Flask. Ne vous inquiétez pas, c’est tout à fait normal. Le conteneur s’occupe de la configuration de l’ensemble de l’environnement.

Dans la section suivante, vous allez apprendre à utiliser le fichier devcontainer.json pour automatiser l’installation des dépendances, et à personnaliser VS Code pour ce projet Python.

Continuer