VSCodeでLAMP環境(Amazon Linux 2/Apache/PHP8.1)のDockerコンテナに入って、Xdebugでデバッグする。

# はじめに

Visual Studio Code の拡張機能 Remote Development を利用して、 LAMP 環境(Amazon Linux 2 / Apache / PHP8.1)の Docker コンテナ内で、 PHP のデバッガ Xdebug を設定する方法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/aa27ce58-ffec-d5b2-3176-931557e80d14.png)

## 環境

- **macOS** Big Sur 11.6 （Intel チップ）
- **Visual Studio Code**（VScode） 1.70.2
    - **Remote Development** 0.21.0（VSCode の拡張機能）
    - **PHP Debug** 1.29.0（VSCode の拡張機能）
- **Docker Desktop** 4.7.0
    - **Docker Engine** 20.10.14
- **PHP** 8.1.7（Dockerコンテナ上）
- **Xdebug** 3.1.5（Dockerコンテナ上）

以下の記事で作成した環境にデバッグ機能を追加しました。

https://qiita.com/ryamate/items/47183e1ffd4843ef18fa

## イメージと目次

Xdebug を利用する方法については、 Visual Studio Code の拡張機能 Remote Development を利用して、 Docker コンテナ内でデバッグ機能を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/bf7b6c17-c00b-e929-9ce9-9483820427c3.png)
[1. Remote Development のインストール](#1-remote-development-のインストール)
[2. Remote Development の設定（php-debug のインストール）](#2-remote-development-の設定php-debug-のインストール)
[3. Docker 関連ファイルの設定（Xdebug のインストール）](#3-docker-関連ファイルの設定xdebug-のインストール)
[4. Xdebug の設定](#4-xdebug-の設定)
[5. VSCode デバッグ機能の設定](#5-vscode-デバッグ機能の設定)

# 1. Remote Development のインストール

VSCode を開いて、 VSCode の拡張機能 Remote Development をインストールします。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/7aa07173-e91d-3a21-618f-847cdcc43c25.png)

# 2. Remote Development の設定（php-debug のインストール）

Remote Development について、 **.devcontainer** ディレクトリ以下に、Docker コンテナ内での設定をするファイル **devcontainer.json** を作成し、編集します。

```json:.devcontainer/devcontainer.json
{
  "name": "sample-app",
  "dockerComposeFile": [
    "../docker-compose.yml"
  ],
  "service": "web",
  "workspaceFolder": "/work/backend",
  "forwardPorts": [
    9003
  ],
  "extensions": [
    "felixfbecker.php-debug",
    "bmewburn.vscode-intelephense-client",
    "oderwat.indent-rainbow",
    "streetsidesoftware.code-spell-checker",
    "onecentlin.laravel-extension-pack",
    "hollowtree.vue-snippets"
  ]
}
```

以下、簡単な説明です。

```json
{
  "name": "sample-app", // 名前はなんでもOK
  "dockerComposeFile": [ // docker-compose.ymlのパスを指定
    "../docker-compose.yml"
  ],
  "service": "web", // Dockerコンテナを指定
  "workspaceFolder": "/work/backend", // ルートディレクトリを指定
  "forwardPorts": [
    9003 // Xdebugは9003番ポートがデフォルト
  ],
  "extensions": [ // Remote Development で使う拡張機能
    "xdebug.php-debug", // Xdebug の拡張機能
    "bmewburn.vscode-intelephense-client",
    "oderwat.indent-rainbow",
    "streetsidesoftware.code-spell-checker",
    "onecentlin.laravel-extension-pack",
    "hollowtree.vue-snippets"
  ]
}
```

VSCode の拡張機能を `extensions` に書いておくことで、Docker コンテナ内での開発時に指定した拡張機能が動作するようにしています。

### 拡張機能 PHP Debug

VSCode の拡張機能 PHP Debug（`xdebug.php-debug`）を導入することで、 Xdebug を利用できます。
PHP Debug は、 Xdebug そのものではなく、 VSCode で Xdebug を動かすための拡張機能です。

https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug

# 3. Docker 関連ファイルの設定（Xdebug のインストール）

Xdebug のインストールについて、web コンテナの **Dockerfile** を編集します。

https://xdebug.org/docs/install

```diff_docker:docker/app/Dockerfile
FROM amazonlinux:2

# timezone environment
ENV TZ=Asia/Tokyo \
  # locale
  LANG=ja_JP.UTF-8 \
  LANGUAGE=ja_JP:ja \
  LC_ALL=ja_JP.UTF-8

RUN yum update -y \
  && yum install -y \
  glibc-langpack-ja \
  zip \
  unzip \
  vim \
+  tar \
  httpd

RUN amazon-linux-extras install -y epel
RUN yum install -y https://rpms.remirepo.net/enterprise/remi-release-7.rpm

RUN yum clean metadata \
  && yum install -y \
  php81 \
  php81-php \
  php81-php-mbstring \
  php81-php-pdo \
  php81-php-xml \
  php81-php-fpm \
  php81-php-mysqlnd \
-  php81-php-gd
+  php81-php-gd \
+  php81-php-pecl-xdebug3

RUN alternatives --install /usr/bin/php php /usr/bin/php81 1

# composer のインストール
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER 1

# ファイルのコピー
COPY ./infra/docker/php/php.ini /etc/opt/remi/php81/php.ini
COPY ./infra/docker/apache/vhost.conf /etc/httpd/conf.d/vhost.conf
COPY ./infra/docker/apache/rewrite.conf /etc/httpd/conf.modules.d/rewrite.conf

CMD [ "apachectl", "-D", "FOREGROUND" ]

WORKDIR /work/backend
```

以下、 Dockerfile についての簡単な説明です。

### tar のインストール

yum で tar をインストールするよう追記しました。

```diff_docker
+  tar \
```

> **tar**  コマンドは、ファイルをアーカイブ・ストレージ・メディアに書き込んだり、アーカイブ・ストレージ・メディアからファイルを取り出したりすることにより、アーカイブを操作します。
> 

https://www.ibm.com/docs/ja/aix/7.2?topic=t-tar-command

Remote Development でコンテナに接続しようとした際に下記エラーが出たため、追記しました。

```docker:エラーログ抜粋
[2022-11-29T22:05:41.384Z] /bin/sh: 行 9: tar: コマンドが見つかりません
```

### Xdebug のインストール

Remi's RPM repository から Xdebug をインストールしました。

```diff_docker
+  php81-php-pecl-xdebug3
```

https://fedora.pkgs.org/36/remi-x86_64/php81-php-pecl-xdebug3-3.1.5-1.fc36.remi.x86_64.rpm.html

# 4. Xdebug の設定

Xdebug についての設定を作成し、編集します。

```ini:infra/docker/php/php.ini
zend.exception_ignore_args = off
expose_php = on
max_execution_time = 30
max_input_vars = 1000
upload_max_filesize = 64M
post_max_size = 128M
memory_limit = 256M
error_reporting = E_ALL
display_errors = on
display_startup_errors = on
log_errors = on
error_log = /dev/stderr
default_charset = UTF-8

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

[mysqlnd]
mysqlnd.collect_memory_statistics = on

[Assertion]
zend.assertions = 1

[mbstring]
mbstring.language = Japanese

[xdebug]
xdebug.client_host = localhost
xdebug.start_with_request = yes
xdebug.mode = debug
xdebug.client_port = 9003
xdebug.log = /var/log/xdebug.log
```

以下、簡単な説明です。

```ini
[xdebug]

# 呼び出し元のIPアドレス（同じDockerコンテナ内なので、localhost）
xdebug.client_host = localhost

# PHPリクエスト開始時に、Xdebugを起動させるか
xdebug.start_with_request = yes

# debugだと、ステップ実行ができる
xdebug.mode = debug

# デフォルトで9003で書かなくても動くけど、明示しておく
xdebug.client_port = 9003

# ログファイルの場所を指定
xdebug.log = /var/log/xdebug.log
```

# 5. VSCode デバッグ機能の設定

VSCode でデバッグを実行するための設定ファイルを確認します。

```json:src/.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "php",
      "request": "launch",
      "name": "Listen for Xdebug",
      "port": 9003,
    }
  ]
}
```

以下、簡単な説明です。

```json
{
  "version": "0.2.0", // バージョン指定
  "configurations": [ // 設定内容
    {
      "type": "php",
      "request": "launch",
      "name": "Listen for Xdebug", // わかりやすければ、なんでもOK
      "port": 9003, // Xdebug のポート番号
    }
  ]
}
```

**launch.json** については、公式ドキュメントで詳しくは確認できます。

https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes

# おわりに

Visual Studio Code の拡張機能 Remote Development を利用して、 LAMP 環境(Amazon Linux 2 / Apache / PHP8.1)の Docker コンテナ内で、 PHP のデバッガ Xdebug を設定する方法でした。

使用方法については、以下の記事の [4. Xdebug の準備](https://qiita.com/ryamate/items/74c57a290b78c812f089#4-xdebug-%E3%81%AE%E6%BA%96%E5%82%99) 〜 [5. Xdebug の使用](https://qiita.com/ryamate/items/74c57a290b78c812f089#5-xdebug-%E3%81%AE%E4%BD%BF%E7%94%A8) で書いていますので、併せてみていただけますと幸いです。

https://qiita.com/ryamate/items/74c57a290b78c812f089#4-xdebug-%E3%81%AE%E6%BA%96%E5%82%99

ありがとうございました。

## 参考

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug

https://xdebug.org/docs/install

https://www.ibm.com/docs/ja/aix/7.2?topic=t-tar-command

https://fedora.pkgs.org/36/remi-x86_64/php81-php-pecl-xdebug3-3.1.5-1.fc36.remi.x86_64.rpm.html

https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes

https://wiki.adachin.me/archives/1149