[docker-compose, laravel, Xdebug, VSCode, mac]ようやくブレークポイントで止まった

(20210104追記)
※本記事はxdebugのバージョンが2.xでのやり方です
現在の最新のバージョンは3.xになってまして、php.iniの設定の仕方が少し違います
結構記事ありますので3.xの方は別の記事を参照してください。
# ようやく止まった

ようやく止まった・・

こんにちはkamotetuと申します

普段仕事ではPhpStormというエディタで作業しているのですが、自宅ではVSCodeを使用しています
それでようやくVSCodeでブレークポイントで止まってくれたので記事にしたいと思います

というても
https://qiita.com/gigosa/items/90431be7a6a79db78480
を参考に（ほとんど同じ）でやったので、設定などは↑の記事を参考にしてください(いや本当助かりました)

じゃあお前なんなん？

て感じですが、実際に止まったときのVSCodeの状況をほんのちょっと詳しめに紹介します
(ようは嬉しかったので記事にした感じです(￣▽￣;))

*「実際に止まらせる」まで紹介させていただいた記事とほぼ一緒です
*単にVSCodeの動きを見たい方は「実際に止まらせる」から読んでください

os:mac

自分のディレクトリ構成
(記事に必要な分だけ記載します)

```
app //<- この中にlaravelのファイル郡が入ってます
docker
   ┗ php
     ┝ Dockerfile
     ┗ php.ini
docker-compose.yml
```

# とりあえず
紹介した記事のとおりやっていきます

## Dockerfileを作成

自分は

```Dockerfile
FROM php:7.3-apache-stretch

RUN apt-get update && \
    apt-get install -y libzip-dev zlib1g-dev sudo nano && \
    docker-php-ext-install mysqli pdo_mysql zip && \
    a2enmod rewrite

RUN pecl install xdebug \
  && docker-php-ext-enable xdebug
```

こんな感じで作成しました

## docker-compose.ymlを作成

```docker-compose.yml
version: "3.4"

services:
  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    restart: always
    volumes:
      - ./docker/php/php.ini:/usr/local/etc/php/php.ini
      - ./app:/var/www/html/
    ports:
      - 8080:80
    depends_on:
      - mysql
      - mail
      
  mysql:
    image: mysql:5.7
    restart: always
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
    command:
      - --sql-mode=NO_ENGINE_SUBSTITUTION
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=${DB_DATABASE}
      - MYSQL_USER=${DB_USERNAME}
      - MYSQL_PASSWORD=${DB_PASSWORD}

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: always
    volumes:
      - ./docker/phpmyadmin/sessions:/sessions
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=${DB_USERNAME}
      - PMA_PASSWORD=${DB_PASSWORD}
    ports:
      - 4040:80
    depends_on:
      - mysql
  mail:
    image: mailhog/mailhog
    restart: always
    ports:
      - "8025:8025"
```

mysql以下は今回無視してください

## php.ini作成

```php.ini
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
mbstring.http_output = UTF-8
mbstring.encoding_translation = Off
mbstring.detect_order = auto
display_errors = On

upload_max_filesize = 20M
post_max_size = 20M
max_execution_time = 1200
memory_limit = 512M

[xdebug]
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=host.docker.internal
xdebug.remote_port=9000 //<-記事では9001になっています
xdebug.remote_log=/tmp/xdebug.log
```
[xdebug]以下は記事のコピペ

## VSCodeの設定
ひとまずPHP Debugをインストール（画面ではインストール済）
<img width="1398" alt="スクリーンショット 2020-06-02 2.42.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480146/215ea086-27fc-dfec-9ca1-c5dfa297dc57.png">

虫のアイコンをクリック
<img width="149" alt="スクリーンショット 2020-06-02 2.44.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480146/868c32c2-421d-36f5-5587-9064f7af7369.png">

自分のVSCodeではこんなアイコン
バージョン？によっては違うアイコンになってると思いますが、明らか虫だろってアイコンがあればそれと同じです（多分）
これをクリックすると、「~~~.jsonを作成」というリンク？が表示されるのでそれをクリック（画像撮り忘れてしまいましたすいません）

launch.jsonを編集
クリックした先に

```launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        },
//上はもともと作成されている（はず）
//以下は記事のコピペ
        {
            "name": "XDebug on docker",
            "type": "php",
            "request": "launch",
            "port": 9000, //<- php.iniのxdebug.remote_portと同じポート番号
            "pathMappings": {
                "/var/www/html":"/Users/ユーザーの名前/Documents/my_app/laravel_app/app/app" <- dockerのルートディレクトリとアプリケーションのローカルルートディレクトリを設定します
            }
        }
    ]
}
```

とりあえずこれで設定は完了

## 実際に止まらせる

<img width="591" alt="スクリーンショット 2020-06-02 2.59.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480146/41d31358-bf05-e8e1-7214-aeb534a1d50c.png">

虫のアイコンをクリックすると↑のような画面になりますが、画像のように「Xdebug on docker」を選択してください

で、その左にある再生ボタンをクリックすると

<img width="574" alt="スクリーンショット 2020-06-02 3.01.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480146/615c0b8e-c134-20f4-32a2-3870a45b0171.png">

こんなメニューが表示されます

次にブレークポイントを設定します
<img width="439" alt="スクリーンショット 2020-06-02 3.03.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480146/1ad7720b-c688-8958-76fc-d085520ffaaf.png">

適当な位置にブレークポイントを設定します（コードの行番号の左にカーソルを持っていくと選択できます。あと、箇所によっては止まらないかも）

この状態でブラウザでブレークポイントを通過する処理を実行します
（自分のルーティングでは「http://localhost:8080/public/article/store」）
すると

<img width="1400" alt="スクリーンショット 2020-06-02 3.10.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480146/c15e32aa-de1c-3dad-f464-bba5f8b28d1d.png">

こんな感じで止まってくれました

ありがたや

## 止まらなかったら

止まるまでいろんな記事を参考にトライするのみです！

おやすみなさい