• TOP
  • ブログ
  • vccwでwordpressの環境構築／データ同期を快適に

ブログ

2015/04/23

vccwでwordpressの環境構築／データ同期を快適に

こんにちは。技術Gのオグラです。

wordpressを使用したブログやWEBサイトを作成する際に、環境構築、データ移行を面倒だと感じたことがある方も多いのではないでしょうか。

今回は、そんなwordpressの開発環境構築、データ移行などを容易に行うことができるvccwというツールをご紹介したいと思います。

VCCWとは

vccwとは、ローカルPCに仮想環境を構築するためのツール「vagrant」とインフラ構築自動化ツール「chef」をベースにした、wordpress環境構築ツールです。

その他に、wp-cli、wordmoveといったツールが含まれており、wordpressの各種操作がコマンドラインから実行できたり、ローカル環境とステージング（本番）環境のデータ同期をコマンド１つで実施することができます。

メリット

通常、wordpressの環境構築はMySQLでDBを作成、wordpressのファイルを設置して、インストールといった作業が必要ですよね。 ここからようやく本来の目的であるテーマの開発に着手ができます。

さらに今度はテーマ開発が終わればステージング／本番環境にDBをエクスポート／インポート、パスの書き換え、テーマその他ファイルをアップロードといった作業をしなければなりません。

こういった作業がvccwを使用するとコマンド１つで実現できるので大変便利です。

また、従来はそれぞれのローカルPC内に開発環境を構築していて、微妙に環境が違うためデータの共有が難しいケースもあるかと思います。

vccwはローカルとは切り離された仮想環境内に開発環境を構築しますので、 複数PC、複数メンバーで環境を共有した開発といったことも比較的容易に行えるのではないかと思います。

前提

今回は以下で動作を確認しています。

  • OS : Mac OSX Yosemite(10.10.3)
  • VCCW : 2.5
  • VirtualBox : 4.3.26
  • Vagrant : 1.7.2

事前準備

以下を事前にインストールしてください。

  • Virtualbox 4.3以上
  • Vagrant 1.5以上
  • vagrant-hostsupdater
    vagrantのインストール後、以下コマンドを実行してください。
$ vagrant plugin install vagrant-hostsupdater

インストール&起動

まずはデフォルトの設定で環境を構築してみましょう。

  1. 公式サイトから、zipファイルをダウンロードします。
  2. ダウンロードしたzipファイルを任意のディレクトリに展開します。
  3. 展開したディレクトリに移動し、vagrant upを実行します。

数分でVagrant上の仮想環境にwordpressの環境が構築されます。
処理が終わりましたら、http://wordpress.localにアクセスしてみてください。
wordpressのtwentyfifteenの画面が表示されていれば環境構築は完了です。

vccw_1.png

どうでしょうか、今までMySQLでデータベースを作成して、apacheの設定を追加して...といった作業を実施していたのが コマンド一つで終了します。

停止

作成した仮想環境を停止する場合は以下コマンドを実行します。

$ vagrant halt

削除

作成した仮想環境を削除する場合は以下のコマンドを実行します。

$ vagrant destroy

その他、vagrantのよく使用するコマンドを簡単に列挙しておきます。

  • SSH接続で仮想環境へログイン
$ vagrant ssh
  • 仮想環境の状態確認
$ vagrant status
  • 仮想環境の再起動（halt & up）
$ vagrant reload
  • 仮想環境のプロビジョニング
$ vagrant provision

詳細は、vagrantのドキュメント等をご参照ください。

site.ymlを使用して環境構築を設定

続いて、vccwでは設定ファイルsite.ymlを編集することで任意の設定でwordpressの環境を構築することが可能です。

site.ymlの作成

今度は先程とは別のディレクトリに上記と同様にvccwのzipファイルをダウンロード、展開します。
展開したディレクトリ内は以下のような構成になっているかと思います。

.
├── LICENSE
├── README.md
├── Vagrantfile
└── provision
    ├── cookbooks
    ├── default.yml // これをコピー
    └── site-cookbooks

ここで、provision/default.ymlというファイルを1つ上の階層、Vagrantfileがあるディレクトリにコピーし、 コピーしたdefault.ymlをsite.ymlにリネームします。

.
├── LICENSE
├── README.md
├── Vagrantfile
├── provision
│   ├── cookbooks
│   ├── default.yml
│   └── site-cookbooks
└── site.yml // ペースト＆リネーム

site.ymlの編集

次に、作成したsite.ymlを編集していきます。こちらは、yamlというファイル形式で記述されています。
詳しくは、こちら等を参照して頂きたいのですが インデントがデータ構造を示すものになるので、インデント位置に注意しながら編集します。 #がコメントアウトになります。
簡単に設定する内容をコメントで記載しています。

# ======================
# General Settings
# ======================

wp_box: miya0001/vccw
chef_cookbook_path: ./provision

 # ======================
 # Network Settings
 # ======================
 # URLの設定
 # デフォルトから変更し、「wordpress.local2」にします。
 hostname: wordpress.local2
 # 割り振るIPアドレスの設定
 ip: 192.168.33.11
 # ホストマシン(PC)側で共有するディレクトリを設定
 sync_folder: 'www'

 # ======================
 # WordPress Settings
 # ======================
 version: latest
 lang: ja
 # サイトのタイトルを設定
 title: Welcome to the VCCW
 # マルチサイト設定の有無
 multisite: false
 # パーマリンクの設定
 rewrite_structure: /archives/%post_id%

 # ======================
 # WordPress Path
 # ======================
 # wordpressのゲストマシン（仮想環境）でのパス設定
 document_root: '/var/www'
 # wordpressの「サイトアドレス」に設定
 wp_home: '' # Path to the WP_HOME like "wp"
 # wordpressの「wordpressアドレス」の設定
 wp_siteurl: 'wp' # Path to the WP_SITEURL like "wp"

 # ======================
 # WordPress User
 # ======================
 # wordpress管理画面のログインID,パスワード、管理者用メールアドレスを設定
 admin_user: admin
 admin_pass: admin
 admin_email: vccw@example.com

 # ======================
 # WordPress Database
 # ======================
 # DBのprefixを設定
 db_prefix: wp_
 # DBのhostを設定
 db_host: localhost

 # ======================
 # WordPress Default Plugins
 # Plugin's slug or url to the plugin's slug.
 # ======================
 # vccw構築時に追加しておきたいプラグイン名を入力
 plugins:
 - dynamic-hostname
 - wp-total-hacks
 - tinymce-templates

 # ======================
 # WordPress Default Theme
 # Theme's slug or url to the theme's .zip.
 # ======================
 # テーマファイルの設定。
 # 今回はtwentyfourteenのテーマを指定してみます。
 theme: 'twentyfourteen'

 # ======================
 # WordPress Options
 # ======================
 # wordpress管理画面ブログの説明
 options:
 blogdescription: Hello VCCW.

 # ======================
 # The values of wp-config.php
 # ======================
 # 管理画面のアクセスにSSLを強制
 force_ssl_admin: false
 # デバッグモードの有無設定
 wp_debug: true
 savequeries: false

 # ======================
 # Theme unit testing
 # ======================
 theme_unit_test: false
 theme_unit_test_uri: https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml
 # theme_unit_test_uri: https://raw.githubusercontent.com/jawordpressorg/theme-test-data-ja/master/wordpress-theme-test-date-ja.xml

 # ======================
 # DB will be reset when provision
 # ======================
 # provisionした際にDBをリセットするか
 reset_db_on_provision: true

（参考）wordpressをサブディレクトリにインストールする場合


wordpressをサブディレクトリにまとめるケースもあるかと思います。
その場合は以下の様に記述することで設定ができます。

例）/var/www/wp以下にインストール

wordpressのコアファイルをサブディレクトリwp/にインストールする場合の設定例です。

document_root: '/var/www'
wp_home: ''
wp_siteurl: 'wp'

上記はそれぞれ、wordpressの管理画面の「設定」→「一般」の以下項目に対応しています。

  • wp_home : 「サイトアドレス」
  • wp_siteurl : 「wordpressアドレス」

site.ymlを使用して環境構築

さて、編集が終わりましたら先程と同様にvagrant upを実行して下さい。
環境構築処理が終了し、今度はhttp://wordpress.local2にアクセスしてみてください。
twentyfourteenのテーマでサイトが表示されていればOKです。

vccw_2.png

以上でsite.ymlを使用したローカル環境の構築は終了です。

wordmoveを使用したステージング（本番）環境とのデータの同期

さらにvccwでは、wordmoveというruby gemを使用して環境間のデータ同期も容易に行うことができます。

通常ローカル環境のwordpressをステージング（本番）環境へ移行するにはDBのエクスポート／インポート、URLの書き換え、ファイルのアップロードといった手順が必要になるかと思いますが、vccwを使用すればコマンド一つで環境間のデータ同期が可能になります。

※ステージング（本番）環境にwordpressのインストールがされていない場合は
事前にwordpressのインストールを実施します。

以下、手順を見ていきましょう。

Movefileを編集

vagrant upを実行しvccwによる環境構築が終了すると、Movefileというファイルが作成されているかと思います。 こちらにステージング（本番）環境の設定をMovefileに記述します。

こちらも先程のsite.ymlと同様、yaml形式で記述されています。
こちらもインデントの位置に注意しながら編集して下さい。

stagingのssh,ftpの箇所はデフォルトの状態で#でコメントアウトされています。
必要に応じて設定したい箇所の#を削除して下さい。

# ローカル環境の設定
local:
  vhost: "http://wordpress.local2"
  wordpress_path: "/var/www/wp"

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

# ステージング（本番）環境の設定
staging:
  vhost: "http://example.com" # 公開URLを設定
  wordpress_path: "/var/www/your_site" # サーバー上のパスを設定

  database:
    name: "database_name" # データベース名
    user: "user" # ユーザー名
    password: "password" # パスワード
    host: "localhost" # ホスト名

  exclude: # 同期の対象から除外するファイル群を指定
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"

  # paths: # you can customize wordpress internal paths
    # wp_content: "wp-content"
    # uploads: "wp-content/uploads"
    # plugins: "wp-content/plugins"
    # themes: "wp-content/themes"
    # languages: "wp-content/languages"
    # themes: "wp-content/themes"

  # ステージング（本番）環境のSSHアカウントを記述します。
  ssh:
    host: "host" #ホスト名
    user: "user" #ユーザー名
    # password: "password" # パスワード password is optional, will use public keys if available.
    # port: 22 # ポート番号 Port is optional
    # rsync_options: "--verbose" # rsyncのオプション Additional rsync options, optional
    # gateway: # Gateway is optional
    # host: "host"
    # user: "user"
    # password: "password" # password is optional, will use public keys if available.

  # FTP接続の場合はこちら
  # ftp:
    # user: "user"
    # password: "password"
    # host: "host"
    # passive: true

# 複数の環境を設定することも可能です。
# production: # multiple environments can be specified
  # [...]

wordmoveコマンドを使用してローカルとステージング間での同期

さて、ファイルの編集が終わりましたので実際に同期作業を行っていきます。
まず、sshでゲストマシン（仮想環境）にログインします。 vccwのディレクトリで以下コマンドを実行します。

$ vagrant ssh

次に、Movefileのあるゲストマシン（仮想環境）上の/vagrantディレクトリへ移動します。
※vccwの環境構築時にホストマシン（PC）のvccwディレクトリとゲストマシン（仮想環境）の/vagrantディレクトリは同期されています。

$ cd /vagrant

ここでwordmoveコマンドを実行します。

$ wordmove push -e staging --all

以上でローカル環境の内容が全てステージング（本番）環境に同期されます。

wordmoveコマンドについて

wordmoveのコマンドについて簡単にご説明します。
pushとpullという２つのコマンドがあり、 それぞれ、以下の動作になります。

  • push: ローカル環境→ステージング（本番）環境へ同期
  • pull: ステージング（本番）環境→ローカル環境へ同期

wordmoveコマンドのサンプル

さらに、オプションで同期対象のデータを指定します。 以下にコマンドのサンプルをいくつかご紹介します。

  • ローカル環境のデータを全てステージング（本番）環境へ反映
$ wordmove push --all
  • ステージング（本番）環境のデータをローカル環境へ全て反映
$ wordmove pull --all
  • ローカル環境のテンプレートファイルのみをステージング（本番）環境へ同期
$ wordmove push -t
  • ステージング（本番）環境のデータベースをローカル環境に同期
$ wordmove pull -d
  • 複数の環境を設定している場合は環境を指定します。 staging（ステージング）環境にすべてのデータを同期する
$ wordmove push -e staging --all

その他、オプションは以下で一覧が確認できます。

$ wordmove push help
$ wordmove pull help
  • 引数の一覧
  -w, [--wordpress], [--no-wordpress]
  -u, [--uploads], [--no-uploads]
  -t, [--themes], [--no-themes]
  -p, [--plugins], [--no-plugins]
  -l, [--languages], [--no-languages]
  -d, [--db], [--no-db]
  -v, [--verbose], [--no-verbose]
  -s, [--simulate], [--no-simulate]
  -e, [--environment=ENVIRONMENT]
  -c, [--config=CONFIG]
      [--no-adapt], [--no-no-adapt]
      [--all], [--no-all]

補足

wordmoveでDBのpush,pullを実行した際には、ローカルのwp-content以下に必ずDBのバックアップを取る仕組みになっていますので、何かあればそこから復旧することもできます。

画像、テーマ、プラグイン等のファイルはバックアップされないため、ステージング（本番）環境で他の方が作業をされるような場合には同期に際して注意が必要です。

FTPでの接続をテストしてみましたが、wordpressをサブディレクトリにインストールしているとDB同期の際にバックアップのステップでエラーになるようでした。 その場合はwordmoveでDB以外の移行を行い、DBのみ別途wp-cli等でDBのエクスポート、インポート作業をする必要がありそうです。

まとめ

以上、簡単ですがvccwを使用したwordpressのローカル開発環境構築とステージング（本番）環境とのデータ同期についてご紹介しました。

従来のwordpressの開発フローに不便さを感じていた方や、複数人での環境の共有にお悩みの方はぜひ一度お試しください。

前に戻る
一覧に戻る
次に進む