Développement Python dans VSCode à l'aide de Devcontainer

Développement Python dans VSCode à l'aide de Devcontainer

Dans ce guide, nous vous guiderons à travers les étapes de configuration et d'utilisation du devcontainer-python-template pour le développement Python dans un environnement de développement basé sur Docker à l'aide de Visual Studio Code (VSCode). Ce modèle vous permet d'être opérationnel rapidement avec un projet Python dans un devcontainer.

Au lieu de cloner directement le référentiel, vous créerez votre propre référentiel basé sur le modèle, afin de pouvoir renvoyer vos modifications vers votre propre référentiel.

1. Créez un nouveau référentiel à partir du modèle

• Accédez au référentiel devcontainer-python-template : https://github.com/jdevto/devcontainer-python-template.
• Cliquez sur le bouton Utiliser ce modèle, situé en haut à droite de la page du référentiel.
• Sélectionnez Créer un nouveau référentiel.
• Remplissez les détails du référentiel :
  • Nom du référentiel : choisissez un nom pour votre nouveau projet, par exemple, python-flask-web-app.
  • Description : Ajoutez éventuellement une description de votre référentiel.
  • Visibilité : Choisissez si votre référentiel sera public ou privé.
  • Propriétaire : (Facultatif) Si vous créez le référentiel sous une organisation, choisissez le propriétaire approprié (votre compte ou une organisation).
• Cliquez sur Créer un référentiel à partir d'un modèle.

Cela créera un nouveau référentiel sur votre compte GitHub, initialisé avec le contenu du devcontainer-python-template.

2. Clonez votre nouveau référentiel localement

• Maintenant que vous avez créé un nouveau référentiel, ouvrez VSCode.
• Clonez votre référentiel nouvellement créé sur votre machine locale :

git clone git@github.com:jdevto/python-flask-web-app.git
cd python-flask-web-app

C'est toujours une bonne pratique de créer une branche et de travailler à partir de celle-ci.

git clone git@github.com:jdevto/python-flask-web-app.git
cd python-flask-web-app

3. Ouvrez le référentiel dans VSCode et démarrez le Devcontainer

• Ouvrez le référentiel dans VSCode :
  • Après avoir cloné votre référentiel, ouvrez-le dans Visual Studio Code.
  • Dans le menu VSCode, accédez à la barre d'activité et cliquez sur Explorateur distant.
  • Sélectionnez Rouvrir dans le conteneur. Cela construira et lancera le conteneur de développement (devcontainer) défini dans le dossier .devcontainer.
• Que se passe-t-il pendant l'installation : VSCode :
  • Construisez le conteneur Docker comme spécifié dans le fichier de configuration devcontainer.json.
  • Installez toutes les dépendances (par exemple, les packages Python) répertoriées dans le fichier Requirements.txt ou d'autres fichiers de projet.
  • Ouvrez le projet dans un environnement de développement propre et isolé à l'intérieur du conteneur.
• Résultat en cas d'installation réussie : si l'installation de .devcontainer réussit, vous devriez voir un résultat similaire à celui-ci :

git branch dev
git checkout dev

• Ouvrez le terminal :

  • Fermez et rouvrez le terminal dans la même fenêtre VSCode.
  • Vous devriez voir une invite comme celle-ci :

    Running the postCreateCommand from devcontainer.json...
  
    [7382 ms] Start: Run in container: /bin/sh -c .devcontainer/scripts/postCreate.sh
    Linux 726a838654fd 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov  6 17:42:15 UTC 2 x86_64 GNU/Linux
    Done. Press any key to close the terminal.
  

4. Vérifiez que Python fonctionne

Avant de continuer, assurez-vous que Python fonctionne correctement dans le devcontainer :

• Ouvrez le terminal intégré dans VSCode.
• Exécutez la commande suivante pour vérifier la version de Python :

root ➜ /workspaces/python-flask-web-app (main) $

• Vous devriez voir un résultat tel que :

  python --version

5. Exécutez le script de test Python

Le modèle comprend un simple script de test situé sur hello/main.py. Exécutez ce script pour valider la configuration et vous assurer que Python s'exécute correctement :

• Dans le terminal, exécutez le script de test :

  Python 3.12.7

• Résultat attendu :

  python hello/main.py

6. Nettoyage

Une fois que vous avez confirmé que Python fonctionne et que le script de test s'exécute avec succès :

• Supprimez le script de test : si vous n'avez plus besoin du script de test, supprimez le répertoire hello :

  Hello, Devcontainer!

• Mettez à jour le fichier LICENSE comme vous le souhaitez

7. Développement d'applications Web Flask

• Mettez à jour le fichier README.md avec le contenu suivant :

  rm -rf hello

• Créer le répertoire du projet

  • Créez un dossier pour contenir votre projet.

    # python-flask-web-app
  
    A simple demo showcasing a Python Flask web application running in a VSCode development container. This setup is designed to provide an isolated, portable, and consistent environment for Python development.
  

• Configurer un environnement virtuel

  • Configurez un environnement virtuel Python pour gérer les dépendances.

  mkdir flask-web-app
  cd flask-web-app
  

• Installer Flask

  • Installez Flask dans l'environnement virtuel.

  python -m venv venv
  source venv/bin/activate
  

  • Créez un fichier exigences.txt pour suivre les dépendances.

  pip install flask
  

• Créer l'application

  • Créez le fichier app.py.

  git clone git@github.com:jdevto/python-flask-web-app.git
  cd python-flask-web-app
  

  • Mettez à jour le fichier app.py avec le contenu suivant :

  git branch dev
  git checkout dev
  

• Exécutez l'application

  • Exécutez l'application pour valider la configuration.

    Running the postCreateCommand from devcontainer.json...
  
    [7382 ms] Start: Run in container: /bin/sh -c .devcontainer/scripts/postCreate.sh
    Linux 726a838654fd 6.8.0-49-generic #49~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Nov  6 17:42:15 UTC 2 x86_64 GNU/Linux
    Done. Press any key to close the terminal.
  

  • Vous devriez voir quelque chose comme ceci :

  root ➜ /workspaces/python-flask-web-app (main) $
  

  • Ouvrez http://127.0.0.1:5000 dans votre navigateur. Vous devriez voir "Bonjour tout le monde !".

• Élargir la structure du projet

Au fur et à mesure que l'application évolue, ajoutez une structure de répertoires qui prend en charge les modèles, les fichiers statiques et les tests.

• Créez la structure suivante :
  

    python --version
  

  Python 3.12.7

• Mettre à jour le fichier base.html avec le contenu suivant :
  

    python hello/main.py
  

• Exécutez à nouveau l'application Flask
  Exécutez à nouveau l'application pour tester la version mise à jour.
  

    Hello, Devcontainer!
  

• Ouvrez un navigateur et accédez à http://127.0.0.1:5000.

• Vous devriez voir quelque chose comme ceci :
  

    rm -rf hello
  

  • Nettoyage de l'environnement Lorsque vous avez terminé de tester et d'exécuter l'application Flask :

• Arrêtez le serveur Flask

  • Appuyez sur Ctrl C dans le terminal où l'application Flask est exécutée. Cela mettra fin au processus du serveur.

• Quitter l'environnement de développement

  • Dans VSCode, appuyez sur Ctrl Shift P (ou Cmd Shift P sur macOS) pour ouvrir la palette de commandes.
  • Tapez Rouvrir le dossier en SSH et sélectionnez l'option. Cela garantit que vous êtes hors du conteneur de développement et que vous revenez à votre environnement local, permettant une intégration transparente des flux de travail pour toute tâche supplémentaire en dehors du conteneur.

8. Poussez la branche vers GitHub

• Exécuter

  # python-flask-web-app

  A simple demo showcasing a Python Flask web application running in a VSCode development container. This setup is designed to provide an isolated, portable, and consistent environment for Python development.

9. Créer une Pull Request (PR)

Accédez à votre référentiel sur GitHub

• Visitez votre référentiel sur GitHub.

Allez dans l'onglet "Pull Requests"

• Cliquez sur l'onglet "Pull Requests" en haut de la page du référentiel.

Créer une nouvelle demande de tirage

• Cliquez sur le bouton « Nouvelle demande de tirage ».

Sélectionnez les succursales pour le PR

• Branche de base : Choisissez la branche dans laquelle vous souhaitez fusionner (par exemple, principale ou production).
• Comparer la branche : sélectionnez la branche que vous venez de pousser (par exemple, dev).

Création d'une demande de tirage ouverte

• Cliquez sur "Créer une demande de tirage".

Examinez les modifications

• Examinez la liste des commits et des fichiers modifiés pour vous assurer que tout semble correct.

Ajouter un titre et une description

• Fournissez un titre concis et descriptif (par exemple, feat : update template dev).

• Ajoutez une description avec tous les détails nécessaires (par exemple, les raisons des modifications, les références aux problèmes, etc.).

Finaliser la Pull Request

• Cliquez à nouveau sur « Créer une demande de tirage » pour confirmer.

Examiner et approuver le PR

• Examinez vous-même vos modifications ou demandez des avis à vos coéquipiers.

Fusionner la Pull Request

• Une fois que tout semble bon, accédez au PR et cliquez sur « Merge Pull Request ».
• Confirmez la fusion en cliquant sur "Confirmer la fusion".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!