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

## django環境をdocker-composeで用意

### 必要なファイル群を作成

[クィックスタート: Compose と Django](https://docs.docker.jp/compose/django.html)を参考に、Dockerfile、docker-compose.yaml、requirements.txtを作成する。

```docker: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: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のバージョン指定を無くしてみた。

```docker:requirements.txt
Django
psycopg2
```

### 動かしてみる

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

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

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

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

サーバ起動！

```bash
docker-compose up
```

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

### 管理ページを表示させる

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

#### マイグレーション

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

```bash
docker-compose run web python3 manage.py makemigrations
docker-compose run web python3 manage.py migrate
```
#### 管理者作成

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

```bash
docker-compose run web python3 manage.py createsuperuser
Username (leave blank to use 'root'): 
Email address: xxxx@mail.com
Password: 
Password (again): 
```

#### 管理ページにログイン

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

## リモートデバッグ設定

前提としてVS Codeには[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)がインストールされているものとする。

### 設定ファイルの追加

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`は修正しなくて良い。

```json:.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`を編集する。

```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"
}
```