LoginSignup
3
15

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-01

(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を作成

自分は

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をインストール(画面ではインストール済)
スクリーンショット 2020-06-02 2.42.45.png

虫のアイコンをクリック
スクリーンショット 2020-06-02 2.44.45.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のルートディレクトリとアプリケーションのローカルルートディレクトリを設定します
            }
        }
    ]
}

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

実際に止まらせる

スクリーンショット 2020-06-02 2.59.50.png

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

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

スクリーンショット 2020-06-02 3.01.33.png

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

次にブレークポイントを設定します
スクリーンショット 2020-06-02 3.03.53.png

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

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

スクリーンショット 2020-06-02 3.10.07.png

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

ありがたや

止まらなかったら

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

おやすみなさい

3
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
15