I "Un éditeur qui ne peut pas faire de débogage à distance de Django ..." VS Code "C'est possible." ~ Édition Docker-compose ~

introduction

VS Code "Oui. Si c'est" Développement à distance "."

Je "Quoi ... quoi ..."

table des matières

Conditions préalables

VSCode "Étant donné que nous déboguerons avec docker-compose, commencez par créer l'environnement en vous référant à l'article facile à comprendre ci-dessous."

J'ai dit: "C'est du miso."

VSCode "La structure des dossiers doit être la suivante."

tree


containers
├── django
│   ├── Dockerfile
│   ├── Pipfile
│   ├── Pipfile.lock
│   ├── config
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── db.sqlite3
│   ├── entrypoint.sh
│   ├── manage.py
│   └── static
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
└── postgres
    ├── Dockerfile
    └── sql
        └── init.sql

VSCode "Hondara, ouvrez le répertoire des conteneurs Wai (VSCode)."

Je «Aiyo».

Installation de développement à distance

VSCode "Développement à distance est installé. Une marque bleue comme celle-ci apparaît en bas à gauche. Si l'installation est terminée

image1.png

Ajouter un fichier de configuration

VSCode "Ensuite, ajoutez des fichiers de configuration pour le débogage."

VS Code "Cliquez sur l'icône bleue qui apparaît."

Je «Aiyo».

VSCode "Ensuite, le menu apparaîtra ci-dessus? Sélectionnez Conteneurs distants: Ajouter les fichiers de configuration du conteneur de développement ... à partir du milieu. "

image2.png

VS Code "Après cela, sélectionnez` From'docker-compose.yml". "

image3.png

--Sélectionnez le service que vous souhaitez déboguer (Django cette fois) image4.png

VSCode "Ensuite, le répertoire .devcontainer sera créé à la racine du projet, et devcontainer.json et docker-compose.yml y seront créés, alors réécrivez devcontainer.json comme suit!"

VSCode "Si vous souhaitez utiliser cette zone dans la pratique, remplacez-la par un environnement arbitraire!"

Je suis accro au fichier de paramètres, donc je ne suis pas sûr. "

devcontainer.json


{
  //Entrez n'importe quel nom
  "name": "djnago containers",
  //Docker pour créer le conteneur auquel vous souhaitez vous connecter avec Remote-Veuillez spécifier un fichier de composition.
  "dockerComposeFile": "docker-compose-debug.yml",
  //Sélectionnez le service que vous souhaitez démarrer
  "service": "django",
  //Le premier spécifié ici lors de l'entrée dans le conteneur sera le répertoire courant
  "workspaceFolder": "/usr/src/app/",
  //Sélectionnez une coque
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  //Sélectionnez l'extension vscode
  "extensions": ["ms-azuretools.vscode-docker", "ms-python.python"],
  //Définir le comportement du conteneur lorsque vscode est fermé
  //Continuez à démarrer le conteneur avec aucun
  "shutdownAction": "none"
}

VSCode "Ensuite, réécrivez en yml pour le débogage! Modifiez le docker-compose.yml généré automatiquement dans le répertoire .devcontainer en docker-compose-debug.yml et l'existant Copiez le contenu de docker-compose.yml. "

VSCode "A ce stade, il y a trois services, django, postgres et nginx, mais comme vous n'avez pas à les livrer de nginx à chaque fois que vous déboguez, modifiez-les comme suit. Veuillez le changer comme vous le souhaitez. "

--Correction

docker-compose-debug.yml


version: '3.7'
services:
    django:
        container_name: django
        build: ../django
        command: python3 manage.py runserver 0.0.0.0:8000
        volumes:
            - ../django:/usr/src/app/
        ports:
            - 8000:8000
            #Ajouter un port pour le débogage
            - 8888:8888
        env_file:
            - ../django/.env
        depends_on:
            - postgres

    postgres:
        container_name: postgres
        build: ../postgres
        volumes:
            - sample_postgis_data:/var/lib/postgresql/data
            - ../postgres/sql:/docker-entrypoint-initdb.d
        env_file: ../postgres/.env_db
        ports:
            - 5433:5432

volumes:
    sample_postgis_data:

Démarrer le débogage à distance

VSCode "Maintenant, ce devrait être un répertoire comme celui-ci."

Je «Seyana».

tree


containers
├── .devcontainer
│   ├── devcontainer.json
│   └── docker-compose-debug.yml
├── django
│   ├── .env
│   ├── Dockerfile
│   ├── Pipfile
│   ├── Pipfile.lock
│   ├── config
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── db.sqlite3
│   ├── entrypoint.sh
│   ├── manage.py
│   └── static
├── docker-compose.yml
├── nginx
│   ├── Dockerfile
│   └── nginx.conf
└── postgres
    ├── .env_db
    ├── Dockerfile
    └── sql
        └── init.sql

VSCode "Je suis enfin en train de déboguer, mais si vous avez déjà démarré le conteneur avec docker-compose.yml, arrêtez-le temporairement. Je reconstruirai le conteneur au moment du débogage, mais le fichier yml d'origine est le même Parce que j'utilise, les noms sont en conflit et il devient difficile de bien démarrer. "

VSCode "Après avoir confirmé l'arrêt, appuyez sur l'icône bleue ci-dessous, puis cliquez surRemote-Containers: Open Folder in Containers ..., et le répertoire où .devcontainer existe ( containers dans cet exemple) Veuillez sélectionner. "

image5.png

VSCode "Au fait, si le conteneur est déjà démarré, vous pouvez vous connecter au conteneur qui est déjà en cours d'exécution en sélectionnant" Conteneurs distants: Attacher aux conteneurs en cours d'exécution ... ", mais les paramètres créés dans" devcontainer.json "sont reflétés. Veuillez noter que l'extension ne sera pas installée. "

I "C'est aussi un point addictif. Memo Memo ..."

VSCode "Lorsque vous sélectionnez un répertoire, une nouvelle fenêtre s'ouvre et l'affichage suivant apparaît en bas à droite de l'écran. Attendez un moment pendant que le conteneur est en cours d'exécution."

J'ai dit: "C'est assez long. Soyons patients. Je déteste l'impatience."

VSCode "En passant, si vous cliquez sur" Démarrer avec Dev Container "en lettres bleues, vous pouvez voir le journal du processus requis pour démarrer le conteneur en temps réel. Si une erreur se produit, il s'arrêtera, mais vous pouvez voir ce qui ne va pas avec ce journal."

VSCode "Eh bien, généralement le chemin est incorrect ou le nom est en conflit."

image6.png

VSCode "Lorsqu'il démarre en toute sécurité, le répertoire à l'intérieur du conteneur est affiché, et le shell ouvre également le répertoire spécifié en tant que répertoire courant, et vous pouvez confirmer qu'il est attaché au conteneur démarré."

image7.png

VS Code "Extension installée."

J'ai dit: "En premier lieu, vous devez écrire explicitement l'extension que vous souhaitez installer dans devcontainer.json ..."

image8.png

Lancer le débogage

VSCode "Cliquez sur l'icône Exécuter et déboguer et cliquez sur créer un fichier launch.json ..."

image9.png

VSCode "Cliquez ensuite sur Docker Debug ins Container ..."

image10.png

VSCode "L'écran d'édition de launch.json s'ouvre, alors éditez-le comme suit et terminez!"

launch.json


{
    "version": "0.2.0",
    "configurations": [
        {
            //Afficher un nom
            "name": "django container",
            //Langue
            "type": "python",
            //Comportement lors du débogage. Outre l'exécution
            "request": "launch",
            //Chemin d'accès au fichier pour travailler
            "program": "${workspaceFolder}/manage.py",
            //Sélectionnez le terminal à utiliser pour le débogage. Vous pouvez également lancer un terminal en dehors de VS Code
            "console": "integratedTerminal",
            //Arguments lors de l'exécution du programme
            "args": [
                "runserver",
                "--noreload",
                "0.0.0.0:8888"
            ],
            "django": true
        }
    ]
}

VSCode "Sélectionnez l'interpréteur en bas à gauche de l'écran pour exécuter le programme à la fin (dans cet exemple, sélectionnez python3.8)"

image11.png

VSCode "Lorsque tous les paramètres sont terminés, les éléments de Exécuter et déboguer seront les suivants, et en cliquant sur l'icône du triangle vert comme le bouton de lecture, déboguer avec le 0.0.0.0: 8888 spécifié Le serveur va démarrer. "

image12.png

VSCode "Si vous vous connectez à localhost: 8888 depuis le navigateur après avoir appuyé sur le bouton, vous devriez pouvoir voir l'écran habituel."

Je «honmaya».

image13.png

VSCode "Après cela, si vous définissez un point d'arrêt à l'endroit où vous souhaitez déboguer et accéder à l'URL où la fonction avec le point d'arrêt est exécutée à partir du navigateur, etc., vous pouvez voir le contenu de la requête et vérifier les variables sur VScode. Fais le! "

VSCode "Si vous recherchez" VSCode Debug "sur Google, il y aura de nombreuses méthodes détaillées, alors vérifiez-le!"

J'ai dit: "VS Code Dieu!

Oshimai

Recommended Posts

I "Un éditeur qui ne peut pas faire de débogage à distance de Django ..." VS Code "C'est possible." ~ Édition Docker-compose ~
Déboguer à distance l'environnement Django créé avec docker-compose avec VS Code