本番同期も簡単にできるWordPressローカル環境をVCCWで構築した手順メモ

VCCWでWordPressのローカル環境を作る手順

以前はBitnamiで作ったWordPressのローカル環境を使っていて、それなりに事足りてたつもりでしたが、長く使ってると不満に思えるところもあるわけで…

「やっぱり、記事データとか本番同様に最新の状態で使いたい!」となると、サーバーからローカルへのデータの移行とかがわりと面倒でした…

そこで、環境作成はBitnamiに比べてちょっと大変かもしれませんが、一度構築してしまえばコマンド1発で本番のデータをローカルに同期することも可能な環境をVCCWで作りました

その導入手順と設定方法についてメモしておきます。

VCCWのここがいい!

今まではWordPressテーマカスタマイズはBitnamiでローカル環境作っていました。よっひー(@yosiakatsuki)です。

PC・Mac上に仮想的にサーバー立てて、WEBサーバーやDBといったWordPressの動作に必要なものを簡単にごそっと用意できるVCCW。

自分のブログのカスタマイズするだけであればBitnamiで作ったWordPressのローカル環境でも十分でしたが、いくつかBitnamiよりVCCWのほうが「いいね!」って思うところがあり、ローカル環境を移し替えました!

本番データを簡単にローカル環境に同期できる!

ローカル環境作り直しの決め手になったのは本番データを簡単にローカル環境に同期できるようになる点です。

VCCWでWordPressのローカル環境を作ると、WordMoveというツールも使えるようになっていて、このツールを使って簡単に本番のデータをローカルにダウンロード出来るようになります。

今まではphpMyAdminでDBバックアップしてローカルにインポートしたり、サーバー上の画像ファイルをFTPでダウンロードしたり…

それなりに手間だったことがコマンド1発で可能になります!

環境構築と設定にそれなりに時間はかかりますが、1度作ってしまえばこっちのもの!僕にとってはメリットのほうが大きいと感じました!

複数のローカル環境作成が楽

仕事でWordPressの案件をこなすようになってきてから、複数のローカル環境を立ち上げたいときとかにBitnamiだとやや面倒なとこがあったりして…

その点、VCCWならば、既存環境の設定ファイルをコピーして、ちょこちょこっと変えるだけでいくつも環境を作れるようになります。

複数サイトのローカル環境が必要ならBitnamiよりVCCWで環境作っちゃったほうが後々楽かもしれないです。

他にもきっとあるんだけど、個人で使うのにも十分便利

予めインストールしておくプラグインとかを設定ファイルに書けるようになっているので、チームでの開発で真価を発揮するのだと思いますが、個人利用でも十分便利だと思います。

ターミナルをいじる必要があるので、黒い画面に抵抗がある方にはちょっとつらいかもしれませんが、しっかりとしたWordPressの開発環境を準備する必要があるなら環境作成してみてください。

VCCW環境構築

さて、それではVCCWでWordPressのローカル環境を作る手順です。

基本的には下記サイトに掲載されている手順で進めます。

本記事では「ある程度PCの操作に慣れている人向け」な説明にとどめますので、疑問点があればTwitterで訊いてください。

VirtualBoxのインストール

下記サイトから自分の環境に合ったVirtualBoxをダウンロードしてきてインストールします。

特別な設定は特にありません。

Vagrantのインストール

下記サイトから自分の環境に合ったVagrantをダウンロードしてきてインストールします。

特別な設定は特にありません。

vagrant-hostsupdaterのインストール

Vagrantの起動時にhostsファイルを書き換えてくれるプラグインです。

「(Optional)」ということですが、簡単に導入できるので入れておきます。

コレを入れておくと、わざわざ自分でhostsファイルを書き換えなくても、設定ファイルに書いたドメイン名でローカル環境にアクセスできるようになります。

下記のコマンドを実行してインストールします。

$ vagrant plugin install vagrant-hostsupdater

Vagrant boxを追加

VCCWに必要なboxを追加します。

インターネット上からダウンロードしますので、インターネット接続環境下で下記コマンドを実行します

$ vagrant box add miya0001/vccw

結構時間かかりますので気長に待ちます。

VCCWテンプレートをダウンロード

VCCWの動作に必要になるファイルをダウンロードします。

VCCWのファイルを公式サイトからダウンロード

最終的にダウンロードしたZIPを解凍して出てきたフォルダ以下に、WordPressを構成するphpファイル等が入るようになります。

なので、解凍して出てきた「vccw-x.x.x」フォルダをリネームして、任意の場所に保存しておくと後の管理がしやすくなります。

ダウンロードしたVCCWのファイルをコピー&リネーム

ちなみに僕は、ホームディレクトリ下に「VCCW」というフォルダを作り、その中に「tarahako」のようにサイト名にリネームした「vccw-x.x.x」を保存しています。

「site.yml」を作成する

立ち上げるWordPressのサイトの設定を「site.yml」に書いていきます。

default.ymlをsite.ymlにコピー&リネーム

最初はダウンロードした「vccw-x.x.x」内の「provision」フォルダの中に「default.yml」というファイルがあるので、それを「vccw-x.x.x」下にコピーして「site.yml」という名前にリネームします。

いろいろ細かく設定はできるのですが、とりあえず僕は次の箇所のみ変えています。

#
# Network Settings
#
# hostname: vccw.dev  #ローカルサイトのドメイン名
# ip: 192.168.33.10  #ローカルサイトのIP
# sync_folder: 'www/wordpress' #特に変更なし
#ここらへんの設定を変えてみる▼

hostname: tarahako.local  #ローカルサイトのドメイン名
ip: 192.168.33.10  #IPは他のローカルサイトと競合しないようにする
sync_folder: 'www/wordpress' #特に変更なし

#
# WordPress Settings
#

# version: latest
# lang: en_US
# title: Welcome to the VCCW
# multisite: false
# rewrite_structure: /archives/%post_id%
version: latest #バージョンは最新を立ち上げる
lang: ja  #言語は日本語
title: たらハコ LO  #サイトタイトル
multisite: false  #マルチサイトの設定(変更なし)
rewrite_structure: /%postname%  #パーマリンク設定

vagrant upする

作りたいローカル環境の設定が書かれた「site.yml」ファイルのあるフォルダで下記コマンドを実行してWordPressのローカル環境を立ち上げます。

$ vagrant up
パスワードを訊かれる

初回のvagrant upはすごく時間がかかります…

vagrant-hostsupdaterをインストールした場合、コマンド実行後、最初のほうでパスワードを訊かれますので、Macのパスワードを入力します。

ローカル環境が出来上がりました!

処理が完了し、ターミナルが操作できるようになったらローカルサイトの立ち上げ完了です!

ローカル環境を終了させるときは下記のコマンドを実行します。

$ vagrant halt

vagrant-hostsupdaterをインストールした場合終了時にもパスワードを訊かれます。(訊かれない時もあったような…)

WordPressのディレクトリ構成

www/wordpressフォルダがWordPressのルートになる

vagrant upを実行して、仮想環境が立ち上がると、「vccw-x.x.x」だったフォルダの中に「www」フォルダが出来上がり、「www/wordpress」フォルダがWordPressのルートフォルダになります。

テーマの編集などはこのフォルダ内のファイルを編集することになりますので覚えておいて下さい。

Vagrantコマンドメモ

Vagrantの起動は「vagrant up」でしたが、中断や削除のコマンドもあるので、よく使いそうなものをメモっておきます。

#起動
vagrant up

#停止
vagrant halt

#仮想マシンにログイン
vagrant ssh

#状態確認
vagrant status

#破棄
vagrant destroy

WordMoveで本番環境をローカル環境に一発同期

ひとまずここまでVCCWでWordPressのローカル環境を構築するところまで紹介しました。

ここからは、作成したローカル環境に本番データを同期させるための準備をしていきます。

本番サーバーにSSH接続出来るようにしておく

本番データをローカルに同期させるためにはWordMoveというツールを使うことになりますが、その実行にはサーバーにSSH接続出来るようにしておく必要があります。

エックスサーバーでの設定方法であれば、以前設定した手順のメモがあります。

Movefleに接続情報を設定する

WordMoveを実行するために必要な情報を「Movefile」に記述していきます。

「Movefile」の編集はインデントが重要な意味を持ちますので、編集の際は十分気をつけて下さい。(ちなみに僕の場合はインデントは半角空白2文字です。)

元のMovefileから編集した部分をコメントで注記しました。

local:
  vhost: "http://tarahako.local"  #ローカル環境のホスト名を書く
  wordpress_path: "/var/www/wordpress"

  database:
    name: "wordpress"
    user: "wordpress"
    password: "wordpress"
    host: "localhost"

staging:
  vhost: "https://tarahako.com" #本番環境のドメイン
  wordpress_path: "本番環境のWordPressルートディレクトリ" #エックスサーバーの例:/home/サーバーID/本番環境のドメイン/public_html
  database:
    name: "DB名" #DB名 わからなければwp-config.phpを見る
    user: "DBのユーザー名" #DBのユーザー名 わからなければwp-config.phpを見る
    password: "DBのパスワード" #DBのパスワード わからなければwp-config.phpを見る
    host: "DBのホスト" #DBのホスト名 わからなければwp-config.phpを見る
    charset: "utf8"

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"
    - ".htaccess" #追加

# 〜中略〜

#sshから下が最初はコメントアウトされているので、コメントアウト解除する
#「ssh」の開始位置はインデント1つ
  ssh:
    host: "本番環境のホスト名" #本番環境のホスト名(エックスサーバーの場合[サーバーID].xsrv.jp)
    user: "ユーザーID" #エックスサーバーの場合、[サーバーID]
  # password: "password" # password is optional, will use public keys if available.
    port: 10022 # Port is optional SSH接続のポート、レンタルサーバー会社やサーバー設定により違うので、自身の環境を確認
    rsync_options: "--verbose" # Additional rsync options, optional

「exclude:」の部分に同期しないファイルを記述出来るのですが、とりあえず「.htaccess」を追加しておいたほうがいいかもしれません。

リダイレクトや本番サーバー側で使ってるけどVCCWの環境では使えないものの設定が書いてあり、その設定のおかげでローカル環境が動かなくなる可能性があります。(というか動かなくなった)

本番データをローカル環境に同期する

Movefileの設定が完了したら、WordMoveで本番環境からデータを持ってきます。

まずはvagrantにSSH接続します。

$ vargrant ssh

vagrantフォルダに移動し、「wordmove pull」で本番環境からローカル環境へデータやファイルを持ってきます。

全部ごそっと持ってくる場合、「–all」オプションを指定します。

$ cd /vagrant/
$ wordmove pull --all

これもそれなりに時間がかかるので気長に待ちます。

ひとまず、本番環境をごっそりローカル環境に持ってこれました!

データも最新になって、これで本番とほぼ同様の環境で開発できるようになりました!

WordMoveコマンドメモ

「wordmove」コマンドにもいろいろとオプションがありますので、使いそうなものをメモっておきます。

# uploadsフォルダを同期
$ wordmove pull -u

# DBのみ同期
$ wordmove pull -d

# テーマフォルダ(wp-content/theme )を同期
$ wordmove pull -t

#プラグインフォルダを同期
$ wordmove pull -p

#全部まるっと同期
$ wordmove pull --all

過去記事シェア系プラグインに注意

本番環境とローカル環境の同期ですが、過去記事をツイートする系のプラグインには注意してください

過去何回かローカルのURLをTwitterにツイートしたことがあります…

そんな過去もありますので、僕はプラグインの同期はしないようにしています。

DBのデータの同期後にとりあえずエラーが発生しますが、動作的には特に問題ないです。

もし、他にもSNSにシェアするようなプラグインを使っている場合は注意してみてください。

よっしーのひとこと

よっひー

WordMoveはpullオンリーで使ってますが、やっぱり便利です。

特にDB周りの同期は手作業だと面倒なのでホント便利!

ではまた。

参考サイト