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/へ追加）

.htaccessの作成

公式サイトからダウンロードした直後のWordPressファイル内には.htaccessが存在しないため、.htaccessファイルを src/wordpress/ に作成します。

src/wordpress/.htaccess

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

src/wordpress/.htaccessの中身

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

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 の設定

本記事での設定例です。

.wp-env.json の設定例

{
  "core": "./src/wordpress",
  "mappings": {
    ".htaccess": "./src/wordpress/.htaccess",
    "wp-content/languages": "./src/wordpress/wp-content/languages",
    "wp-content/plugins": "./src/wordpress/wp-content/plugins",
    "wp-content/themes": "./src/wordpress/wp-content/themes",
    "sql": "./src/sql"
  },
  "phpVersion": null,
  "config": {
    "WP_DEBUG": true,
    "SCRIPT_DEBUG": true
  }
}

• core にダウンロードしたWordPress本体ファイルを紐づけています。
  • mappings を用いて、ダウンロードしたWordPress本体ファイルのディレクトリを紐づけているので、本番サーバーと同じ使用感でプラグインやテーマの追加が可能です。
    • pluginsやthemesで設定も可能ですが mappingsで設定すると、そのまま wp-content/plugins/やwp-content/themes/にファイルを追加・編集することができるようになります。
• phpVersion が null の場合は WordPress の製品版リリースで使用されるデフォルトバージョンが使用されます。
  • バージョンを指定したい場合は"phpVersion": "7.2" など直接バージョンを指定します。詳細は 公式ドキュメントのPHPバージョンの指定の項をご参照ください。
• WP_DEBUG、SCRIPT_DEBUGは必要に応じて調整してください。

【任意】ポート番号の変更

.wp-env.json

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

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で開発を開始できます。
※この時同時に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で開発を終了します。
※この時同時に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

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

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

npm run export-db

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
• WordPress制作環境の過去と現在、そして未来はどうなる？wp-envの使い方を紹介
• @wordpress/env(wp-env)を使ったWordPress開発環境構築

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