BLOG

ブログ

BRANDING / TRENDKILL

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

前田 大地

前田 大地

wordpress

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

準備

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を使っている人ならたいてい入っているはず。以下のコマンドでインストールできます。

再起動

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

VVVの導入

VVVをインストール

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

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つのサイトの記述は消しちゃいましょう。

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

以下に変更!

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

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

起動

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

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

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

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

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

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

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

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

Wordmoveのインストール

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

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

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

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

・・・失敗。

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

再度Wordmoveをインストール

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

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

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

movefileを作成

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

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

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

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

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

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

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

やってみた感想

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

AUTHOR

この記事を書いた人

前田 大地

Developer / Designer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

FOLLOW US

いいね!して新着情報をチェック

RELATED POST

関連記事

SEVENSIX NOTESEVENSIX NOTE