Vagrant上のDockerでWordPress開発環境のwp-envを使う

2021.03.27

これまでWordPressの開発環境としてはLocal（旧Local by Flywheel）を使ってきましたが、最近はWordPress公式が開発しているDockerパッケージのwp-envという環境がオススメされているようなので試してみました。

@wordpress/env
wp-env を使用してプラグインやテーマのビルド用とテスト用の WordPress ローカル環境を…
ja.wordpress.org

普段、開発に使用しているWindowsの環境にはVagrantの為にVirtual Boxをインストールしていますが、Virtual BoxとDocker for Windowsの共存については、過去に面倒だった覚えがあるので、今回はVagrantに構築した環境（Ubuntu）内にDockerを構築しています。

Vagrantfile作成と仮想マシン起動

DockerとDocker-composeをインストールします。Ubuntuのバージョンは18 LTSを選択しましたが、20 LTSの場合は”ubuntu/focal64″（公式）となります。

Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  config.vm.hostname = "docker-dev.test"
  config.vm.box = "ubuntu/bionic64"
  config.vm.network "private_network", ip: "192.168.33.99"
  config.vm.synced_folder ".", "/home/vagrant/working"
  config.vm.provision "docker"
  config.vm.provision :docker_compose, run: "always"
  config.vm.provider "virtualbox" do |vb|
    # Display the VirtualBox GUI when booting the machine
    vb.gui = false

    # Customize the amount of memory on the VM:
    vb.memory = "2048"
  end
end

コマンド”vagrant up”で起動し、”vagrant ssh”で接続します。

Node.jsとnpmのインストール

下記を参考に、最新のNode.jsとnpmをインストールします。
https://www.softel.co.jp/blogs/tech/archives/6487

wp-envのインストール

npmでグローバルインストールしています。

$ cd ~
$ mkdir wp
$ cd wp
$ npm -g i @wordpress/env

なお、Windowsとのシェアディレクトリ内でローカルインストールする場合、普通に実行するとsymlink失敗に関するエラーになりますので、下記のように”–no-bin-link”を付与して実行します。

$ npm install XXX --save-dev --no-bin-link

wp-envの設定変更と起動

上記までの作業でwp-envはコマンド”wp-env start”で実行できるようになります。wp-envが起動した後、”http://localhost:8888″でアクセスしますが、今回はVagrant上のDockerで起動しているので、localhostではなくVagrantfileで設定したIPアドレスでアクセスすることになります。（※）

※IPアドレスではなくVagrantfileで設定したhostnameを使いたい場合は、ホストOSのhostファイルを編集した上で、以降内容のIPアドレス部分を置き換えて下さい

しかし、立ち上がったWordPressがロードしている各種リソースのパスのドメインは”localhost”になっているため、ネットワークエラーで読み込むことが出来ず、正常に利用出来ません。（この”localhost”は仮想マシン内からのみアクセス出来る）

よって、wp-envの設定ファイルを作成し、デフォルトの設定を上書きします。

$ vi .wp-env.json
{
        "plugins": [
                "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"
        ],
        "config": {
                "WP_TESTS_DOMAIN": "http://192.168.33.99",
                "WP_SITEURL": "http://192.168.33.99",
                "WP_HOME": "http://192.168.33.99"
        }
}

これで、”http://192.168.33.99:8888″で正常に利用出来るようになります。

Xdebugでデバッグする

ホストOS側（Windows）にインストールしたVSCodeを利用してデバッグを行う為の手順を説明します。

.wp-env.jsonの作成

仮想環境にて、ホストOSとの共有ディレクトリ(※)へ移動します。

※Vagrantfile参照、デフォルトは”/home/vagrant/working/”

$ cd /home/vagrant/working/

適当なディレクトリを作成し、その中に.wp-env.jsonを作成します。

$ mkdir wp
$ cd wp
$ vi .wp-env.json
{
        "themes": [
                "./demo-theme"
        ],
        "plugins": [
                "https://downloads.wordpress.org/plugin/wp-multibyte-patch.2.9.zip"
        ],
        "config": {
                "WP_TESTS_DOMAIN": "http://192.168.33.99",
                "WP_SITEURL": "http://192.168.33.99",
                "WP_HOME": "http://192.168.33.99"
        }
}

テーマの設置

ホストOS側で、仮想環境との共有ディレクトリ(※1)へ、デバッグしたいテーマ(※2)をコピーします。

※1.Vagrantfile参照、デフォルトはVagrantfileのあるディレクトリ
※2.テーマのディレクトリ名は.wp-env.jsonに記述したディレクトリ名（本例では”demo-theme”）

VSCodeのデバッグ環境設定

ホストOS側で、テーマのディレクトリを右クリックして”VSCodeで開く”を実行し、下記のようにlaunch.jsonを作成します。

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

デバッグ実行

仮想環境にて、wp-envをXdebugを有効にして起動します。

$ wp-env start --xdebug

ホストOS側にて、下記の順に実行することでデバッグ出来ます。

  1. wp-env上のWordPressの管理画面（http://192.168.33.99/wp-admin/）にアクセスし、今回デバッグするテーマを有効にする。
  2. VSCodeでブレークポイントを設定してデバッグを開始する。
  3. ブレークポイント箇所が実行されるような操作を行う。
タイトルとURLをコピーしました