Docker上のLAMP環境にXdebugをいれる。(VScode) -

概要

VScode 拡張機能、Xdebug v3.2.0のインストール

Docker上に構築したLAMP環境にxdebugを入れてステップイン・アウトを実行する
vscode上で実行できるようにする

ディレクトリ構造

現在のversion

mysql5.7
phpmyadmin
Laravel Framework 8.83.26
PHP Version 8.1.13
Apache/2.4.54 (Debian)
php.ini作成

(Xdebugのv3系)として設定する。
compose.ymlのvolumesでphp.iniのPATH追加、デフォルトではdockerにはphp.iniはないので、ローカルにphp.iniを作ってdocker側にマウント。→Dockerfileと同じ場所に配置する。

[xdebug]
xdebug.mode=debug
xdebug.start_with_request = yes
; ホスト側のIP
; host.docker.internalとすることでdockerのhostマシンのIPを解決
xdebug.client_host=host.docker.internal
xdebug.client_port=9013
xdebug.discover_client_host = 1

Dockerfile

Dockerhubからwith apacheのものを使用し、xdebugをインストール。
またdocker-php-ext-enableでpecl拡張を有効化できるのでdocker-php-ext-enable xdebugを実行。

ビルド後、/usr/local/etc/php/conf.d/docker-php-ext-xdebug.iniにzend_extension=xdebugが出力。

# image
FROM php:8.1-apache
# Laravelの依存PHPモジュールのInstall
# Laravelで必要なmodRewriteを有効化
RUN apt update \
        && apt-get install -y wget git unzip libpq-dev libfreetype6-dev libjpeg62-turbo-dev libpng-dev \
        && mv /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled
# Install MySQL
RUN docker-php-ext-install pdo pdo_mysql
# コンテナの作業ディレクトリを指定
WORKDIR /var/www/html
# Install Composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
# Install xdebug
RUN pecl install xdebug \
    && docker-php-ext-enable xdebug
# Install node.js,InterventionImage
RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - \
    && apt-get install -y nodejs \
    && docker-php-ext-install -j$(nproc) gd \

Docker-compose.yml

デフォルトではdockerにはphp.iniはないので、ローカルにphp.iniを作ってdocker側に追加。
アプリケーションコンテナのvolumesにマウントするPATHを記載。
→マウントされてるか確認。

version: '3'
services: 
  # php-apacheコンテナ
  web_1:
    container_name: laravel_umarche
    # Dockerfileを使って、コンテナをビルドするpath。web_umarcheディレクトリに宣言されたDockerfileがコンテナのビルドに使用される。
    build: ./web_umarche/app
    # php-apacheコンテナの前にまずDBコンテナをビルドする必要があることをDockerに認識
    depends_on: 
      - db
    # コンテナとホスト側のディレクトリをマウントする
    volumes: 
      # laravelのソースが入るpath
      - ./umarche/:/var/www/html/
      # Apacheによりデフォルトで有効化されている000-default.confホストとアプリケーションの仮想ホストの設定をリンク
      - ./web_umarche/app/default.conf:/etc/apache2/sites-enabled/000-default.conf
      # php.iniにxdebugのport設定
      - ./web_umarche/app/php.ini:/usr/local/etc/php/php.ini
    # コンテナ内部80番portを開いて、ホストの8005番にポートフォワーディング
    ports: 
      - "8005:80"
  phpmyadmin:
    container_name: phpmyadmin
    image: phpmyadmin
    restart: always
    #コンテナ内部80番portを開いて、ホストの8080番にポートフォワーディング
    ports:
      - "8080:80"
    #自動ログイン環境設定、host、ログイン情報指定
    environment:
     # 1に設定すると任意のサーバーへの接続が許可される 
     - PMA_ARBITRARY=1
     # SQLサーバーのportの設定
     - PMA_HOST=db:3306
     # SQLサーバーに接続するユーザー名
     - PMA_USER=root
     # SQLサーバーに接続するユーザーのパスワード
     - PMA_PASSWORD=rootroot
  db:
    container_name: mysql
    # DockerHubからMySQL5.7イメージをDLしてくる指定
    image: mysql:5.7
    # 起動時のコマンド
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    # コンテナ内の環境変数→.envにも記載
    environment:
      MYSQL_DATABASE: laravel_umarche
      MYSQL_USER: docker
      MYSQL_PASSWORD: root
      MYSQL_ROOT_PASSWORD: rootroot
      TZ: Asia/Tokyo
    # mysqlはデフォルトで3306port
    ports: 
      - "3311:3306"
    # 設定ファイルとMySQLのデータが保存されるpathをマウント。コンテナは基本的に起動時に変更されてもコンテナ自体が止まるとデータが消えてしまうため、保存しておきたいものはホストマシンと同期しておく必要がある。
    volumes: 
      - ./web_umarche/db/data:/var/lib/mysql
      - ./web_umarche/db/my.cnf:/etc/mysql/conf.d/my.cnf

ビルド！

docker-compose down && docker-compose build && docker-compose up

インストールに成功するとphpinfoにxdebug項目が追加される

Vscode側の設定

xdebugをインストール

端を右クリックして実行とデバッグのアイコンを出す。

右の歯車マークを押してlaunch.jsonを編集。

「pathMappings」はドキュメントルートではなく、ローカルとコンテナ側でマウントしている同じPATHをマッピングする
→docker-compose.ymlのvolumes

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Xdebug Cloud",
      "type": "php",
      "request": "launch",
      "port": 9013,
      "pathMappings": {
      "/var/www/html":"${workspaceRoot}/umarche"
      }
    },

ブレイクポイントをはって動作確認

gyazo.com

概要