LoginSignup
0
0

More than 1 year has passed since last update.

Windows10のDocker環境で Atom + Xdebug を動作させる

Last updated at Posted at 2021-05-15

はじめに

Xdebugを使いたいとずっとふわっと思ってて、過去に何回かチャレンジするもうまくいかず。。
最近やっとこ上手くいったのでまとめます。

自分もDocker初心者なので、Dockerファイルの内容についても色々調べつつ進めていたので、
同じように初心者の方へ参考になれば。

とりあえずうまくいった設定方法

典型的なLAMPの構成です。

構成

myapp(任意のアプリ名)/
 ├ docker-db/
 │ └ initdb.d/
 │    └ init.sql ※mysqlの初期流し込みSQL
 ├ html/ ※ドキュメントルートに展開されるファイル
 │ └ index.html
 ├ log/
 ├ 000-default.conf
 ├ docker-compose.yml
 ├ Dockerfile
 └ php.ini
 

Dokerfile
# ベースのDockerイメージを指定:DockerHUBからイメージ[php]のタグ[7.1-apache]を指定
# https://hub.docker.com/
FROM php:7.1-apache

# php設定ファイルを独自指定とするため上書き
COPY ./php.ini /usr/local/etc/php/

# サーバー初期処理
# apt-get update : パッケージ情報の更新
# apt-get install : パッケージのインストール/更新
#  git : GIT
#  unzip : ZIPの解凍
#  libzip-dev : zip圧縮の基本ライブラリー
#  libicu-dev : Unicodeと他の文字コードとの間の変換をしてくれるライブラリ
#  libonig-dev : マルチバイト文字をサポートする正規表現関数のために必要なライブラリ
#  vim : テキストエディタ
#  locales : ロケール(言語と地域)設定
# locale-gen ja_JP.UTF-8 : # ロケールを追加
# localedef -f UTF-8 -i ja_JP ja_JP : # ロケール環境の定義
# ここからインストール完了後のゴミデータ削除処理
# apt-get clean : /var/cache/apt/archivesにキャッシュされたパッケージファイルを削除する
# rm -rf /var/lib/apt/lists/* : /var/cache/apt/list にキャッシュされている全てのパッケージリストを削除
# docker-php-ext-install : PHPエクステンションインストール
#  intl : phpの国際化用拡張モジュール
#  pdo_mysql :  PDO MySQL 拡張モジュール
#  mysqli : MySQLi拡張モジュール
#  zip :  zip 拡張モジュール
#  bcmath : bcmath 拡張モジュール
RUN apt-get update && \
  apt-get -y install git unzip libzip-dev libicu-dev libonig-dev vim && \
  apt-get -y install locales && \
  locale-gen ja_JP.UTF-8 && \
  localedef -f UTF-8 -i ja_JP ja_JP && \
  apt-get clean && \
  rm -rf /var/lib/apt/lists/* && \
  docker-php-ext-install intl pdo_mysql mysqli zip bcmath

# ENV <name> <value>でコンテナ内で使える環境変数を指定
ENV DOCUMENT_ROOT=/var/www/html/
# linuxの言語にUTF-8を指定
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL=ja_JP.UTF-8

# UTC(協定世界時)→JST(日本時間)に変更
RUN cp -p /usr/share/zoneinfo/Japan /etc/localtime

# composer 2.0 のインストール
COPY --from=composer:2.0 /usr/bin/composer /usr/bin/composer

# ログディレクトリとwebルートディレクトリ作成
RUN mkdir -p /var/www/log /var/www/session \
&& chown -R www-data:www-data /var/www/log/ /var/www/session/ \
&& mkdir -p ${DOCUMENT_ROOT}

# DockerFIleのワークディレクトリを指定
# これ以降の処理のパス指定はここ基準で設定される
WORKDIR ${DOCUMENT_ROOT}

# 開発用にxdebugインストール
RUN pecl install xdebug-2.9.8 && docker-php-ext-enable xdebug

# debian 系の apache で mod_rewrite を有効化する
RUN a2enmod rewrite
# apacheの設定ファイルにhtaccessの許可設定を指定
COPY ./000-default.conf /etc/apache2/sites-available/

# 外部公開するポート
EXPOSE 80

Xdebugは、Xdebugがインストールされているサーバー側からローカル側へDebug用のデータを飛ばすので
9000番は外部公開不要です。(その辺の動きも理解出来てなく、色々ハマっていました;)

000-default.conf
<VirtualHost *:80>
    # The ServerName directive sets the request scheme, hostname and port that
    # the server uses to identify itself. This is used when creating
    # redirection URLs. In the context of virtual hosts, the ServerName
    # specifies what hostname must appear in the request's Host: header to
    # match this virtual host. For the default virtual host (this file) this
    # value is not decisive as it is used as a last resort host regardless.
    # However, you must set it for any further virtual host explicitly.
    #ServerName www.example.com

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
    # It is also possible to configure the loglevel for particular
    # modules, e.g.
    #LogLevel info ssl:warn

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    # For most configuration files from conf-available/, which are
    # enabled or disabled at a global level, it is possible to
    # include a line for only one particular virtual host. For example the
    # following line enables the CGI configuration for this host only
    # after it has been globally disabled with "a2disconf".
    #Include conf-available/serve-cgi-bin.conf

    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>
php.ini
[Core]
display_errors = On
error_reporting = E_ALL
error_log = /var/www/log/apache2/error.log
log_errors = On

[Date]
date.timezone = 'Asia/Tokyo'

[mbstring]
mbstring.language = Japanese
mbstring.internal_encoding = auto
mbstring.http_input = auto
mbstring.http_output = auto
mbsting.encoding_translation = Off
mbstring.detect_order = auto

[xdebug]
xdebug.remote_enable=1
xdebug.remote_host=host.docker.internal
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=1

docker-compose.yml
version: '3.7'
services:
    app:
        container_name: web
        build: .
        image: app_server:lastest
        ports:
            - '8080:80'
        depends_on:
            - db
        volumes: 
            - ./html:/var/www/html
            - ./log:/var/www/log
        privileged: true
        restart: always
    db:
        container_name: db
        image: mysql:5.7.12
        ports:
            - "33306:3306"
        command:
            - --sql-mode=
        volumes:
            # 初期データ流し込み指定フォルダ
            - ./docker-db/initdb.d:/docker-entrypoint-initdb.d
            # Dbデータ永続化するときにマウントするvolume
            - db:/var/lib/mysql
        environment:
            MYSQL_ROOT_PASSWORD: root
        restart: always

# DBはトランザクションデータのため、外部データボリュームに永続化
volumes:
    db:

appのポート変換も、app側からローカル側にデータを飛ばすので

ports:
- '9000:9000'

のような指定は不要です。

Xdebugの設定ポイント

Xdebugのインストール

Dokerfile
# 開発用にxdebugインストール
RUN pecl install xdebug-2.9.8 && docker-php-ext-enable xdebug

phpinfoで、Xdebugの項目があればインストールが成功しています。
image.png

php.iniでxdebugのパラメータ設定
xdebug.remote_hostはhost.docker.internalでいけるみたいな記事もありましたが、
Windows環境だからなのか上手くいかず。作業端末のIPアドレスを指定してやるとうまく通りました。

動きを理解して改めて「host.docker.internal」設定してみたらちゃんと通りました。

php.ini
[xdebug]
xdebug.remote_enable=1
xdebug.remote_host=host.docker.internal
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=1

Atomの設定

php-debugの設定

image.png
image.png

動作確認

breakpointを付けて、
image.png

Webサーバーにアクセスして、
image.png

デバッグが始まれば成功です。
image.png

0
0
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
0
0