docker-composeで作成したDjango環境をVS Codeでリモートデバッグする

django環境をdocker-composeで用意

必要なファイル群を作成

クィックスタート: Compose と Djangoを参考に、Dockerfile、docker-compose.yaml、requirements.txtを作成する。

Dockerfile

FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
ADD . /code/

postgresにツールを使ってアクセスしたいので、postを公開する。
それから、postgresはスーパーユーザのパスワードがないと怒られたので、エラーメッセージにあった環境変数で対応した。
スーパーユーザのパスワードはもちろん設定した方が良いが、今回は動けば良い環境なので楽な方で。

docker-compose.yaml

services:
  db:
    image: postgres
    environment:
      POSTGRES_HOST_AUTH_METHOD: "trust"
    ports:
      - "5432:5432"
  web:
    build: .
    command: python3 manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db

requirements.txtはDjangoのバージョン指定を無くしてみた。

requirements.txt

Django
psycopg2

動かしてみる

プロジェクトを作成する。

docker-compose run web django-admin.py startproject composeexample .

データベース設定をする。Postgresに接続するようにする。

composeexample/settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'postgres',
        'USER': 'postgres',
        'HOST': 'db',
        'PORT': 5432,
    }
}

サーバ起動！

docker-compose up

ブラウザからlocalhost:8000を実行して、djangoのページが表示されれば成功。

管理ページを表示させる

本当にpostgresに接続しているかわからないので管理ページを表示させておく。

マイグレーション

Djangoが必要とするシステムテーブルを作成する。

docker-compose run web python3 manage.py makemigrations
docker-compose run web python3 manage.py migrate

管理者作成

管理ページにログインするユーザを作成する。

docker-compose run web python3 manage.py createsuperuser
Username (leave blank to use 'root'): 
Email address: [e-mail]
Password: 
Password (again): 

管理ページにログイン

ブラウザからlocalhost:8000/adminを実行すると、ログインページが表示される。
さっき作ったsuperuserでログインしてみる。
ログインできたらOK。

リモートデバッグ設定

前提としてVS CodeにはRemote Developmentがインストールされているものとする。

設定ファイルの追加

1. Remote Hostボタン（VS Code左下のマーク）をクリック
2. Remote-Containers: Add Development Container configuration Files...を選択
3. From 'docker-compose.yaml'を選択
4. webを選択

できたdevcontainer.jsonを修正して、コンテナにアタッチしてリモートデバッグできるようにする。
一緒に作成されているdocker-compose.ymlは修正しなくて良い。

.devcontainer/devcontainer.json

{
	"name": "Existing Docker Compose (Extend)",
	"dockerComposeFile": [
		"../docker-compose.yaml",
		"docker-compose.yml"
	],
	"service": "web",
	"workspaceFolder": "/workspace",
	"settings": {
		"terminal.integrated.shell.linux": "/bin/bash"
	},
	// Dockerとpythonの拡張を追加
	"extensions": [
		"ms-azuretools.vscode-docker",
		"ms-python.python"
	],
	// VS Code終了時にコンテナを停止させる
	"shutdownAction": "stopCompose",
}

コンテナへ接続

この辺でワークスペースを保存する。ワークスペースでないと次のステップでエラーになるので。

1. Remote Hostボタンをクリック
2. Remote-Containers: Open Folder in Containers...をクリック
3. .devcontainerが存在するディレクトリを選択

リモートデバッグ

1. 画面左端の実行アイコンをクリック
2. launch.jsonファイルを作成をクリック
3. Docker Debug in Containerを選択

作成されたlaunch.jsonを編集する。

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "django container",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "console": "integratedTerminal",
            "args": [
                "runserver",
                "--noreload",
                "0.0.0.0:8888"
            ],
            "django": true
        }
    ]
}

インタープリターを設定するので、.vscode/settings.jsonを作成し、以下の設定をする。

{
    "python.pythonPath": "/usr/local/bin/python"
}