VVVにWordmoveをインストールしてWordPressのテーマ開発・デプロイ環境を整える

WordPress

前田大地

2020年1月23日

現在、セブンシックスではWordPressのテーマ作成環境にVCCWを使っていますが、PHPがいつまでたっても7.0のままだったりするので、以前使っていたVVVを改めてインストールしてみることに。VVVには標準でWordmoveが入っていないので、手動でインストールしました。

準備
VVVの導入
Wordmoveのインストール
おまけ｜VCCWのPHPを変更する
やってみた感想

準備

VirtualBoxをインストール

VirtualBoxの最新版は6.1。でも、6.1だとVVVは動きませんでした。ドキュメントでは5.2+とあるので、5.2.xを入れてみたら動きました。
https://www.virtualbox.org/

Vagrantをインストール

Vagrantの最新版は2.2.6。VVVのドキュメントでは2.2.4+と書いてあります。とりあえず、最新版の2.2.6でやってみたら動きました。
https://www.vagrantup.com/

Vagrant Hosts Updaterをインストール

ホスト名で仮想マシンにアクセスできるようにしてくれるVagrantのプラグインです。VCCWを使っている人ならたいてい入っているはず。以下のコマンドでインストールできます。

$ vagrant plugin install vagrant-hostsupdater

再起動

PCを再起動しないとネットワークの問題が発生する可能性があるそうなので、おとなしく従います。

VVVの導入

VVVをインストール

VVVをGitリポジトリから入手します。以下のコマンドを実行すると「vagrant-local」というフォルダの中に「VVV」というフォルダが作られて、VVVのファイル一式が入ります。

$ git clone -b master git://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vagrant-local

VVVの設定ファイルを新規作成

「VVV/config/default-config.yml」というファイルがあるので同階層に複製して名前を「config.yml」に変更します。これが、VVVの設定ファイルになります。

WordPressでいうところの「wp-config-sample.php」を複製して「wp-config.php」を作るみたいなイメージですね。default-config.ymlを直接編集しても反映されますが、VVVをアップデートしたときに上書きされちゃうみたいです。おとなしく複製して使いましょう。

サイトの設定

VCCWでは、サイトごとに仮想環境を立ち上げていましたが、VVVではひとつ立ち上げてその中で複数のサイトを動かすイメージ？のような気がします。サイトの管理は、先ほど作成した「config/config.yml」を使います。

設定ファイル「config/config.yml」をテキストエディタで開いて「sites:」以下のセクションを編集します。デフォルトでは4つのサイトが記述済みです。

wordpress-one: プラグインのビルド、テストなどに役立つ標準のWordPressその1
wordpress-two: プラグインのビルド、テストなどに役立つ標準のWordPressその2
wordpress-trunk: WordPressのコア開発用（デフォルトではプロビジョニング時にスキップされるので作成されない）
wordpress-meta-environment: WordPressチームによって維持されているメタ環境がどうたらこうたら（デフォルトではプロビジョニング時にスキップされるので作成されない）

今回は、この4つは使いません。新しいサイトをひとつ作り、はじめからある上記4つのサイトの記述は消しちゃいましょう。

この長ったらしい記述を、

# These are your websites, and their names map on to the folders they're
# located in. See the docs for how to define these, and what all the keys
# and options are
sites:

  # latest version of WordPress, can be used for client work and testing
  # Check the readme at https://github.com/Varying-Vagrant-Vagrants/custom-site-template
  wordpress-one:
    skip_provisioning: false
    description: "A standard WP install, useful for building plugins, testing things, etc"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - one.wordpress.test
    custom:
      wpconfig_constants:
        WP_DEBUG: true
        WP_DEBUG_LOG: true
        WP_DISABLE_FATAL_ERROR_HANDLER: true # To disable in WP 5.2 the FER mode

  wordpress-two:
    skip_provisioning: false
    description: "A standard WP install, useful for building plugins, testing things, etc"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    custom:
      # locale: it_IT
      delete_default_plugins: true
      install_plugins:
        - query-monitor
    hosts:
      - two.wordpress.test

  # The following commented out site configuration will create a standard WordPress
  # site in www/example-site/ available at http://mysite.test.
  # Remember, whitespace is significant! Tabs and spaces mean different things
  #mysite:
  #  description: "My website"
  #  repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
  #  hosts:
  #    - mysite.test

  # The wordpress-develop configuration is useful for contributing to WordPress Core.
  # It uses the built WP to serve the site
  wordpress-trunk:
    skip_provisioning: true # provisioning this one takes longer, so it's disabled by default
    description: "An svn based WP Core trunk dev setup, useful for contributor days, Trac tickets, patches"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template-develop.git
    hosts:
      - trunk.wordpress.test

  # The following commented out site configuration will create a environment useful
  # for contributions to the WordPress meta team, .e.g WordCamps, .org, etc:
  wordpress-meta-environment:
    skip_provisioning: true # disabled by default, this takes a long time to provision
    description: "An environment useful for contributions to the WordPress meta team."
    repo: https://github.com/WordPress/meta-environment.git
    hosts:
      - wp-meta.test
    custom:
      provision_site:
        "buddypressorg.test": true
        "jobs.wordpressnet.test": true
        "wordcamp.test": true
        "wordpressorg.test": true
        "wordpresstv.test": true

  # The following commented out site configuration will create a standard WordPress
  # site in www/example-site/ available at http://my-example-site.test.
  # Remember, whitespace is significant! Tabs and spaces mean different things
  #example-site:
  #  repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
  #  hosts:
  #    - my-example-site.test

以下に変更！

# These are your websites, and their names map on to the folders they're
# located in. See the docs for how to define these, and what all the keys
# and options are
sites:

  mysite:
    skip_provisioning: false
    description: "My website"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - mysite.test
    custom:
      locale: ja

ものすごくスッキリしましたね。どうせ元のファイルは残っていますから大胆にいきましょう。WordPressの言語は日本語にしています。日本人だもの。

上記例だと「mysite」という文字列が、www配下に作られるフォルダ名として使われます。あと、DB名にも使われます。DBのユーザ名とパスはどっちも「wp」です。DB情報は、サイトが作られた後にwp-config.phpを見れば書いてあります。

起動

VVVディレクトリに移動した状態で、vagrant upします。

$ cd ~/vagrant-local/VVV
$ vagrant up

いろいろはじまりまって終わるまで時間がかかります。みんなこれが遅いとか文句を言いますけど、トランキーロ、あせんなよ。

VVVのダッシュボードにアクセス

VVVが立ち上がったら、ダッシュボードにアクセスしてみましょう。
http://vvv.test/

config.ymlに記載したサイトの情報が表示されているはずです。phpMyAdminとかもダッシュボードからアクセスできます。ノンプログラマの私としては、ダッシュボードがあるという事実になんとも言えない安心感を感じます。

プロビジョニングのスキップ設定

config.ymlのサイトの設定のところでskip_provisioningをtrueにしておけば、次回以降のプロビジョニング時にそのサイトをスキップしてくれます。

# These are your websites, and their names map on to the folders they're
# located in. See the docs for how to define these, and what all the keys
# and options are
sites:

  mysite:
    skip_provisioning: true
    description: "My website"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - mysite.test
    custom:
      locale: ja

私は、最初に一回プロビジョニングしたサイトは、すぐにskip_provisioningをtrueにしてしまい、また必要なときだけfalseに戻すようにしています。

Wordmoveのインストール

VVVにはWordmoveが標準でインストールされていないので、手動で入れないといけません。正直、このインストール作業にはとても手こずりました。というのも、Wordmove公式に書かれているやり方だとうまく行かなかったからです・・・。

vagrantマシンにssh接続します。

$ vagrant ssh

rubyをインストールします。

$ sudo apt install ruby

Wordmoveをインストールします。

$ gem install wordmove

・・・失敗。

権限がないと怒られたので、ディレクトリを書き込み可能にする。

$ cd /var/lib
$ sudo chmod -R a+w gems/

再度Wordmoveをインストール

$ gem install wordmove

rubyのバージョンが低くて最新のWordmoveが入れられないらしい。Wordmoveのバージョンを落としてインストールしてみます。

$ gem install wordmove -v 4.0.1

できたー！Wordmoveのバージョンは最新じゃないけど、VCCWのWordmoveは2.4.0だったので、それよりはずっと新しいですね。

サイトのディレクトリに移動

$ cd /srv/www/mysite

movefileを作成

$ wordmove init

movefile.ymlが作られているので編集します。VCCWは最初からローカルの情報が入っていましたが、今回は自分で入力しないといけません。

vhostはサイトのURLで、wordpress_pathはWordPressディレクトリの絶対パスです。WordPressを専用ディレクトリに設置している人は注意しましょう。
https://github.com/welaika/wordmove

Wordmoveの詳しい使い方だったり、サーバのSSH接続の話とかは省略します。そのあたりの情報は、調べれば日本語でたくさん出てきます。

リモートからサイトを取得してみる。vagrant sshして、movefileのあるサイトディレクトリに移動した状態で以下のコマンド。

$ wordmove pull --all

できたー！
できない人は、Wordmoveの設定かSSH接続に問題があると思います、ドンマイ。

おまけ｜VCCWのPHPを変更する

VCCWのPHPを7.2にしてみました。こっちのほうがなんだかんだで早いような気も・・・
VCCWでPHPのバージョンを7.2 / 7.3 / 7.4にする方法

$ vagrant ssh
$ sudo apt-get install python-software-properties
$ sudo add-apt-repository ppa:ondrej/php
$ sudo apt-get update
$ sudo apt-get install -y php7.2

やってみた感想

WordPressのローカル開発環境は選択肢が多いですけど、VVVの日本語記事はあまり見かけない気がするので、誰かの参考程度にはなるかなと記事にしました。他の人の記事を見た限りではトレンドは完全にDockerですね。私はdocker-composeで環境をサクサク作れるところまでは楽しかったのですが、Wordmoveを導入するところで挫折。修行が足りませんでした。。