GitHubで公開！VSCode Remote ContainerでデバッグできるPHP8環境を作る

はじめに

ネットで色々と探していても、VSCode Remote Containerで Laravel（PHP8）でかつデバッグできる Docker環境のソースが転がっていなかったため、すぐに使い始められる環境（.devcontainer）のソースを GitHubに公開してみました。

スポンサーリンク

環境

今回作成した環境は次のとおり。

• PHP 8
• Laravel
• XDebug （PHPのデバッグ用）
• nginx
• PostgreSQL （DB）

GitHubの公開先

https://github.com/t92345era/vscode-remote-laravel

環境の説明

フォルダの構成はこんな感じ。

.
├── .devcontainer
│   ├── devcontainer.json
│   ├── docker
│   │   ├── nginx
│   │   │   └── default.conf      ・・・ nginxの設定
│   │   └── php
│   │       ├── Dockerfile        ・・・ PHPイメージの定義
│   │       └── php.ini           ・・・ PHPの設定
│   └── postgres-data             ・・・ DBのデータファイルを入れるところ
└── .vscode
    └── launch.json               ・・・ VSCodeの起動（デバッグ）設定

docker-compose.yml

軸となる docker-compose.yml はこんな感じになっている。

PHPに関しては composer やデバッグの設定など色々あるので Dockerfileを作成し、それ以外の nginx と postgres は標準のイメージを使っている。

version: '3'

services:
  php:
    build: ./docker/php
    volumes:
      - ../:/workspace:cached
    environment:
      DB_HOST: db

  nginx:
    image: nginx
    ports:
      - 8000:80
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ../:/workspace:cached
    depends_on:
      - php
  db:
    image: postgres:14
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: laravel
    volumes:
      - ./postgres-data:/var/lib/postgresql/data
    ports:
      - '5432:5432'

Dockerfile

PHPのイメージは php:8.0-fpm をベースとし、ここに PHPを動かすためにに必要なライブラリや、xdebug、Composerをインストールする。

FROM php:8.0-fpm
COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y git openssh-client zlib1g-dev mariadb-client vim libzip-dev libpq-dev libonig-dev zip unzip \
  && docker-php-ext-install zip pdo_pgsql mbstring bcmath

# PHP実行・デバッグで必要なライブラリをインストール
RUN pecl install xdebug \
    && docker-php-ext-enable xdebug

#Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1

ENV COMPOSER_HOME /composer

ENV PATH $PATH:/composer/vendor/bin


#WORKDIR /var/www
WORKDIR /workspace

RUN composer global require "laravel/installer"

php.ini

PHPの設定。タイムゾーンや文字コード、xdebugに必要な設定を入れる。

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

[xdebug]
xdebug.client_host=host.docker.internal
xdebug.client_port=9004
xdebug.start_with_request=yes
xdebug.mode=debug

devcontainer.json

devcontainer.json には、Laravelの開発で便利な拡張機能や、デバッグするために必要な xdebugの拡張機能が Remote Container起動時にインストールされるようにしておく。

またリモートのユーザ名を、デフォルトの vscode → root に変更しておく。

// See https://aka.ms/vscode-remote/devcontainer.json for format details.
{
	"name": "Remote-dev Project",
	"dockerComposeFile": [
		"docker-compose.yml"
	],
	"workspaceFolder": "/workspace",
	"service": "php",
	"extensions": [
		"editorconfig.editorconfig",
		"onecentlin.laravel-extension-pack",
		"bmewburn.vscode-intelephense-client",
		"neilbrayfield.php-docblocker",
		"xdebug.php-debug"
	],
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	"forwardPorts": [],
	// Use 'postCreateCommand' to run commands after the container is created.
	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "root"
}

launch.json

VSCodeの起動構成には、XDebug用のデバッグ設定を追加する。 ポイントは php.ini で設定したデバッグ用のポート番号と、port 属性の値を合わせること。

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

スポンサーリンク

コンテナの起動

ここまで紹介したソース一式を Githubで公開しているので「https://github.com/t92345era/vscode-remote-laravel」からダウンロードしてくる。

Remote Containerを起動

ダウンロードしたフォルダを VSCodeで開く。

Remote Containerを起動する。
※ Dockerおよび、Remote Containerの拡張機能は事前にインストールしておくこと。

スポンサーリンク

Laravel新規プロジェクトを作成

VSCodeのターミナルを立ち上げて、「src」という名前で Laravelのプロジェクトを作成します。

laravel new src

こんな感じで、ファイルが一杯で出来ていればOK.

「http://localhost:8000/」にアクセスして、Laravel のスターターページが表示されれば起動は成功です。

デバッグの確認

次にデバッグが出来るか試してみましょう。

デバッグ確認用のソース作成

デバッグ確認用に適当なコントローラーを作成します。

root@:/workspace# cd src
root@:/workspace/src# php artisan make:controller HelloController

HelloController.php と web.php を編集します。

「HelloController.php」

class HelloController extends Controller
{
    public function index(Request $request) {
        $hoge = 1 + 2;
        phpinfo();
    }
}

「web.php」

Route::get('/hello', [HelloController::class, 'index']);

デバッグの開始

デバッグメニューから「Listen for Xdebug」を選択してデバッグを開始します。

ブレークポイントを貼って止まるか確認

「http://localhost:8000/hello」にアクセスして、ブレークポイントでで止まるか確認しましょう。

まとめ

VSCode Remote Containerで、PHP8、Laravelのデバッグができる開発環境を構築する方法を紹介ました。

やっぱ、こうゆうのは Githubからパッと落とせてサッと起動できるのがいいですな。