WordPressをwp-envで手元端末に入れてみた

2021年4月21日 13:14

WordPressを手元のPCに入れようと思いました。Dockerベースで入れようとは思っていたのですが、wp-envという公式ツールを使うと簡単ということで試してみました。
簡単なんですが、必ず2つ環境ができてしまうとか、他のコンテナと組み合わせようとすると結局色々しなければならないのがわかりました。

そうだ、WordPress入れよう

まあ、WordPressくらい知っておいた方が良いと思ったので、手元のPCにサクッと環境を作ることにしました。

とは言え、このご時世なのでDockerを使うのは大前提としていろいろ調べてみると、wp-envというものがあるのが分かりましたので、試してみます。

@wordpress/env - Japanese Team-WordPress.org
https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/

下準備

wp-envを使うには、Node.jsが必要です。直接brewでインストールしても良いのですが、他のことでも使うことが多いので、バージョン問題を抱えたくはありません。なので、anyenvとnodenvを入れることにします。anyenvはインストール済みだったので省略します。

% anyenv install --init
Manifest directory doesn't exist: /Users/XXXXX/.config/anyenv/anyenv-install
Do you want to checkout ? [y/N]: y
Cloning https://github.com/anyenv/anyenv-install.git master to /Users/XXXXX/.config/anyenv/anyenv-install...
%

anyenvがあればnodenvを入れるだけなので、これもサクッと。

% anyenv install nodenv
/var/folders/c8/9gnvv8ln6lx12k16m3r2l7m80000gn/T/nodenv.20210413154857.34111 ~
Cloning https://github.com/nodenv/nodenv.git master to nodenv...
Cloning into 'nodenv'...
remote: Enumerating objects: 18, done.
remote: Counting objects: 100% (18/18), done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 4021 (delta 5), reused 4 (delta 1), pack-reused 4003
Receiving objects: 100% (4021/4021), 732.74 KiB | 991.00 KiB/s, done.
Resolving deltas: 100% (2636/2636), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/node-build.git master to node-build...
Cloning into 'node-build'...
remote: Enumerating objects: 148, done.
remote: Counting objects: 100% (148/148), done.
remote: Compressing objects: 100% (80/80), done.
remote: Total 20372 (delta 60), reused 118 (delta 55), pack-reused 20224
Receiving objects: 100% (20372/20372), 3.61 MiB | 1.43 MiB/s, done.
Resolving deltas: 100% (12962/12962), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/nodenv-vars.git master to nodenv-vars...
Cloning into 'nodenv-vars'...
remote: Enumerating objects: 211, done.
remote: Total 211 (delta 0), reused 0 (delta 0), pack-reused 211
Receiving objects: 100% (211/211), 31.82 KiB | 2.12 MiB/s, done.
Resolving deltas: 100% (76/76), done.
~

Install nodenv succeeded!

最後に本命のNode.jsですが、推奨版の14.16.1をインストール。

% nodenv install 14.6.1
node-build: definition not found: 14.6.1

See all available versions with `nodenv install --list'.

If the version you need is missing, try upgrading node-build:
  git -C /Users/XXXXX/.anyenv/envs/nodenv/plugins/node-build pull

ここまでで下準備完了です。

wp-envをインストール

まずはwp-envをインストールしますが、インストール場所を決めます。ホームディレクトリの下にWordPressフォルダを作り、その下にTestフォルダを作りました。

% mkdir -p ~/WordPress/Test
% cd !$
% nodenv local 14.16.1
% nodenv local        
14.16.1

続いて、Node.jsの初期設定。

% npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) 
version: (1.0.0) 
description: WordPress-Test
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: XXXXX
license: (ISC) 
About to write to /Users/XXXXX/WordPress/Test/package.json:

{
 "name": "test",
 "version": "1.0.0",
 "description": "WordPress-Test",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "XXXXX",
 "license": "ISC"
}


Is this OK? (yes)

ここからwp-envをインストール。

% npm i @wordpress/env --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@1.0.0 No repository field.

+ @wordpress/env@4.0.1
added 162 packages from 141 contributors and audited 162 packages in 28.312s

18 packages are looking for funding
 run `npm fund` for details

found 0 vulnerabilities

これだけでインストール完了です。簡単ですね。

WordPress起動

ここからWordPressを起動します。

コンテナを取ってくるので、最初は時間がかかります。通信環境によりますが、自分の場合は7分くらいかかってしまいました。

% npm run wp-env start

> test@1.0.0 wp-env /Users/XXXXX/WordPress/Test
> wp-env "start"

⚠ Warning: could not find a .wp-env.json configuration file and could not determine if '/Users/woinary/WordPress/Test' is a WordPress installation, a plugin, or a theme.
WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 51786

✔ Done! (in 448s 420ms)

時間はかかりましたが、コンテナが起動してしまえばもう普通にWordPressが使えるはず、です。
コンテナの状況を確認してみました。

wp-envでは本番とテストの2環境を用意してくれるので、DBとWordPressのコンテナが2つずつ起動しています。

早速アクセスしてみるとちゃんと動いています。

色々な知識がなくても、サクッと環境ができるのは便利です。ちょっとWordPressを試してみたい、という時には良いのではないでしょうか。

できた環境をいじってみた

このままで問題なく使えますが、ちょっといじってみることにします。

環境が2つできますが、DBはどちらも同じものを参照したい、というケースもあるでしょう。用途によりけりですが、まあ、あまり褒められたことではないかとは思います。

インストールされたものは、~/WordPress/Testフォルダの下のnode-moduleというフォルダ以下に入っています。テスト用の環境が見ているデータベースを本番を見る様に修正します。

// Environment for test database
const tests = {
       // WORDPRESS_DB_NAME: 'tests-wordpress',
       // WORDPRESS_DB_HOST: 'tests-mysql',
       // 環境も本番DBを参照するように変更
       WORDPRESS_DB_NAME: 'wordpress',
       WORDPRESS_DB_HOST: 'mysql',
};

node_modules/@wordpress/env/lib/config/db-env.jsの一部（抜粋）

                       'tests-wordpress': {
                               // depends_on: [ 'tests-mysql' ],
                               depends_on: [ 'mysql' ],
                               image: testsWpImage,
                               ports: [ testsPorts ],
                               environment: {
                                       ...dbEnv.credentials,
                                       ...dbEnv.tests,
                               },
                               volumes: testsMounts,
                       },

node_modules/@wordpress/env/lib/build-docker-compose-config.jsの一部（抜粋）

ただ、これをやってもwp-envで新しいバージョンを取り直すと上書きされてしまうので、場当たり過ぎる対応です。あまりやらない方が良いかとは思います。

ついでに、起動や終了のスクリプトも書いておきました。いちいち、docker-composeコマンドで上げ下げするのも面倒ですから。

% cat ./wp-start 
#!/bin/sh -f
(cd ~/.wp-env/746fb9a0d874fea6bf363c306287c82c; docker-compose up -d)
% cat ./wp-stop 
#!/bin/sh -f
(cd ~/.wp-env/746fb9a0d874fea6bf363c306287c82c; docker-compose stop)

というわけで、サクッとwp-envで環境を作ってみました。

メリット
・一からWordPressをインストールするために必要なあれやこれやをまとめて面倒見てくれるので、余計なことに煩わされない
・色々、事前にインストールするものがあるが、準備さえできれば作業は簡単。
デメリット
・環境が2つあるのは便利ではあるが、必須でもないので1個で十分な場合はリソースが無駄。
・WordMoveとかphpmyadminとか入れようと思うと、結局、docker-compose.ymlとかいじる必要がある
・いじったファイルはwp-envを再度動かすと上書きされるので、あまりいじるべきではない

私見ですが一長一短ありますので、自分のやりたいことに合わせて選択してみて下さい。

拙い記事でございますが、サポートしてもよいよという方はよろしくお願いします。著者のやる気アップにつながります。