Docker で LAMP + Laravel +  Node.js の開発環境を作り、Xdebugを導入してブレークポイントを使えるようにする。

## 実現したいこと
- DockerでLaravelの開発環境を構築する
- Xdebugを導入して、デバッグ時にブレークポイントを使えるようにする

## 構築したい開発環境
- PHP 7.3
- Composer 2.0
- MariaDB 10.4
- Node.js 14.15.3

## 2021/03/17追記 GitHubに公開しました。
https://github.com/kazup1125/lamp-laravel-node-and-xdebug-with-docker

## 結論

### ディレクトリ構造

```
.
├── docker
│   └── web
│       ├── Dockerfile
│       ├── httpd-base.conf
│       ├── php-base.ini
│       └── php.ini
├── docker-compose.yml
└── Laravelプロジェクトのファイル、ディレクトリ

```

### docker-compose.yml
[参考にした記事](https://mossa.dev/post/laravel_docker_lamp/)

```docker-compose.yml
version : "3"
services:
  web:
    build: ./docker/web
    ports:
      - 8000:80
    tty: true
    stdin_open: true
    volumes:
      - ./:/var/www/html
      - ./docker/web/php.ini:/usr/local/etc/php/php.ini
    depends_on:
      - db
  db:
    image: mariadb:10.4
    restart: always
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    ports:
      - 3307:3306
    volumes:
      - "./mysql:/var/lib/mysql"
      - "./initdb.d:/docker-entrypoint-initdb.d"
    environment:
      MYSQL_DATABASE: app_name
      MYSQL_ROOT_PASSWORD: password
```

### Dockerfile
[参考にした記事](https://mossa.dev/post/laravel_docker_lamp/)

```dockerfile
FROM php:7.3-apache

RUN apt-get update \
    && apt-get install -y zip unzip vim libpq-dev \
    && docker-php-ext-install pdo_mysql pdo_pgsql

# xdebug
RUN pecl install xdebug && docker-php-ext-enable xdebug

COPY php-base.ini $PHP_INI_DIR/conf.d/

COPY httpd-base.conf /etc/apache2/sites-available/laravel.conf
RUN a2dissite 000-default.conf && a2ensite laravel.conf && a2enmod rewrite

# composer
RUN curl -sS https://getcomposer.org/installer | php && mv composer.phar /usr/local/bin/composer

# node
RUN apt-get install -y nodejs npm && npm install n -g && n 14.15.3

```

### php-base.ini
[参考にした記事](https://mossa.dev/post/laravel_docker_lamp/)

```php-base.ini
[Date]
date.timezone = "Asia/Tokyo"

[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
```

### php.ini
[参考にした記事](https://mossa.dev/post/laravel_docker_lamp/)

```php.ini
; PHPSTORMでデバッグを有効にする場合
;xdebug.idekey=PHPSTORM

xdebug.mode=debug
xdebug.start_with_request=yes

; ホスト側のIP
xdebug.client_host=host.docker.internal

; デバッグ用のポート番号（デフォルトは9003）
xdebug.client_port=9003

; ログの出力場所
xdebug.log=/tmp/xdebug.log
```

### .env
```.env
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=app_name
DB_USERNAME=root
DB_PASSWORD=password
```

## Xdebugでブレークポイントを打ってステップ実行する方法
### VSCodeの場合
[参考にした記事](https://qiita.com/gigosa/items/90431be7a6a79db78480#vscode%E3%81%AE%E8%A8%AD%E5%AE%9A)

#### 準備
- 拡張機能[PHP Debug](https://github.com/xdebug/vscode-php-debug)をインストール
- `launch.json`の`configurations`に以下の項目を追記する

`"pathMappings"`には`"docker上のdocument root":"ローカルのdocument root"`と入力するようにしてください

```js
  "configurations": [
    {
      "name": "XDebug on Docker",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html":"/Path/to/your/local/root"  // "docker上のdocument root":"ローカルのdocument root"
      }
    }
  ]
```

#### 使い方
1. `$ docker-compose up`でコンテナを起動
2. 実行ボタンをクリック
![MastersController_php_—_wonderful_credit_simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/ef31a1c5-dd38-3d85-e85f-262486a76838.png)

3. 先ほどlaunch.jsonに追加した`configurations`を選択
![MastersController_php_—_wonderful_credit_simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/f2cfeb54-a5e3-7c54-498e-7f1ca47d49dd.png)

4. 任意の行でブレークポイントを打つ
![MastersController_php_—_wonderful_credit_simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/e36297c6-f3cd-bff5-952c-f91a025d36fd.png)

5. 実行ボタンをクリックする
![MastersController_php_—_wonderful_credit_simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/6bb56f2e-208c-e2c2-603b-6cae523afbe0.png)

6. バーが出現する
![MastersController_php_—_wonderful_credit_simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/29ab62b9-aba5-f7a9-0b59-32db97594fb7.png)

7. ブレークポイントを打たれた行がphpで実行されると、停止し、ステップ実行が可能になる
![MastersController_php_—_wonderful_credit_simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/c2c7d2c6-f75c-7115-4b17-fbb44dc79f70.png)


### PHPStormの場合
[参考にした記事](https://qiita.com/haruna-nagayoshi/items/99fa041e884c2c3975d2#phpstorm%E3%81%AE%E8%A8%AD%E5%AE%9A)

PHPStormは何かと面倒だった。

#### 準備
1. `設定 > 言語 & フレームワーク > PHP > デバッグ` を選択
2. `php.ini`に記述したポート番号を指定(今回は`9003`)
![Preferences_と_wonderful_credit_simulator_–_php_ini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/22942856-21f0-67ea-9d70-6618970ab70f.png)
3. `設定 > 言語 & フレームワーク > PHP > サーバー` を選択
4. +（追加）ボタンをクリック
5. 名前とホストは適当なものを入力(今回は`Docker-xdebug`と`dockr-debug-host`とした)
6. ポートには`php.ini`に記述したポート番号を指定(今回は`9003`)
7. デバッガーは`Xdebug`を選択
8. `「パスマッピングを使用する」`にチェック
9. `/var/www/html`と入力
![Preferences_と_wonderful_credit_simulator_–_php_ini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/534763d9-7459-30df-488f-31bb1044ecbf.png)
10. ツールバーの🔽をクリックし、`「実行構成の編集」`を開く
![スクリーンショット_2021-02-07_22_42_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/63536442-af4a-8b4f-8a1c-bec52aebc592.png)
11. +(追加)ボタンをクリックし、`「リモートデバッグ」`をクリック
12. 名前には適当なものを入力(今回は`Xdebug-Docker`とした)
13. サーバーには 3.で作成したものを選択
14. `「IDEキー」`には`php.iniに入力した`xdebug.idekey`を入力(今回は`PHPSTORM`を入力)
![スクリーンショット_2021-02-07_22_45_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/3280ac4b-aabc-4257-7576-fbcb2241b474.png)
15. `php.ini`の`xdebug.idekey`のコメントアウトを外す

```php.ini
; ↓コメントアウトを外す
xdebug.idekey=PHPSTORM

xdebug.mode=debug
xdebug.start_with_request=yes

; ホスト側のIP
xdebug.client_host=host.docker.internal

; デバッグ用のポート番号（デフォルトは9003）
xdebug.client_port=9003

; ログの出力場所
xdebug.log=/tmp/xdebug.log
```

#### 実行
1. 任意の行にブレークポイントを打つ
2. デバッグボタンをクリック
![wonderful_credit_simulator_–_php_ini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/4b6cd090-7f2a-f9c2-f8a7-0b6b6c3f3443.png)
4. ブレークポイントを打った行が実行されると、停止し、ステップ実行が可能になる
![wonderful_credit_simulator_–_MastersController_php.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518222/90aaae30-f404-ebe8-ae1f-adec06d42f58.png)