Docker、VScode環境でデバッグ

# はじめに
毎度環境構築で時間を使っているので、記憶にあるうちに備忘録として纏めます。
今回は、Docker + PHP + Xdebug + VScodeでのデバッグする方法になります。

# 目次
1.環境
2.ディレクトリ構成
3.各種設定ファイル
4.拡張機能必要ライブラリ
5.実際の流れ

# 環境
windows11 home
docker
Xdebug 3系

# ディレクトリ構成
.
├── .devcontainer
│   └── devcontainer.json
├── app
│　　　　　　├──　.vscode
│　　　　　　│   └── launch.json
│　　　　　　└──　sample.php
├── docker
│   └── php
│        ├── Dockerfile
│        ├── xdebug.ini
│        └── php.ini
└── docker-compose.yml



# 各種設定ファイル
・Docker
docker-compose.yml
→Docker Compose というツールが使用する設定ファイル

Dockerfile
→Dockerのイメージを作成するための設定ファイル。

・php
php.ini
→phpの動作に関係する設定ファイル

・xdebug
xdebug.ini
→PHPのデバッグツールであるXdebugについて設定するファイル

・json
devcontainer.json
→VSCodeのContainerで使用される設定ファイル

launch.json
→ VSCode のデバッグ設定ファイル

# 拡張機能必要ライブラリ
https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

# 実際の流れ
準備 → docker起動 → コンテナ接続 →デバッグ起動

準備
ディレクトリ構成にあわせて、必要ファイル等を用意する

docker-compose.yml
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/df2c265b-ed07-414e-6524-85a26867a4f2.png)

Dockerfile
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/22568f69-cb69-ccbf-957c-e86dced84ade.png)

php..ini
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/fb8d3bfb-21ec-2460-9445-f1271a3b5f67.png)

xdebug.ini
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/2eb25a07-a7a1-5625-0e98-b184a3cbe23f.png)

devcontainer.json
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/b00380f3-e86e-4aaf-07f3-fdba0bd33946.png)


launch.json
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/3e6a44b2-9fc8-602e-ee0d-2b33087f256f.png)

コンテナの作成とdockerの起動

コンテナの作成
docker-compose build

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/a156749b-6781-8afe-6af0-513c625a2c40.png)

コンテナの立ち上げ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/bad870dd-fe3b-6992-a2ea-65f4189a2f60.png)

コンテナ作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/012528b1-98d0-bc66-02fa-9061283e09eb.png)

docker起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/97d78007-b964-a47f-68a2-4c5ab751f609.png)

コンテナ接続
VScodeの左下の><のようなマークをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/30764ebd-dfce-cd53-0370-d8b34e91d67a.png)

Reopen in Containerをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/ba7ef387-52db-335b-7b92-e107eec20be4.png)

デバッグ起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/f8be8d43-95a2-2e62-3d96-2b051fda613c.png)

ブレークポイントを付ける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/0d5ea368-4613-b547-4328-c3ff2e9f9c44.png)

叩いてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623713/271aa207-fbbf-6383-b516-3f3d71351bd2.png)

画像のように変数の中を確認できれば完了！

# 終わりに
xdebugをローカルでインストールしてしまうと認識されずうまくデバッグができない。xdebugはあくまでもリモート上で、インストールする必要がある。また、launch.jsonやdevcontainer.jsonのパスと合わせないとファイルの階層がおかしく認識されて、デバッグ出来ない時もあったので、個人的に気を付けたいと思いました。