はじめに
VSCode「そう。Remote Development
ならね。」
ぼく「なん…やて…」
目次
前提条件
VSCode「docker-composeでのデバッグをやっていくから、まずは下のわかりやすい記事を参考に環境構築を行ってな。」
ぼく「手前味噌やな。」
VSCode「フォルダ構成は以下の通りになっているはずやで。」
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「ほんだら、containersディレクトリをワイ(VSCode)開いてな。」
ぼく「あいよ。」
Remote Developmentのインストール
VSCode「Remote Developmentをインストールしてな。左下にこんな感じの青いマークが出てればインストール完了や」
![image1.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F0e0d4477-bfe6-9ef6-2d87-dd089cad2d82.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2d9e0b09ed69ee512c811de40ccab5f7)
設定ファイルの追加
VSCode「次にデバッグ用の設定ファイルを追加していくで。」
VSCode「出てきた青いアイコンをクリックしてな。」
ぼく「あいよ。」
VSCode「したら上にメニューが出てくるやろ?そん中からRemote-Containers: Add Development Container configuration Files...
を選択してな。」
![image2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2Fb640ce7e-c7df-18d4-e791-acb1e3b92d56.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=48e21deef21b292d70475f159d47c7d3)
VSCode「そのあとFrom 'docker-compose.yml'
を選択や。」
![image3.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F783951a0-8624-0f71-dedd-283e5e2ded3c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e5faa9457fb4665e458a58d4294a22d7)
- デバックしたいサービスを選択(今回はDjango)を選択
![image4.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2Fc927bdb4-ce8d-01d4-5f14-890371dac055.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ff067491f1f969bd33aa609ceb8a5e86)
VSCode「するとプロジェクトのルートに.devcontainer
ディレクトリと、その中にdevcontainer.json
及びdocker-compose.yml
が出来上がるから、devcontainer.json
を以下のように書き換えてな!」
VSCode「この辺は実務で使ったりする場合は任意の環境に置き換えて使ってな!」
ぼく「設定ファイル周りはようハマるからきーつけなあかんな。」
{
// 任意の名前を入力
"name": "djnago containers",
// Remoteでログインしたいコンテナを作成するためのdocker-composeファイルを指定してください。
"dockerComposeFile": "docker-compose-debug.yml",
// 起動したいサービスを選択
"service": "django",
// コンテナに入ったときに最初にここで指定したものがカレントディレクトリになります
"workspaceFolder": "/usr/src/app/",
// シェルを選択
"settings": {
"terminal.integrated.shell.linux": "/bin/bash"
},
// vscode拡張機能を選択
"extensions": ["ms-azuretools.vscode-docker", "ms-python.python"],
// vscodeを閉じた時のコンテナの挙動を設定
// noneでコンテナの起動を継続する
"shutdownAction": "none"
}
VSCode「次にデバッグ用のymlに書き換えていくで!.devcontainer
ディレクトリ内の自動生成されたdocker-compose.yml
をdocker-compose-debug.yml
とかに修正し、既存のdocker-compose.yml
の内容をコピーしてな。」
VSCode「今の段階ではサービスがdjango
とpostgres
とnginx
の3つあるけど、デバッグ時にいちいちnginxから配信しなくてええから、以下のように修正してな。これも環境に合わせて任意に変えてな。」
- 修正点
- nginxサービスを削除
- djangoサービスにデバッグ用のポート8888を開放
- Dockerfileやマウントディレクトリなどのパスを修正
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
# デバッグ用にポートを追加
- 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:
リモートデバッグの開始
VSCode「今はこんな感じのディレクトリになっとるはずやな。」
ぼく「せやな。」
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「いよいよデバッグしていくわけやけど、すでにdocker-compose.yml
でコンテナを立ち上げている場合は一旦停止させておいてな。デバッグ時にコンテナを立て直すんやけど、元々のymlファイルが同じものを使っているから名前が競合してうまく立ち上がらんくなるで。」
VSCode「停止を確認したら下の青いアイコンを押して、次はRemote-Containers: Open Folder in Containers...
をクリックして、.devcontainer
が存在するディレクトリ(今回の例ではcontainers
)を選択してな。」
![image5.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F5e3e107d-f619-3dab-8375-b671c4f6599b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cdc9d58a868cd644f049b8904ed6323b)
VSCode「ちなみにすでにコンテナが立ち上がっている場合はRemote-Containers: Attach to Running Containers...
を選択するとすでに起動中のコンテナにログインできるんやけど、devcontainer.json
で作成した設定が反映されず、拡張機能がインストールされないから注意な」
ぼく「これもハマりポイントやな。メモメモ…」
VSCode「ディレクトリを選択すると新しいウィンドウが開いて、以下のような表示が画面右下に出るで。コンテナ起動中やからしばらく待ってな」
ぼく「結構長いで。気長にいこうな。せっかちは嫌われるで。」
VSCode「ちなみに青文字のStarting with Dev Container
をクリックするとコンテナ起動に必要なプロセスのログがリアルタイムでみれるで。エラーが起きたら停止してまうねんけど、このログでどこが悪いのか見れるで。」
VSCode「まぁ、大抵はパス間違いか、名前の競合やろけどな。」
![image6.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F8164daf1-c55f-fda4-401f-736909684762.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=82b2109ceafebd8eb54c80f1ef5da0e5)
VSCode「無事立ち上がったら、コンテナ内のディレクトリが表示されて、シェルも指定のディレクトリをカレントディレクトリとして開いており、起動したコンテナにアタッチされたことが確認できるで。」
![image7.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F74e8f1a5-a77d-b531-ba29-33c2ac1c6c1b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0b967ecad8afdc545334a274f2ed7156)
VSCode「拡張機能もインストール済みや。」
ぼく「そもそも、拡張機能はインストールしたいものをdevcontainer.json
で明示的に書いてあげないとダメなんやな…」
![image8.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F90fe14ab-45ce-7d22-a94a-bf15073e970e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=271cb83e5d5f8414437c30980d79fb79)
デバッグの開始
VSCode「実行とデバッグ
のアイコンをクリックし、launch.jsonファイルを作成します
をクリックして…」
![image9.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F4db1c2e8-bd85-a9a2-6971-b0f4c7ed3263.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=729fac323c98308fe22cc381d3d92ad9)
VSCode「その後、Docker Debug ins Container
をクリックし…」
![image10.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F18b00997-6b8f-078e-e191-8b6a343b5090.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=95c2b44f7ad7462b797dde59b4210db2)
VSCode「んでlaunch.json
の編集画面が開くので以下のように編集して完成や!」
{
"version": "0.2.0",
"configurations": [
{
// 表示名
"name": "django container",
// 言語
"type": "python",
// デバッグ時の挙動。実行の他にもある
"request": "launch",
// 動作させるファイルへのパス
"program": "${workspaceFolder}/manage.py",
// デバッグで使用するターミナルを選択。VSCode外のターミナルを起動することもできる
"console": "integratedTerminal",
// プログラム実行時の引数
"args": [
"runserver",
"--noreload",
"0.0.0.0:8888"
],
"django": true
}
]
}
VSCode「最後にプログラムを実行するために、画面左下からインタープリタを選択するで(今回の例であればpython3.8を選択)」
![image11.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F9d39e19f-558b-ee4e-390c-860297edbf0e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=297a7d7f77a6e45e0be0775f713643f1)
VSCode「一通りの設定が終わると、実行とデバッグ
の項目が以下のようになり、再生ボタンのような緑色の三角アイコンをクリックすることで、指定した0.0.0.0:8888
でデバッグサーバーが立ち上がるんや。」
![image12.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F3ecb0533-ce7d-5c8a-35cd-7b9dd62baa23.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7fb2c933bfe0a567f2c7f243ae8710aa)
VSCode「ボタンを押した後にブラウザからlocalhost:8888
に接続するといつもの画面が見れるようになっているはずや」
ぼく「ほんまや。」
![image13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F84f7bba4-6e3e-271d-d407-d335c6cd2745.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6aa5e9a7a20632d32d8d4fb0afedd378)
VSCode「あとはデバッグを行いたい箇所にブレークポイントを設定してブラウザなどからブレークポイントを設置した関数が実行されるようなURLにアクセスすると、VScode上でリクエストの内容がみれたり、変数が確認できたりするで!」
VSCode「VSCode デバッグ
とかでググったら細かいやり方たくさん出てくるから調べてみてな!」
ぼく「VSCode神やな!ほなさいなら。」
お し ま い