CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

@wordpress/env(wp-env)を使ったWordPress開発環境構築

最初にWordPressをさわったときは、OS上にXAMP環境を建てて開発をしていました。 その後はLaravelを触るようになったこともあり、それに合わせてVagrantを使って開発をしていましたが、最近ではLaravelの開発環境をDockerに変更したので、Vagrant を使っていたWordPressの開発もDockerを使うことにしました。

Vagrantを使っていた時もVCCWを使っていたのでDockerでも環境を整えるパッケージはないものかと探してみると、WordPressの開発コミュニティが公式で@wordpress/envというパッケージを出していたので使ってみることにしました。

環境構築手順を備忘録的にまとめておきます。

準備物

Node.js
パッケージのインストールにnpmを使用します。

Docker DesktopまたはDockerの起動できる環境
開発環境はDockerで作るのでそのベースとなるもの。 環境を構築するまたは使用するときには起動しておく。

環境構築

まずはプロジェクトのディレクトリを作り、移動します。

mkdir wp
cd wp

設定用の .wp-env.json を作成し、設定を記述します。

vim .wp-env.json

.wp-env.json に以下を記述。

{
    "core": null,
    "phpVersion": null,
    "port": 3030,
    "env": {
        "tests": {
            "port": 3031
        }
    },
    "mappings": {
        "wp-content/plugins": "./public/plugins",
        "wp-content/themes": "./public/themes",
        "sql": "./sql"
    },
    "config": {
        "WP_DEBUG": true,
        "SCRIPT_DEBUG": true
    }
}

毎回これを全部書くのは大変なので、テンプレート化してプロジェクトに応じてポートなど部分的に書き換えるようにすると良いです。

@wordpress/env をインストールします。

npm i @wordpress/env --save-dev

インストール時に作られたpackage.json を編集します。

vim package.json

scripts に "wp-env": "wp-env" 内容を追記。

{
    "scripts": {
        "wp-env": "wp-env"
    },
    "devDependencies": {
        "@wordpress/env": "^4.1.1"
    }
}

ここまできたら下準備は完了です。
早速環境を起動させます。

先程、package.jsonに記述したscriptを使って操作します。

npm run wp-env start

以下が表示されれば起動完了です。
このとき、Dockerには開発環境（development）とテスト環境（test）の2つのインスタンスが構築されます。

WordPress development site started at http://localhost:3030/
WordPress test site started at http://localhost:3031/
MySQL is listening on port 53517

 ✔ Done! (in 45s 7ms)

開発環境（development）とテスト環境（test）はデータベースが分かれているので、開発環境（development）は通常の開発をしつつ、テスト環境（test）はデータを入れてテストをするなどの使い方が良いかと思います。

環境を起動したときに.wp-env.jsonで設定したポートが表示されているので、そちらにアクセスしてみるとテーマのトップページが表示されます。

テーマのトップページ

以下のコマンドで環境が停止します。

npm run wp-env stop

環境の情報

WordPressのユーザー情報

WordPressの情報は次のコマンドで確認できます。

wp-env run cli wp user list

$ npm run wp-env run cli wp user list

> wp-env
> wp-env "run" "cli" "wp" "user" "list"

ℹ Starting 'wp user list' on the cli container. 

Creating 8cd1e009ca1dba442d66de0b245d778b_cli_run ... done
+----+------------+--------------+--------------+--------------+---------------+
| ID | user_login | display_name | user_email   | user_registe | roles         |
|    |            |              |              | red          |               |
+----+------------+--------------+--------------+--------------+---------------+
| 1  | admin      | admin        | wordpress@ex | 2021-09-30 0 | administrator |
|    |            |              | ample.com    | 5:11:16      |               |
+----+------------+--------------+--------------+--------------+---------------+
✔ Ran `wp user list` in 'cli'. (in 3s 659ms)

コマンドで確認してみると、adminというユーザーがいます。
パスワードはpasswordが設定されています。

データーベース情報

開発環境（development）、テスト環境（test）どちらのデーターベースも以下のユーザーが設定されています。

user: root 
password: password

mysqlコマンドなどで接続すると思いますが、データベースのポートは起動毎に変更されるので注意してください。

docker psコマンドで起動しているインスタンスの情報（ポートなど）が確認できます。

テーマ、プラグイン

テーマやプラグインは、.wp-env.json のmappingsに展開されます。

//プラグイン
 public/plugins

//テーマ
 public/themes

ここに展開されたディレクトリ、ファイルはインスタンスにマウントされます。

データベースの操作

データベースのバックアップ、環境の共有、データベースの復元等でデータベースのインポート、エクスポートをしたい時があると思います。

インスタンスにはWP-CLIがインストールされているので、それを使って操作します。

データベースのエクスポート

npm run wp-env run cli wp db export sql/db.sql

データベースのリセット

npm run wp-env run cli wp db reset

データベースのインポート

npm run wp-env run cli wp db import sql/db.sql

データベースの置換

npm run wp-env run cli wp search-replace 'http://wordpress.dev' 'http://example.dev'

環境の削除

すべてのインスタンスを削除します。

npm run wp-env destroy

インスタンス内でコマンドを実行

インスタンス内でコマンドを実行したい場合は、先程データベースの操作で使ったコマンド（npm run wp-env run cli）を使用し、その後に実行したいコマンドを記述します。

例えば、インスタンス内のファイルを確認したい場合は ls 実行します。

npm run wp-env run cli ls

$ npm run wp-env run cli ls

> wp-env
> wp-env "run" "cli" "ls"

ℹ Starting 'ls' on the cli container. 

Creating 8cd1e009ca1dba442d66de0b245d778b_cli_run ... done
index.php              wp-comments-post.php   wp-load.php
~ 中略 ~
✔ Ran `ls` in 'cli'. (in 3s 289ms)

オプションを渡したい場合は " または ' で囲みます。

npm run wp-env run cli "ls -al"

$ npm run wp-env run cli "ls -al"

> wp-env
> wp-env "run" "cli" "ls -al"

ℹ Starting 'ls -al' on the cli container. 

Creating 8cd1e009ca1dba442d66de0b245d778b_cli_run ... done
total 252
drwxr-xr-x    6 xfs      xfs           4096 Sep 30 05:29 .
drwxr-xr-x    1 root     root          4096 Aug 27 21:00 ..
-rw-r--r--    1 xfs      xfs            261 Sep 29 14:43 .htaccess
-rw-r--r--    1 xfs      xfs            405 Feb  6  2020 index.php
~ 中略 ~
✔ Ran `ls -al` in 'cli'. (in 3s 333ms)

.wp-env.json の設定

.wp-env.json の設定項目については、公式のドキュメントがありますが、ざっくり説明をいれておきます。

{
    "core": null,  
　 　//WordPressのバージョン指定。nullの場合は最新リリース版

    "phpVersion": null,
  　//使用するPHPのバージョン。nullの場合は製品版リリースで使用されるデフォルトバージョン。

    "port": 3030,
    //開発環境のポート番号

    "env": {
        "tests": {
            "port": 3031
　　　　　　　//テスト環境のポート番号
        }
    },
    "mappings": {
    //ここに書かれたディレクトリ、ファイルがインスタンスにマウントされる。

        "wp-content/plugins": "./public/plugins",
        "wp-content/themes": "./public/themes",
        "sql": "./sql"
    },
    "config": {
    //wp-config.phpに記述したい設定

        "WP_DEBUG": true,
        "SCRIPT_DEBUG": true
    }
}
TOPへ戻る