0-vscode-docker-debug.md

Как запустить дебаггер в VSCode с Django и Docker Compose

Запуск напрямую через runserver

1. Переключитесь на панель Debug (слева кнопка с треугольником и жуком).
2. Под синей кнопкой выберите "create a launch.json file". Сверху выскочит панель, где нужно выбрать Python, затем Django, затем дописать путь до manage.py. В большинстве случаев это ${workspaceFolder}\backend\manage.py (первая часть - это корень всего проекта), но если у вас он лежит глубже, путь нужно поправить (здесь и далее).
3. Создастся файл launch.json с конфигурацией, которую можно поправить под себя. Например, мне нужно было указать другой порт для runserver (ключ "args") и переключить некоторые переменные окружения для запуска с другой БД (ключ "env"). Ещё стоит обратить внимание на ключ "justMyCode": если указать для него false, то дебаггером можно будет ходить по коду джанги и прочих либ.
4. Теперь в той же панели зеленый треугольник будет запускать выбранную конфигурацию. Можно ставить брейкпоинты и слать запросы на бек через Postman.

Запуск через Docker Compose

1. Чтобы дебаггер мог подключиться внутрь контейнера, аналогично создайте новую конфигурацию дебага через "Add configuration" в выпадающем списке в панели Debug либо через "create a launch.json file", если это первая ваша конфигурация. Выберите Python → Remote Attach → localhost → 5678. В созданной конфигурации поправьте пути в "pathMappings": корню проекта в контейнере ("remoteRoot": ".") должна соответствовать та же папка в проекте ("localRoot": "${workspaceFolder}\\backend").
2. Создайте ещё один конфиг для Docker Compose (docker-compose.debug.yml): он нужен, чтобы для контейнера с беком подменить команду запуска гуникорна и открыть порт 5678 для общения дебаггера с контейнерным runserver.
3. Скопируйте в него основной конфиг, но содержимое всех блоков контейнеров замените на конструкции, расширяющие основной конфиг. Это нужно, чтобы не дублировать настройки:

  <имя контейнера>:
    extends:
      file: docker-compose.yml
      service: <имя контейнера>

4. Для контейнера backend добавьте заклинание, запускающее вместо гуникорна runserver через дебаггер (взято из доков). Я убрал --wait-for-client, с ним бек не грузился, пока не подключался дебаггер. Обратите внимание, что порт 8000 здесь должен совпадать с портом гуникорна в Dockerfile.

  backend:
    extends:
      file: docker-compose.yml
      service: backend
    command:
      [
        "sh",
        "-c",
        "pip install debugpy -t /tmp && python /tmp/debugpy --listen 0.0.0.0:5678 manage.py runserver 0.0.0.0:8000 --nothreading --noreload"
      ]
    ports:
      - 5678:5678

5. Запустите весь оркестр, используя новый конфиг: docker compose -f docker-compose.debug.yml down && docker compose -f docker-compose.debug.yml up --build. Контейнер бека выдаст всякие предупреждения, но сайт должен быть уже доступен.
6. Запустите конфигурацию дебага из п.1 (Python: Remote Attach). Дебаггер готов. Можете расставлять брейкпоинты (если они не светятся красным, что-то не так с путями в "pathMappings") и заходить на страницы на сайте. При изменениях в коде придётся пересобирать контейнеры и заново подключаться.

docker-compose.debug.yml

version: '3.3'

volumes:
  pg_data:
  static:
  media:


services:
  db:
    extends:
      file: docker-compose.yml
      service: db
  backend:
    extends:
      file: docker-compose.yml
      service: backend
    command:
      [
        "sh",
        "-c",
        "pip install debugpy -t /tmp && python /tmp/debugpy --listen 0.0.0.0:5678 manage.py runserver 0.0.0.0:8000 --nothreading --noreload"
      ]
    ports:
      - 5678:5678
  frontend:
    extends:
      file: docker-compose.yml
      service: frontend
  nginx:
    extends:
      file: docker-compose.yml
      service: nginx

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Django: Attach to Docker Compose",
            "type": "python",
            "request": "attach",
            "connect": {
                "host": "localhost",
                "port": 5678
            },
            "pathMappings": [
                {
                    "localRoot": "${workspaceFolder}\\backend",
                    "remoteRoot": "."
                }
            ],
            "justMyCode": false
        },
        {
            "name": "Django: runserver",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}\\backend\\manage.py",
            "args": [
                "runserver",
                "127.0.0.1:10000"
            ],
            "env": {
                "DJANGO_DEBUG": "True",
                "DJANGO_USE_SQLITE": "True"
            },
            "django": true,
            "justMyCode": false
        }
    ]
}