Djangoでデバッグ時「Error: That port is already in use.」が出た時の対処の流れ【おそらく基礎の話】

docker-compose.ymlで設定したポートと、
VSCodeのlaunch.jsonで設定したポートが競合している、
ということが原因でした。

こんにちは、
ワニかず@40歳 出戻りエンジニアです。

環境

• VSCodeでDockerの環境を構築
• ブラウザでページを表示できるようになった段階

問題の設定ファイル

VS Codeのデバッガーの設定ファイル

「launch.json」が

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python デバッガー: Django",
            "type": "debugpy",
            "request": "launch",
            "args": [
                "runserver"
            ],
            "django": true,
            "autoStartBrowser": false,
            "program": "${workspaceFolder}/manage.py"
        }
    ]
}

となっています。

docker-compose.yml

Dockerコンテナの設定ファイルが、

docker-compose.yml

services:
  web:
    container_name: my_django_app  # 明示的なコンテナ名
    build:
      context: ..
      dockerfile: docker/Dockerfile
    ports:
      - "8000:8000"
    volumes:
      - ../backend:/app
    command: python manage.py runserver 0.0.0.0:8000
    depends_on:
      - db
  db:
    container_name: my_django_db  # 明示的なコンテナ名
    image: postgres:13
    environment:
      - POSTGRES_DB=calendar_db
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data/
      
volumes:
  postgres_data:

となっています。

修正箇所

「launch.json」にポートの設定がないことが問題でした。
ですので、

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python デバッガー: Django",
            "type": "debugpy",
            "request": "launch",
            "args": [
                "runserver",
               "8001"  //デバッガー実行時のポート番号を追加
            ],
            "django": true,
            "autoStartBrowser": false,
            "program": "${workspaceFolder}/manage.py"
        }
    ]
}

図で理解

こうだったものを

こんな感じに修正したイメージです。

おしまいに

このエラーを解決するために、
キャッシュをクリアしてから再ビルド

docker-compose down
docker system prune -f
docker-compose up --build

などAIの力を借りていろいろやったのですが、
全然違うところが原因でした。

また、基本的すぎることなのか、
検索しても全然違うっぽい話しか出てこず、
ちょっとハマりました。

この記事が誰かの助けになると幸いです。