PHP 初心者が WordPress の プラグイン 作成 ! part07 (VS Code日本語化、Dockerコンテナ、PHPの設定)

2021年5月14日

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part07 ではDockerコンテナやPHPでデバッグするための設定を行っていきます。

VS Code 日本語化

先日の続きから😅

PHP 初心者が WordPress の プラグイン 作成 ! part06

VS Codeが英語なので日本語化しておきたいと思います。

スタートメニューから Visual Studio Codeをクリックして起動します。

Extensionsアイコンをクリック。

検索窓で「Japanese」と入力すると候補が表示されます。
Japanese Language Pack for Visual Studio Codeをクリック。

Installをクリック

Restartボタンをクリック

すると、VS Codeが日本語化されます。簡単!

最終的な構成

最終的にはこのようなフォルダ・ファイル構成になります。

D:.
│  docker-compose.yml
│  
├─.devcontainer
│      devcontainer.json
│      
├─docker
│  ├─app
│  │  ├─mysql
│  │  │      Dockerfile
│  │  │      my.cnf
│  │  │      
│  │  └─php
│  │          Dockerfile
│  │          php.ini
│  │          xdebug.ini
│  │          
│  ├─mysql
│  │  ├─lib
│  │  └─sql
│  └─phpmyadmin
│      └─sessions
└─src
    │  index.php
    │  
    └─.vscode
            launch.json
            

フォルダ作成

まずフォルダを作成しましょう。
分かりにくいかもしれませんが拡張子が無い文字列がフォルダです。
ただし、Dockerfileはファイルなので除外してください。

※Linuxの場合はsrc, dockerディレクトリは以下すべてのパーミッションを777にしておくとよいかもしれません。

ファイル作成

全てUTF-8でLF(Linuxの改行コード)で記述していきます。
各ファイル内に記載しているURLは参考にさせていただいたサイト様のURLです。
ありがとうございました!

docker-compose.yml

dockerのネットワーク作成

docker-compose.ymlを書き出す前にdockerで新しいネットワークを作成しておきます。
理由はdocker-composeを実行した際、新しいネットワークが自動生成されます。
この自動生成されたネットワークがホスト側のネットワークと被り外部との通信ができなくなってしまうことが過去にあったからです。
(もしかしたら現在は解消されているかもしれません)

docker network create -d bridge --subnet=192.50.100.0/24 dev
PS D:\dockers\php_dev> docker network ls
NETWORK ID     NAME      DRIVER    SCOPE
415548de2bdb   bridge    bridge    local
0c1b9c34f485   dev       bridge    local
dbed15ee8952   host      host      local
8b3e23a19a13   none      null      local
PS D:\dockers\php_dev>

docker-compose.yml

# https://qiita.com/MasanoriIwakura/items/a310c75e6c5b347adf37
# https://zenn.dev/cryptobox/articles/72682ff342e518
version: '3'

services:
  php:
    build:
      context: .
      dockerfile: docker/app/php/Dockerfile
    ports:
      - '8099:80'
#      - '9003:9003' #デバッグポート
    volumes:
      - ./src:/var/www/html
    links:
      - mysql
    networks:
      - dev
    logging:
      driver: "json-file" #デフォルトのログ
      options:
        max-size: "100m"
        max-file: "3"

  mysql:
    #注意 https://qiita.com/hirokiseiya/items/04ad429713be7042c9d1
    build:
      context: .
      dockerfile: docker/app/mysql/Dockerfile
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_DATABASE=app
      - MYSQL_USER=docker
      - MYSQL_PASSWORD=docker
      - TS='Asia/Tokyo'
    volumes:
      - ./docker/mysql/lib:/var/lib/mysql
      - ./docker/mysql/sql:/docker-entrypoint-initdb.d
    networks:
      - dev
    logging:
      driver: "json-file" #デフォルトのログ
      options:
        max-size: "100m"
        max-file: "3"

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:4.7
    environment:
     - PMA_ARBITRARY=1
     - PMA_HOST=mysql
     - PMA_USER=root
     - PMA_PASSWORD=password
    ports:
      - 8090:80
    links:
      - mysql
    volumes:
      - ./docker/phpmyadmin/sessions:/sessions
    networks:
      - dev
    logging:
      driver: "json-file" #デフォルトのログ
      options:
        max-size: "100m"
        max-file: "3"

# ネットワーク定義
networks:
  dev:
    external: true

 

devcontainer.json

今回はdocker-compose.yml内に記載してある「php」のみを起動させます。

{
  # 任意の名前でOK
  "name": "Existing Docker Compose (Extend)",
  
  # Remoteでログインしたいコンテナを作成するためのdocker-composeファイルを指定
  "dockerComposeFile": [
    "../docker-compose.yml",
  ],
  
  # 先ほど指定したdocker-composeファイル内に定義しているサービスで起動したいものを指定
  "service": "php",
  # コンテナに入った際のカレントディレクトリ
  "workspaceFolder": "/var/www/html",
  # コンテナが生成された際、コンテナ側にインストールするVSCodeの拡張機能。
  # これを指定しないとコンテナが再生成すると拡張機能がきえるらしい。
  "extensions":[
    "felixfbecker.php-debug",
    "felixfbecker.php-intellisense"
  ]
}

 

MySQLのDockerビルド関係

このコンテナを改めて作成するのには2つ理由があります。

  1. MySQL8から以下の定義を行わないとPhpMyAdminから接続できない
    [mysqld]
    default_authentication_plugin=mysql_native_password
  2. Windowsではvolumesでバインドしたファイルはパーミッションが777になる
    my.cnfは644でないといけないようです。

ということでこのファイルをmy.cnf作成してコンテナをビルドするときに仕込んでしまおうという段取りです。

この段取りを行わないと以下の警告が出てmy.cnfを読み込んでくれません。

mysqld: [Warning] World-writable config file '/etc/mysql/conf.d/my.cnf' is ignored.

 

Dockerfile

.\docker\app\mysql\Dockerfileです。

# https://qiita.com/hirokiseiya/items/04ad429713be7042c9d1
# https://sunday-morning.app/posts/2020-07-31-mysqld-warning-world-writable-config-file-etc-mysql-conf-d-my-cnf-is-ignored

# mbind: Operation not permitted エラーが発生する。害はないとのことで気にしない。
# 気になる場合は以下の記事を参考に対策を講じる
# https://selfnote.work/20210315/programming/mysql-docker-error-mbind/
FROM mysql:8.0

# ファイルのコピー
ADD ./docker/app/mysql/my.cnf /etc/mysql/conf.d/my.cnf
RUN chmod 644 /etc/mysql/conf.d/my.cnf

CMD ["mysqld", "--character-set-server=utf8mb4", "--collation-server=utf8mb4_unicode_ci"]

my.cnf

[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci
default_authentication_plugin=mysql_native_password

[client]
default-character-set=utf8mb4

PHPのDockerビルド関係

Dockerfile

.\docker\app\php\Dockerfileです。
composerも導入しました。
Laravelのメモも混じっていますがご愛嬌ということで(笑

# https://tech-lab.sios.jp/archives/18677
# https://zenn.dev/cryptobox/articles/72682ff342e518
# https://tech-lab.sios.jp/archives/24164 ※重要
# https://qiita.com/satorish/items/e64f24d5e88578f9ec61
# https://qiita.com/yatsbashy/items/02bbbebbfe7e5a5976bc
# https://qiita.com/yousan/items/2a4d9eac82c77be8ba8b
# http://mio-koduki.blogspot.com/2012/08/phpcurl-phpcurlgoogle.html
# https://qiita.com/Tachy_Pochy/items/d454c5005cec26574519
# Laravelのデバッグはデバッグ開始して php artisan serve
# http://localhost:8000/
# composerの例
# composer create-project --prefer-dist laravel/laravel blog
# composer require guzzlehttp/guzzle

# Laravel8から記述が変わっているので注意
# https://qiita.com/tamakiiii/items/e71040173fa0a1fcad83

# https://qiita.com/miriwo/items/78505f991535e852bd27
# Laravelで payload is invalidエラーが出る場合は以下。
# app/Http/Middleware/EncryptCookies.php のexcept に'XDEBUG_SESSION" を追加・・・でもダメかも。
# デバッグの「Evrything」のチェックを外すとよい。


FROM php:8-apache

# Proxy経由でのビルドする方向け
#ENV http_proxy http://xxxxxxx:0000
#ENV https_proxy http://xxxxxxx:0000
#ENV no_proxy 127.0.0.1,localhost

# XDebug有効およびmysql操作有効
# Proxy経由でのビルドする方向け
# RUN pear config-set http_proxy http://xxxxxxx:0000
RUN apt-get update \
    && apt-get install -y libonig-dev libzip-dev unzip git \
    && pecl install xdebug \
    && docker-php-ext-enable xdebug \
    && docker-php-ext-install mysqli pdo_mysql mbstring zip bcmath

#composerをインストール マルチステージングビルドを応用
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# ファイルのコピー
COPY ./src /var/www/html
COPY ./docker/app/php/php.ini /usr/local/etc/php/php.ini
COPY ./docker/app/php/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

php.ini

display_errors = On
display_startup_errors = On
max_execution_time = 30
session.gc_divisor = 1000
session.sid_bits_per_character = 5
output_buffering = 4096
memory_limit = 128M
upload_max_filesize = 64M
max_input_vars = 1000
log_errors = On
error_log = /dev/stderr
error_reporting  = E_ALL
expose_php = On
zend.exception ignore_args = Off

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

[mbstring]
mbstring.language = Japanese

[mysqlnd]
mysqlnd.collect_memory_statistics = On

[assertion]
zend.assertions = 1

xdebug.ini

xdebugは2系と3系で定義項目が違うそうです。

デバッグポートも2系は9000に対し3系は9003なのだとか。

Xdebug 2 から 3 へのアップグレード

私は3系なので以下のように設定しました。

# リモートデバッグ接続先。今回はサーバー側にXdebugが動くので127.0.01を指定
xdebug.client_host = 127.0.0.1
# リモートデバッグを自動で開始
xdebug.start_with_request = yes
# ステップデバッギング
xdebug.mode = debug
# デバッグの接続ポート
xdebug.client_port = 9003

index.php

<?php
$a = 1;
if ($a === 1) {
    echo "hoge";
} else {
    echo "fuga";
}
?>

launch.json

VS Codeで生成できると思われますので不要かもしれません。ただし、portが9003であることを確認しておきましょう。

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

まとめ

VS Codeの日本語化およびDockerのインストール、Dockerコンテナのビルド周りの定義ファイル等を作成しました。
ちゃんと動くかしら・・・
次回は実際にVS Codeを起動しデバッグできるか確認してみたいと思います!
期待通り動かない場合は定義ファイル等修正していきます。その際は本投稿も修正したいと思います😆

今日はここまで!

2021/05/14 訂正 launch.jsonの定義にスペルミスがありました。修正しました。configrations→configurations