I "An editor that can't do remote debugging of Django ..." VS Code "That's possible." ~ Docker-compose edition ~

Introduction

VS Code "Yes. If it's Remote Development. "

I "What ... what ..."

table of contents

-Prerequisites -[Install Remote Development](Install # remote-development) -[Add configuration file](#Add configuration file) --[Start Remote Debugging](#Start Remote Debugging) --[Start Debugging](#Start Debugging)

Prerequisites

VS Code "Because I'm going to debug with docker-compose, first build the environment by referring to the easy-to-understand article below."

I said, "Miso in the foreground."

-Rebuild Django's development environment with Docker! !! !! !!

VS Code "The folder structure should be as follows."

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, open the containers directory Wai (VSCode)."

I "Aiyo."

Remote Development installation

Install VS Code "Remote Development. You should see a blue mark like this in the lower left corner. If installation is complete

Add configuration file

VS Code "Next, I'll add a configuration file for debugging."

VS Code "Click on the blue icon that comes out."

I "Aiyo."

VS Code "Then the menu will appear above? SelectRemote-Containers: Add Development Container configuration Files ...from the middle."

VS Code "After that, select From'docker-compose.yml'. "

--Select the service you want to debug (Django this time)

VSCode "Then you will have a .devcontainer directory in the root of your project, and devcontainer.json and docker-compose.yml in it, so rewrite devcontainer.json as follows!"

VS Code "If you want to use this area in practice, replace it with any environment!"

I'm addicted to the configuration file, so I'm not sure. "

devcontainer.json

{
  //Enter any name
  "name": "djnago containers",
  //Docker for creating the container you want to log in with Remote-Please specify a compose file.
  "dockerComposeFile": "docker-compose-debug.yml",
  //Select the service you want to start
  "service": "django",
  //The first thing you specify here when you enter the container will be the current directory
  "workspaceFolder": "/usr/src/app/",
  //Select a shell
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  //Select vscode extension
  "extensions": ["ms-azuretools.vscode-docker", "ms-python.python"],
  //Set the behavior of the container when vscode is closed
  //Continue starting the container with none
  "shutdownAction": "none"
}

VSCode "Next, rewrite it to yml for debugging! Modify the automatically generated docker-compose.yml in the .devcontainer directory to docker-compose-debug.yml and the existing Copy the contents of docker-compose.yml. "

VSCode "At this stage, there are three services, django, postgres, and nginx, but since you don't have to deliver them from nginx each time you debug, modify them as follows. Please change it as you like. "

--Correction --Remove the nginx service --Open debug port 8888 for django service --Corrected paths such as Dockerfile and mount directory

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
            #Add port for debugging
            - 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:

Start remote debugging

VS Code "It should be a directory like this now."

I "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 "I'm finally debugging, but if you have already started the container with docker-compose.yml, stop it temporarily. I will rebuild the container at the time of debugging, but the original yml file is the same Because I'm using, the names conflict and it's hard to get up well. "

VSCode "After confirming the stop, press the blue icon below, then clickRemote-Containers: Open Folder in Containers ..., and the directory where .devcontainer exists (containers in this example) Please select. "

VS Code "By the way, if the container is already started, you can log in to the container that is already running by selectingRemote-Containers: Attach to Running Containers ..., but the settings created in devcontainer.json will be reflected. Please note that the extension will not be installed. "

I "This is also a addictive point. Memo Memo ..."

VS Code "When you select a directory, a new window will open and the following display will appear at the bottom right of the screen. Wait for a while while the container is starting up."

I said, "It's quite long. Let's be patient. I hate impatientness."

VS Code "By the way, if you click Starting with Dev Container in blue letters, you can see the log of the process required to start the container in real time. If an error occurs, it will stop, but you can see what is wrong with this log. "

VSCode "Well, most of the time it's a wrong path, or a name conflict."

VSCode "When it starts up safely, the directory inside the container is displayed, and the shell also opens the specified directory as the current directory, and you can confirm that it is attached to the started container."

VS Code "Extensions already installed."

I said, "In the first place, you have to explicitly write the extension you want to install in devcontainer.json ... "

Start debugging

VS Code "Click on the Run and Debug icon and click on the create a launch.json file ..."

VS Code "Then click on Docker Debug ins Container ... "

VS Code "The edit screen of launch.json opens, so edit it as follows and complete it! "

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            //Display name
            "name": "django container",
            //language
            "type": "python",
            //Behavior during debugging. There are other things besides execution
            "request": "launch",
            //Path to the working file
            "program": "${workspaceFolder}/manage.py",
            //Select the terminal to use for debugging. You can also launch a terminal outside of VS Code
            "console": "integratedTerminal",
            //Arguments at program execution
            "args": [
                "runserver",
                "--noreload",
                "0.0.0.0:8888"
            ],
            "django": true
        }
    ]
}

VS Code "Select the interpreter from the bottom left of the screen to execute the program at the end (in this example, select python3.8)"

VSCode "When all the settings are completed, the items of Execute and debug will be as follows, and by clicking the green triangle icon like the play button, debug with the specified 0.0.0.0:8888 The server will start up. "

VS Code "If you connect to localhost: 8888 from your browser after pressing the button, you should be able to see the usual screen. "

I "honmaya."

VSCode "After that, if you set a breakpoint at the place you want to debug and access the URL where the function with the breakpoint is executed from the browser etc., you can see the contents of the request and check the variables on VScode. Do it! "

VS Code "If you google forVS Code Debug, there will be many detailed methods, so check it out!"

I'm "VS Code God!

Oshimai