vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期!

      2017/01/30

LINEで送る
Pocket

vccw-wordmove

  1. Macに『Vagrant + VirtualBox』を導入する手順
  2. Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
  3. Vagrantを使ってみよう!Boxの取得から起動・停止・削除まで
  4. 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
  5. Vagrantで仮想マシンに接続&Webサーバを立ち上げてみよう
  6. Vagrantで作成した環境を「コピー&配布して他人と共有する」方法
  7. 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう
  8. 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期! <- 本記事

こんにちは、okutani(@okutani_t)です。VCCWを使うとWordPressのローカル環境がかんたんに作成できて便利です。

VCCWの導入方法は、前回の記事で紹介しています。

LINK『Vagrant+VCCW』でWordPressローカル環境を構築してみよう | vdeep

このVCCWにデフォルトで含まれている『WordMove』プラグインを使うと、本番環境のサーバーとローカル環境の仮想マシンを「完全同期」することができて非常に便利です。

設定ファイルなどはもちろんのこと、データベースの内容もコマンドひとつで同期できます。

当ブログもVCCWで管理していて、ローカル環境でデザインをいじったり、記事を書いてそのまま本番環境にプッシュしています。覚えるとかなり便利です。

今回、サーバーは「エックスサーバー」を使っています。VPSなどでなく、通常のレンタルサーバーでも使えるのが良いですね。

また、本番環境にはSSHで接続できるようにしておく必要があるので、次の記事などを参考に設定を済ませておいてください。

LINKエックスサーバーにSSHで接続してみよう! | vdeep

では、さっそくVCCWとWordMoveを使って、本番環境とローカル環境の同期をおこなってみましょう。

スポンサーリンク

Movefileに接続設定を記述

WordMoveを使うには、VCCWを導入したディレクトリに「Movefile」というファイルがありますので、そちらに設定を記述していきます。

では、Movefileに接続設定を書いていきましょう。適宜、site.ymlで記述した設定にしたがって、記述してみてください。また、3行目のスラッシュは実際には小文字のスラッシュを使ってます。

※インデント(字下げ)が合っていないとエラーになるので注意

local:
  vhost: "http://設定したローカルのホスト名"
  wordpress_path: "/var/www/wordpress" # ←小文字の/を使ってください

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

staging:
  vhost: "http://本番環境のドメイン"
  wordpress_path: "/home/サーバーID/本番環境のドメイン/public_html" # 本番環境のWordPress配置場所

  database:
    name: "サーバーID_hoge" # 本番環境のDB名
    user: "サーバーID_piyo" # 本番環境のDBユーザー名
    password: "password" # 本番環境のDBパスワード
    host: "mysql000.xserver.jp" # 本番環境のDBホスト名
    charset: "utf8"

...省略... 

この下にSSH接続の設定項目があるので、#を取り除いて合わせて記述していきます。

※ここもインデントに注意

  ssh:
    host: "本番環境ホスト名(初期ドメイン)"
    user: "ユーザーID"
    #  password: "passward" # password is optional, will use public keys if available.
    port: 10022 # ポート番号
    rsync_options: "--verbose" # 同期オプション利用

このように記述できたら、WordMoveが利用できるようになります。

実際に本番環境からプルしてみましょう。なお、本番環境のバックアップをとってから作業するようにしておきましょう。操作を誤ると本番環境のデータが吹き飛ぶことがあります……

本番環境からローカルへプルしてみる

Movefileがあるディレクトリを開き、次のコマンドから仮想マシンにログイン。

$ vagrant ssh

仮想環境にログインしたら、wordmoveコマンドが使えるディレクトリ「/vagrant/」に移動します。

$ cd /vagrant/

次のコマンドで「本番環境からすべてのデータを取得(同期)」することができます。

$ wordmove pull --all

ここでエラーが出たら、Movefileのインデントや、SSHの設定項目などを見直してみましょう。それでも解決しなかったら、エラーコードでぐぐってみてください。

ローカル側のドメインをブラウザに入力して、同期できたか確認します。

vccw-wordmove2

本番環境からローカル環境へ、無事同期できたことが確認できました。

うまくサイトが表示されない場合

プルしたあとにうまくサイトが表示されない場合、次の項目を見直してみてください。

wp-config.phpのtable_prefix

私の場合、DBの接頭語が一致していなかったため、サイトを表示すると真っ白の画面になってしまいました。これを解決するには、ローカル側の「www/wordpress/wp-config.php」の次の行を書き換えます。

$table_prefix = 'wp9_';

これでサイトが表示されました。

.htaccessの設定

私の場合、エックスサーバーで設定した「.htaccess」がローカル環境で使えませんでした。次のとおり、Movefileに.htaccessを同期させないように設定を記述してみました。

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

ローカルの.htaccessは次のとおり設定しなおしました。

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


# END WordPress

うまくサイトが表示されなかったときの参考にしてください。

WordMoveのかんたんな使い方

ローカル側で、記事を書いたり、プラグインを追加したり、デザインを変更したりしたあと、次のコマンドで本番環境にプッシュできます。

$ wordmove push --all

また、プッシュ(push)とプル(pull)には、それぞれ次のオプションを取ることができます。

# すべてのファイルを対象
$ wordmove pull(もしくはpush) --all

# データベースのみ対象
$ wordmove pull -d

# uploadsフォルダのみ対象
$ wordmove pull -u

# themeのみ対象
$ wordmove pull -t

# wp-config.phpも対象に含む
$ wordmove pull -c

上記以外のオプションは、「wordmove help pull」などで確認してみてください。

これで便利に本番環境とローカル環境を管理できますね。

まとめ

VCCW+WordMove』で本番環境とローカル環境をかんたんに同期することができました。

今回はエックスサーバーで設定しましたが、さくらレンタルサーバーでもSSHが使えるプラン(スタンダードプラン以上)なら、本記事の内容で同じように利用できることを確認しています。

ただ、以前ロリポップ!で使おうと思ったらMySQLのバージョンの関係で、DBの同期だけができませんでした。今使えるかどうかは試していないので分かりませんが、使えたら便利ですね。

参考になれば幸いです。

  1. Macに『Vagrant + VirtualBox』を導入する手順
  2. Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
  3. Vagrantを使ってみよう!Boxの取得から起動・停止・削除まで
  4. 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
  5. Vagrantで仮想マシンに接続&Webサーバを立ち上げてみよう
  6. Vagrantで作成した環境を「コピー&配布して他人と共有する」方法
  7. 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう
  8. 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期! <- 本記事

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
WordMoveすごく便利ですねー。全部同期するとすこし時間がかかりますが、コマンドひとつでかんたんに同期できるのはいいですね!

 - Vagrant, WordPress

スポンサーリンク

PC用AdSense

PC用AdSense

▼格安のWebサイト制作はじめました▼

格安のWebサイト制作
Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[初心者向け]これだけ読めばOK!WordPress記事投稿の全工程まとめ

こんにちは、okutani(@okutani_t)です。本記事では、WordPr …

WordPressにGravatarを導入してアバターを設定してみよう!

こんにちは、okutani(@okutani_t)です。WordPressでは、 …

WordPressにFeedlyを設置しよう!Feedlyボタンの設置方法3つ

こんにちは、okutani(@okutani_t)です。ブログを運営する上で行っ …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

[WordPress] 記事下に一言コメントを挿入!カスタムフィールドを使ってみよう

こんにちは、okutani(@okutani_t)です。よくブログを読んでいると …

初心者でもOK!WordPress有料テーマ「New Standard」を使ってみよう【PR記事】

こんにちは、okutani(@okutani_t)です。最近はPHPをせこせこ書 …

『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう

こんにちは、okutani(@okutani_t)です。Vagrant1.5以降 …

WordPressでテーブルを利用する方法(HTML+CSS)

こんにちは、okutani(@okutani_t)です。サイトを運営していると、 …

Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう

こんにちは、okutani(@okutani_t)です。本記事では『Vagran …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。