Windows10にVCCWとVAGRANTでWordPressのローカル環境構築【実用編】

では前回の「導入編」でソフトのインストールが完了してるものとして進めて行きます！

※ちなみに前提としてこの記事は「既にサーバーにアップしてあるWordPressのデータを、ローカル環境に楽に引っ張って来て、尚且つローカルでいじったものをまたサーバー側に楽にUPする」っていう事を目的としたVAGRANT記事となります。

※つまり下記の方は対象外となります。

「サーバーにWPのデータなんてまだUPしてません！」

「サーバーとか借りてません！ローカルでしかファイル作ってません！」

「データベース？なにそれ？」

 っていう方はまだこの記事は早いかもしれません。

追記＠2019/12/15

下記の組み合わせのバージョンでも動きました。

・Vagrant　2.2.6

・VirtialBox　5.2.34

・Git　2.15.1.2

・Ruby　2.3.3

①VCCWで元になるファイルをゲット

 前回の導入編で必要なソフトはインストール済みだと思いますが、もうひとつzipファイルで持っておくべきファイルがありますのでダウンロードしておきましょう。

ダウンロード

http://vccw.cc/

右上のzipをダウンロードしておけばOKです。

さらにファイルを編集するテキストエディタがあれば完璧です。

ちなみに俺は「Sublime Text」を使ってます。

使いやすくて重宝してます。

②VCCWのファイルを編集

ダウンロードした「vccw」フォルダを解凍し、デスクトップにでも置いておきましょう。

で、ダウンロードしたやつはそのまま残してコピーで複製を作っておきましょう。

残しておいた方は「原本」扱いにして次回のサイト作成時にまた複製して使う為に置いておくと楽ですね。

さらに任意の分かりやすい名前にリネームしましょう。

例えば自分のブログという意味で仮に「myblog」にリネームしたとして解説します。

そしてフォルダの中に入ると「provision」というフォルダがあるのでその中を開いてみて下さい。

恐らく「default.yml」というファイルがありますので、お持ちのテキストエディタで開きます。

上記の赤い四角の部分、2ヵ所だけ修正が必要な場所があります。

18～19行目辺り

default.yml内

hostname: vccw.test
ip: 192.168.33.10

こういう記述があると思います。

そこを

default.yml内

hostname: myblog.test
ip: 192.168.33.11

という形で変更し、拡張子も「.dev」から→「.test」とかに変更。元々「.test」だった場合はそのままtestでOK

「.dev」のままでもよかったんですが、ローカル開発中にクロームで開けなくなるという問題があったので今は推奨しません。

もしかすると「.test」も今後はどうなるかは分かりませんが。

（この記事は2018/1月現在の情報となります）

（さらに2019/6月にリライト済みです）

ipの方も末尾の数字を10から11に1つ増やしてあります。

これはまた別の案件等で次のファイルを増やしたりすれば12…13…と別のipを被らないように指定して行く形になります。

 ※初回の場合は10のままでも問題はないと思います。

取り合えずはこの「default.yml」のファイルしか触るものはありません。

ここの修正が終わったらファイルを上書き保存。

③hostsへの追記

これは必要だったり必要じゃなかったりする設定となりますが

一応やっておくに越した事はないので説明を書いておきます。 

お使いのPCの

 「C:\Windows\System32\drivers\etc\」

 の場所に「hosts」ファイルというものがあります。

※上記をフォルダで開けば↓こんな感じで出てきます

この「hosts」っていうファイルを一度デスクトップとかにコピペしてから、そのファイルをまたテキストエディタで開いて下さい。

 ※権限の問題で、そのフォルダ内にある状態ではいじれないからです

そして開いたファイルに既にいろいろと書かれてるとは思いますが

一番最後の行の下に改行して

192.168.33.11 myblog.test

これを追記します。

先ほど「default.yml」のファイルの時に修正したipとhostnameの内容と同じ記述通りに書きます。

ファイルを上書き保存したらまた先ほどの

 「C:\Windows\System32\drivers\etc\」

 の場所にコピペで上書き保存して下さい。

設定によるかもですが管理者権限でしか上書きが実行出来なかったりします。

④いよいよコマンドプロンプトを利用

 さぁこれで準備は整った！（はず）

そう、ついにあの恐怖の白黒の画面です。

初心者にとってあのコマンドプロンプトの画面は何か抵抗ありますよね。

でも大丈夫です。

そんなに難しい事は必要ありません。

それではお使いのPCのアプリケーション一覧から

→「WINDOWSシステムツール」

→「コマンドプロンプト」

→右クリックで「その他」→「管理者として実行」

で起動させて下さい。

例えばこんな画面が出たりしますが

コマンドプロンプト内

C:\WINDOWS\system32>

気にせず次の1行を打ち込んでエンターです。

 ※ちなみにデスクトップ上に先ほどのリネームしたフォルダを置いてる状態が前提です

コマンドプロンプト内

cd C:\Users\【PCのユーザー名】\Desktop\myblog

【PCのユーザー名】の部分はローカルディスク（C）→ユーザーで入った時にフォルダに表示されてる名前でいけるんじゃないかなと。

最後の「myblog」の部分はvccwのフォルダを任意でリネームした時の名前の事です。

ちなみに大文字とか小文字とか関係ないと思う。

「cd」ってのは階層を移動するコマンドです。

つまり上記の1行は先ほどのリネームしたvccwのフォルダにコマンドプロンプトを使って入り込んだ状態ですね。

例えば、「cd ../」って打ち込めばHTMLの書き方のように1つ上の階層に上がる訳です。

 コマンドプロンプトを使ってフォルダの中を行き来してるイメージで考えてもらえればOKです。

で、上記コマンドが成功すれば（階層が合ってれば）こんな感じになると思います。

※ちなみにD:のドライブにデスクトップを移動させてる人はD:へ階層を移動して使う訳です。

とにかくcdコマンドでさっきのVCCWフォルダがある場所まで移動すればおｋです。

コマンドプロンプト内

C:\Users\【PCのユーザー名】\Desktop\myblog>

これでmyblogフォルダの中にいる状態です。

次にいよいよVAGRANTを利用して行きます。

未だに「で、VAGRANTって何やねん？」と思ってる方もいるかもしれませんが

ご安心下さい、俺も思ってます！

⑤VAGRANT UP

引き続きコマンドプロンプトで次の1行を打ち込んでみましょう。

 さぁ

コマンドプロンプト内

vagrant up

成功すればずらずら～っと記述が表示されながら5～10分くらい待たされます。

気長に待ちましょう。

ちなみに2回目以降はけっこう早いです。

ずらずら～っと出る表示を見ても何かよく分からないとは思いますが

もしエラーっぽい記述が出る場合は何かがうまくいってないって事なんですが

タイムアウトっぽいエラーが出る事も多いので

何度か上記vagrant upコマンドを試してみて下さい。

ちなみにキーボードの↑キーを押すと入力した履歴が出てくるので楽です。

それと「Virtual Box」のソフトを起動させておくと、今どういう状態なのかが目に見えて分かるのでオススメかも。

最初は見ても意味分からんけどね。

※基本的にはコマンドプロンプトさえ開いてれば他の導入したソフトとかは何も開く必要はないです

⑥VAGRANT UPの時点でエラーが出る人

この時点でのエラーはけっこう致命的です。

なんせ原因が特定しにくい…

ソフトの入れ直しやhostsファイルの記述等、ミスがないか再確認するしかないかも。

ちなみに「Virtual Box」を起動させてたら、エラーの内容が表示する事があるんだけど

仮想化支援機能ってのがうまく使えない場合はPCの設定の問題があるかもです。

俺も最初そうだったんだけどBIOSの設定で仮想化支援機能が無効になってる可能性があります。

「仮想化支援機能　BIOS」とかでググってBIOS内で有効にしてみて下さい。

この辺はIntelかAMDかで内容が変わってくるんで各自で調べた方がいいです。

つまり、ソフトとかの導入は完璧でファイル記述もコマンド入力も完璧の状態なのに

PC自体の設定でそれらが使えない状況になってるだけって事。

2018年4月：追記

「vagrant box」っていうのを入れないといけないんですが

古い記事のものでは使えなくなってます。

インストール出来ない状態っぽいです。

んで、俺も新しいPCで環境作る時とかに苦労したんですが

やっとインストール方法が分かったので載せておきます。

コマンドで以下のものを入れたらボックス入りました。

vagrant box add vccw-team/xenial64 https://vagrantcloud.com/vccw-team/boxes/xenial64/

んで、さらに「Vagrantfile」の中もいじらないといけないかもです。（いらんかもです）

config.vm.box = "vccw-team/xenial64"

使うboxのバージョン追記する感じです。

元々どっかに似たような記述があるので、そこを変更する感じですね。

 詳しくはこちらに書かれてるやつです。

https://app.vagrantup.com/vccw-team/boxes/xenial64

さらにコマンドで

vagrant init vccw-team/xenial64

これ入れる必要があるかもです。（いらんかもです）

んで、後はエラーの原因っぽかったやつが「vccw」のバージョンについて。

vccwのサイトを久々に見たんですが 

http://vccw.cc/

vccwのバージョンが3.18.0とかになってますね。 元々ずっと使ってたやつが3.8.0だったのでだいぶ新しくなってる模様。

で、他のPCで環境構築してる時に3.8.0でエラーが出て先に進めなかったもんで 思い切って3.18.0を使ってみました。

そしたらやはりエラーが出たんですが Vagrantfileの中の

ansible.compatibility_mode = "2.0"

の行を全て（3ヵ所）

# ansible.compatibility_mode = "2.0"

みたいな感じでコメントアウトしたらvagrant upが無事にできました！

⑦VAGRANT UPがうまくいった人

けっこう長い時間待たされて成功したっぽい人は先ほどのリネームしたvccwのフォルダの中を開いて見てみて下さい。

恐らく「wordpress」っていうフォルダが出来てたり、「Movefile.yml」っていうファイルが作られているはずです。

↓こんな感じになってればOK。

これらがあればvagrant upはひとまず成功です。

次のステップに進みましょう！

⑧Movefile.ymlを編集する

ここからはちょっとややこしいです。

でもこれを乗り切れば後は楽勝なローカル開発環境が待ってます。

先ほどのvagrant upによってリネームしたvccwフォルダの中に「Movefile.yml」が作られたはずなのでそれをテキストエディタ等で開きます。

編集する箇所はけっこう多いのでミスのないように1つずつ慎重に埋めて行きましょう。

ちなみにMovefileはけっこうシビアで、インデント1つ間違えただけで動かないパターンもあるらしいので気を付けて作業しましょう。

↓中はこんな感じになってると思います。

※既に記述済みのスクショなので一部モザイク処理してあります

 では1つずつ変更して行きましょう。

以下、Movefile.yml内

・local:

まずはlocalの箇所。ここは何もいじりません。

・database:

これはlocalの方のデータベースの記述。これもいじりません。

・production:

↓の中の

・vhost: "http://example.com"

ここにサイトURLをそのままhttp～から記入します。

もしドメインを利用してたとしてもそのままhttp://ナントカ.comみたいに記入してOKです。

・wordpress_path: "/var/www/your_site"

あなたのサーバー内でWordPressがインストールされているパスを指定する必要があります。

「wp-settings.php」が置かれている場所のパスになるようです。

・database:

こちらはproduction内の方のデータベースの記述。

実際のあなたが借りてるサーバーのデータベースの情報を記入して下さい。

つまりWordPressのwp-config.phpの中身に書いてる内容と同じ感じになるはずですね。

name: "database_name" # ←いじる
user: "user" # ←いじる
password: "password" # ←いじる
host: "host" # ←いじる
port: "3308" # そのままか、コメントアウトでもいけたりする
mysqldump_options: "--max_allowed_packet=50MB" # そのままでOK
charset: "utf8" # ←追記する

「port: "3308"」は「# port: "3308"」とコメントアウトしても俺の場合は動いてます。

さらに最後に「charset: "utf8"」を付け足すのを推奨しているようです。

・exclude:

ここに記載してあるファイルは同期しないように設定されているって事みたいです。

特にいじりませんが俺は「- ".htaccess"」も追記してます。

※くれぐれもインデントは揃えて書いて下さい

・ssh:

こちらもあなたのサーバー側の「SSH」の情報をそっくりそのまま記述するだけでOKです。

host: "example.jp" # ←いじる
user: "main.example" # ←いじる
password: "examplepassword" # ←いじる
port: 2222 # ←だいたいは2222じゃないかなと
rsync_options: --verbose # ←そのままでOK

これらのSSHは恐らくレンタルサーバーの管理画面とかに情報が書かれてます。

サーバーの管理画面内でSSHを有効に設定した上で情報を取得しましょう。

ちなみにSSHに対応してないサーバーはやり方が変わって来ます。

SSHではなくFTPでの接続も出来るのですが今回はめんどいので長くなるので説明を割愛します。

ロリポップでもさくらサーバーでも一応どちらも成功しました。

さて、ここまで記述が完了したら上書き保存して終了です。

作業はコマンドプロンプトへ戻ります。

⑨SSH接続

コマンドプロンプトでvagrant upした後の状態で、そのまま今度は

コマンドプロンプト内

vagrant ssh

 と入力してエンターです。

先ほどのMovefileへの記述がミスってなければ成功して表示が

コマンドプロンプト内

vagrant@myblog:~$

 みたいな感じになります。

↓こんな感じですね。

ちなみに分かってるとは思いますが、@myblogってなってるのは最初のvccwフォルダを「myblog」にリネームした場合こうなってるっていう事ですからね。

さぁこうなればもう一息です！

そのまま続けてcdコマンドでvagrant階層へと移動させます。

コマンドプロンプト内

cd /vagrant

 と入力し、.vagrantフォルダの階層へと移動します。

つまりこうして

↓入力してエンターすると

こうですね。

階層が移動した訳です。

コマンドプロンプト内

vagrant@myblog:/vagrant$

 こういう表示状態になってればOKです。

ここまで大丈夫ですか？

エラーが出てませんか？

⑩vagrant sshでエラーが出る人

vagrant upはいけたのにvagrant sshがうまくいかない場合は

恐らく先程の「Movefile.yml」への記述がどこかミスってるのが1つの原因じゃないかと思われます。

インデントが揃ってなかったりするだけでうまくいかないパターンもあるので要注意です。

他に可能性があるとしたら…

Rubyのpathが通ってない問題とか

Gitがうまく使えてない問題とか

SSHキーの作成が必要問題とか（これがまためんどい）

ここでのエラーはけっこう原因が分かりにくくて厄介だと思います。

 SSHキーの作成が必要なパターンについてはPuTTYのごった煮版とかを使って俺は何とかクリア出来たんですが、説明が難しいので頑張ってググってみて下さい。

後はコマンドプロンプトに表示されるエラー内容によっては

そのままエラー内容をググれば原因が出る場合もあります。

ここまで来て諦めるのももったいないので頑張って何とか原因究明を！

⑪vagrant sshが成功した人

ここまで来れば後は最後のpullコマンドです。

神コマンドです。

この最後の1行が吉と出るか凶と出るか…

ではあなたのサーバー側（本番）からローカル側へとWordpressのデータをそっくりそのまま落としてみましょう。

引き続きコマンドプロンプトでそのまま入力します。

・サーバー側からローカルへとWordPressのデータをそっくりそのまま引っ張る

コマンドプロンプト内

wordmove pull --all

これで全部ローカルへと落とせます。

ずらずら～っとコマンド内に文章が書かれると思います。

※最初はなかなか1回で落ちきれないので2～3回このコマンドを連チャンで叩いて下さい。

ちなみに「--all」ってのはサーバー側にある全てのファイルを1セット丸々落としますっていう意味です。

他に「-d」、つまり「wordmove pull -d」とすればデータベース

後は「-t」、つまり「wordmove pull  -t」とすればテーマ、「-u」ならアップロード（メディア）の意味となります。

なぜかallの時だけハイフンは2個です。

例えば、テーマのみを引っ張りたいとか、データベースの中身のみをアップしたいとか使い分ける事が出来ます。

注意としてはテーマのみとかメディアのみとか個別で落としたり出来るんですが

「テーマの中のこのファイル1つだけ！」ってのは無理っぽいです。

テーマはあくまでテーマ丸々の指定となります。

逆に言うとテーマはテーマのみなので、プラグインのフォルダとかはまた別になります。

さて、pullコマンドで全てのデータを落としたら、最初にリネームした「vccwフォルダ」＞「wordpress」のフォルダ内を確認してみて下さい。

あなたがサーバー側（本番）にアップしていたWordpressの全てのデータが揃ってるはずです。

つまりpullしてサーバー（本番）からローカルに引っ張ったデータの状態ですね。

ローカル側で更新作業をする時はもちろんそのフォルダの中のテーマを編集する感じです。

後はブラウザのアドレスバーに「http://myblog.test/」（最後のスラッシュも入れた方がいいかも）と入力すれば

現在のローカル側にあるWordPressのデータの状態で表示出来ます。

イメージ的にはvagrant upで起動、ブラウザでローカルの状態を確認可能、vagrant sshでサーバーと繋ぐ、wordmoveコマンドで本番とローカルのデータのやり取りが可能、という感じです。

この時にもし表示がおかしかったらちゃんとpull出来ていない可能性があります。

 よくありがちなのはテーマはpull出来てるけど、データベースが落ちきれてないとか。

pullコマンドした時にエラーを吐いてないかコマンドプロンプト内をよくチェックしながらやりましょう。

・ブラウザで確認したら何かえらい事になってる時

さらにこちらもチェックして下さい↓

上記方法でデータがpull出来ましたら

リネームした「vccw」のフォルダ→「wordpress」フォルダ内の→「wp-config.php」ファイルの中を確認して

wp-config.php内

$table_prefix = 'wp_';

 ここのデータベースの接頭辞の記述が本番のデータベースと間違いないかをチェック。

もし違えば本番の記述にこちらも合わせましょう。

「wp_」の部分を本番側で変えてた場合はローカル側も揃える必要があります。

後は同様に「wp-config.php」内のWP_DEBUG設定箇所

wp-config.php内

define( 'WP_DEBUG', True );

ここをTrueからFalseにした方がいいかと思うので↓こうします。

wp-config.php内

define( 'WP_DEBUG', False );

こうですね。

これが「False」ではなく「True」になってるとブラウザでの表示がデバッグモードみたいになって邪魔になる場合はFalseにするのを推奨です。

さぁ後はローカル内で自由にテーマファイル等をいじって開発を進められます。

ちなみに「http://myblog.test/wp-admin」で

ローカル環境のままWordpress管理画面へのログインももちろん出来ますので

管理画面内でいじってローカルのデータベースごとサーバーへ同期という事も簡単ですね。

では今度は中身をいじったローカルのWordPressデータを今度はサーバー側（本番）にアップするパターンのコマンドです。

先ほどの逆の事ですね。

・ローカルからサーバー側（本番）へWordpressのデータをアップロード

コマンドプロンプト内

wordmove push --all

このプッシュコマンドでサーバーへアップします。

pullの時と同じように「--all」は全て、「-t」や「-d」等で個別にプッシュが出来ます。

ちなみによくデータベースだけがうまくpushしきれなかったりpullしきれなかったりするので

コマンドプロンプト内でエラーが出てないかよく確認する事。

1回のpullで引っ張り切れないまま知らずにpushしてしまって＼(^o^)／ｵﾜﾀなんて事もあるので注意が必要です。

 1回で行けなかった時は何回かpushして試しましょう。

⑫その他いろいろ

・作業を終わる時

VagrantがPC裏でずっと動いてる状態っていうのも気持ち悪いので

 コマンドプロンプトでオフにしてあげましょう。

コマンドプロンプト内

exit

して、sshの状態から一度抜けてから

コマンドプロンプト内

vagrant halt

と、すればバーチャルボックスがOFF状態となります。

もちろんOFFになってる状態ではローカルの「http://myblog.test/」このURLへアクセスしても表示はされません。

ちなみに

コマンドプロンプト内

vagrant reload

で、vagrant upの再起動的な事も出来ます。

・ファイルを作り直したい

例えば「vccw」をリネームしたフォルダがあると思うんですが、これを削除して作り直したい場合。

コマンドプロンプト内

vagrant destroy

で、バーチャルボックスのファイルは削除出来たはず

・案件（他のサイト）が増えたから追加したい場合

再度、①VCCWでファイルをゲット→「vccw」のzipフォルダを解凍→「default.yml」ファイルの記述からスタート。

その時にhostnameやipの数字が既存のものと被らないように設定する事。

以上、初心者なりに頑張って説明したと思うんですが

もし分からない事があっても決して俺に聞かないで下さい。

ぜひ快適なWordpress開発ライフを！

ではまた近いうち！

アディオス！