docker+laravel+VSCode+Xdebugという開発環境を作る

VScodeでXDebugを動かそうとしたらかなりハマったのでここにメモしておきます。

- 開発環境
    - windows 10 pro
    - docker 2.0.0.3
    - laravel 最新のやつクローン
    - VSCode　1.36.1

#前提条件
laradockの環境ができていること。
laradockの環境構築は探せばたくさん出てくるので各自行ってください。

#XDebugのインストール
早速ですが、laradock/.envファイルをいじってもらいます。

```.env
WORKSPACE_INSTALL_XDEBUG=true
～中略～
PHP_FOM_INSTALL_XDEBUG=true
```
またlaradock/php-fpmとlaradock/workspaceにある xdebug.iniを以下のように編集します。
ここで**重要なことはホスト名の指定です。**私はこれをやらなくて1日無駄にしました。
たぶんコピペでも大丈夫だと思います。

**PS:**[hibohibooさんの記事](https://qiita.com/hibohiboo/items/463fc4d13d20b1a8cf37#_reference-032478d7967f0d1a6017)によると、ホスト名の指定は `xdebug.remote_host=10.0.2.2 `じゃないとダメな環境もあるようです。ご指摘ありがとうございます。

```xdebug.ini
; NOTE: The actual debug.so extention is NOT SET HERE but rather (/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini)

xdebug.remote_host=host.docker.internal
xdebug.remote_connect_back=0
xdebug.remote_port=9001
xdebug.idekey=Listen for XDebug

xdebug.remote_autostart=1
xdebug.remote_enable=1
xdebug.cli_color=1
xdebug.profiler_enable=0

xdebug.remote_handler=dbgp
xdebug.remote_mode=req

xdebug.var_display_max_children=-1
xdebug.var_display_max_data=-1
xdebug.var_display_max_depth=-1
```

ここまでできたらdockerでbuildしましょう。
laradockのあるディレクトリに移動し以下を実行します。ここではApache2とmysqlにしていますが、各自環境によって変えてください。

```
> docker-compose up -d --build apache2 mysql
```
これでインストールができるはずです。
ネットワーク絡みのエラーが出たときは、dockerのsettingsのNetworkの項目のDNS serverを`8.8.8.8`にしてください。だいたいうまくいきます。

ではうまくできたか確認してみましょう。workspaseに入ってphpのバージョンを確認します。

```
> docker-compose exec workspace bash
# php -v
PHP 7.2.19-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: May 31 2019 11:16:55) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.19-1+ubuntu16.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
    with Xdebug v2.7.1, Copyright (c) 2002-2019, by Derick Rethans
```
 with Xdebugなんとかかんとかとかかれていればdocker側の設定はOKです。

#VSCode側の設定
とりあえず、拡張機能を入れます。
今回はとりあえず**PHP IntelliSense**と**PHP Debug**をいれましょう。拡張機能の検索のところからインストールしてください。

##PHP IntelliSenseの導入
補完機能とかしてくれるやつです。
dockerとか関係なしに**php**を入れなければなりません。
[ここ](https://windows.php.net/download)からダウンロードして適当な場所に解答してください。
そして、VSCodeの設定より、settings.jsonを開き以下を追記します。

```json:settings.json
"php.validate.executablePath": "解凍先のパス\\php.exe",
```
これで補完機能が使えるようになります。

##Xdebugの導入
さて、最後にXdebugの導入を行います。
ここで忘れてはいけないことが、プロジェクトフォルダをVScodeで開くことです。
エクスプローラー等でプロジェクトフォルダからVScodeで開いてください。
そして「デバッグ」→「構成の追加」でjsonファイルを編集します。

説明は他に譲るのでとりあえず以下をコピペ

```json:launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        

        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "pathMappings": {
                "/var/www/": "${workspaceFolder}"
            },
            "log": true,
            "port": 9001
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}
```
気をつける点は２つ。**pathMappings**と**port**の部分です。
**pathMappings**は右の```/var/www/```がdockerから見たプロジェクトの位置（困ったらworkspaceで入って確認してみてください）。一方の```${workspaceFolder}```がVScodeで開いているフォルダの位置を指定してください。
**port**は最初のxdebug.iniに指定したものと同じにしてください。

**この辺を間違えるとデバックできません**

これで設定完了です。虫マークの矢印ボタンを押せばデバッグができる・・・はずです。

試しにしてみましょう。

```php:test.php
<?php
$a = 1;
$a = $a + 1;

echo $a;
```

ここで二つ目の$aの左横を指定してブレークポイントを指定します。
そして虫ボタンを緑三角をクリックしてデバック実行です。
test.phpをブラウザで立ち上げると・・・・ブレークポイントでとまりましたか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392324/aced1eaa-7bb9-5c9a-4f66-1b86be6950f5.png)
うまくいけばこんな感じになります。