wp-env（@wordpress/env）でWordPressのローカル環境を構築する

WordPress公式が提供している wp-env（@wordpress/env）を用いてWordPressのローカル環境を構築したサンプルです。

この記事のwp-envでできること

• 開発環境の中でデータベース（DB）の.sqlデータを管理する。
  • 標準ではDocker内のDBが利用され、指定したDBを参照する機能はありませんが、開発開始・終了時にDBをインポート・エクスポートして擬似的にDBもファイル管理できるようにします。
• WordPressのコアファイルも同じ開発環境で管理してなるべく見える化する。
  • wp-envは環境を構築した場所とは別のところにあるコアファイルを参照する仕様のため、なるべく本番サーバーと同じ使用感で管理できるよう調整します。
• マルチサイト化する。

Dockerをインストール

wp-envを実行するにはDockerが必要なため、導入していない場合はインストールしてください。

ディレクトリ構成

開発ファイルを src/で管理する構成です。

■プロジェクトディレクトリ
 ┣ .wp-env.json （wp-envの設定ファイル）
 ┣ package.json （プロジェクトのjsonファイル）
 ┃
 ┣ node_modules （編集不要：自動生成されるコアファイル格納場所）
 ┣ package-lock.json （編集不要：インストールしたパッケージ情報などが記載されている）
 ┃
 ┗ src
    ┣ sql/db.sql（データベースの格納場所）
    ┗ wordpress（本体ファイル一式）

初期設定（ファイルのインストール）

構築したいディレクトリへ移動

作業を始める前に設定したいプロジェクトのあるディレクトリまで移動してください。

Windowsでの移動

cd C:¥Users¥.....¥wp-envを構築したいプロジェクトディレクトリ

Macでの移動

cd /Users/....../wp-envを構築したいプロジェクトディレクトリ

package.jsonを作成

以下のコマンドを実行してpackage.jsonを作成します。

npm init -y

wp-env（@wordpress/env）をインストール

npm install -D @wordpress/env

コマンド操作の利便性を上げる npm-run-all をインストール

データベース（DB）関連の処理を並走させるため、npm-run-all を追加します。

npm install -D npm-run-all

github.com

GitHub – mysticatea/npm-run-all: A CLI tool to run multiple npm-scripts in parallel or sequential.

A CLI tool to run multiple npm-scripts in parallel or sequential. – mysticatea/npm-run-all

必要ファイルのダウンロード・作成

データベース用のファイル（.sql）を作成（エクスポート・インポート用）

src/sql/にデータベースの保存先として活用するdb.sql を作成します。中身は空で大丈夫です。

src/sql/sb.sqlを追加

■プロジェクトディレクトリ
 ┣ package.json 
 ┃
 〜省略〜
 ┃
 ┗ src
    ┗ sql/db.sql（db.sqlの中身は空）

WordPress本体のダウンロード

WordPress公式サイトより任意のWordPress本体をダウンロードして、解凍したwordpressディレクトリをsrc/へ追加します。

ja.wordpress.org

ダウンロード – WordPress.org 日本語

Get WordPress Everything you need to set up your site just the way you want it. Download a…

ダウンロードしたwordpress/一式をsrc/へ追加

■プロジェクトディレクトリ
 ┣ package.json 
 ┃
 〜省略〜
 ┃
 ┗ src
    ┗ wordpress（解凍した本体ファイル一式をsrc/へ追加）

wp-env（@wordpress/env）の環境設定ファイル.wp-env.jsonを追加

wp-envの設定を変更するためプロジェクトのルートディレクトリに .wp-env.json を作成します。

.wp-env.json をプロジェクトのルートディレクトリに追加

■プロジェクトディレクトリ
 ┣ .wp-env.json（追加）
 ┣ package.json 
 ┃
 〜省略〜
 ┃
 ┗ src
    ┗ wordpress（解凍した本体ファイル一式をsrc/へ格納）

.wp-env.json の設定

• core にダウンロードしたWordPress本体ファイルを紐づけているため、pluginsやthemesなどのファイル一式も./src/wordpress/配下で管理でき、本番サーバーと同じ使用感でプラグインやテーマの調整が可能です。
• WP_DEBUG、SCRIPT_DEBUGは必要に応じて調整してください。

.wp-env.json の設定例

{
  "core": "./src/wordpress",
  "mappings": {
    "sql": "./src/sql"
  },
  "config": {
    "WP_DEBUG": true,
    "SCRIPT_DEBUG": true
  }
}

【任意】wp-env.json のカスタマイズ例

下記以外にも様々な調整が可能です。その他設定の詳細は公式ドキュメントの.wp-env.jsonの項をご参照ください。

phpバージョンの変更

phpVersion が null の場合は WordPress の製品版リリースで使用されるデフォルトバージョンが使用され、バージョンを指定したい場合は"phpVersion": "7.2" など直接バージョンを指定します。

.wp-env.json

{
  〜省略〜
  "phpVersion": "7.2",
}

詳細は公式ドキュメントのPHPバージョンの指定の項をご参照ください。

一般設定：WordPress アドレス (URL)、サイトアドレス (URL)の変更

config内で「WP_SITEURL（サイトアドレス）」「WP_HOME（WordPress アドレス）」のオプションを渡すことで変更が可能です。

.wp-env.json

{
  〜省略〜,
  "config": {
    "WP_DEBUG": true,
    "SCRIPT_DEBUG": true,
    "WP_HOME": "http://localhost:8888/hoge",
    "WP_SITEURL": "http://localhost:8888/hoge"
  }
}

詳細は公式ドキュメントのデフォルト wp-config 値の項をご参照ください。

ポート番号の変更

.wp-env.json

{
  〜省略〜
  "port": 4013,
  "env": {
    "tests": {
        "port": 4012
      }
    }
  }
}

詳細は公式ドキュメントのカスタムポート番号の項をご参照ください。

マルチサイト化する

.wp-env.json の第1階層に multisite オプションを渡すとマルチサイト化します。

.wp-env.json

{
  〜省略〜
  "multisite": true,
  〜省略〜
}

github.com

gutenberg/packages/env at trunk · WordPress/gutenberg · GitHub

The Block Editor project for WordPress and beyond. Plugin is available from the official r…

package.jsonへコマンドを追加

package.jsonへ各コマンドを追加します。

package.json

{
  "scripts": {
    "wp-env": "wp-env",
    "wp-env-start": "wp-env start",
    "wp-env-stop": "wp-env stop",
    "import-db": "wp-env run cli wp db import sql/db.sql",
    "export-db": "wp-env run cli wp db export sql/db.sql",
    "start": "npm-run-all wp-env-start import-db",
    "stop": "npm-run-all export-db wp-env-stop",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@wordpress/env": "^10.8.0",
    "npm-run-all": "^4.1.5"
  }
}

開発開始・終了コマンド

Dokerを起動させる

wp-envを実行するにはDockerが必要なため、コマンド実行前にDokerを起動してください。

開発開始コマンド

npm run startで開発を開始できます。
※wp-env起動後にカスタムコマンドimport-db も実行され、src/sql/sb.sql からデータベースの内容をインポートして前回までの内容を引き継ぎます。

npm run start

開始コマンド時にエラーが出る場合

wp-envのドキュメントにはDokerのみで動作すると書いてありましたが、Xcodeがインストールされている環境下において以下のエラーが確認できたため、対処法も合わせて記載しておきます。

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

上記エラーが出る場合はコマンドラインツールをインストールすると改善します。

xcode-select --install

開発終了コマンド

npm run stopで開発を終了します。
※wp-env終了前にカスタムコマンドexport-dbが実行され、src/sql/sb.sql へデータベースの内容をエクスポートします。

npm run stop

※npm run stop 実行時に src/sql/sb.sql へ管理画面での編集内容が保存されるため、開発を中断する際には終了コマンドを必ず実行してください。

その他、個別コマンド

npm run start 、npm run stopに格納しているコマンドです。個別に実行したい場合に利用してください。
2種類実行可能ですが先に記載している方はショートハンドとして登録しているもので、どちらも同じ実行結果になります。

wp-envを起動させる

npm run wp-env-start

npm run wp-env start

wp-envを停止させる

npm run wp-env-stop

npm run wp-env stop

データベースをインポートする

npm run import-db

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

データベースをエクスポートする

npm run export-db

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

ローカル環境のURL・ログイン情報

デフォルトのポート番号は8888です。
ポート番号を変更している場合は変更した番号のURLを参照してください。

ローカル環境のURL

• http://localhost:8888/

ログイン情報

• http://localhost:8888/wp-admin/
  • ユーザ名 : admin
  • パスワード : password

参考リンク

• 公式ドキュメント@wordpress/env
• 公式ドキュメント（GitHub wp-env）
• WordPress制作環境の過去と現在、そして未来はどうなる？wp-envの使い方を紹介
• @wordpress/env(wp-env)を使ったWordPress開発環境構築

• Facebook
• X
• LinkedIn
• はてなブックマーク