Mac Local環境にVCCWで開発環境を構築してみる

投稿日: カテゴリー: Wordpress

開発環境にMAMPを使っていたけれども本サイトに移行する際にVCCWのほうが簡単らしい…

と言うことで、環境を構築してみるが…
構築までの道のりはMAMPの10倍くらい面倒である。

すべきことは以下の通り

  • VirtualBoxインストール
  • Vagrantインストール
  • vagrant-hostsupdater(オプション)
  • vagrantBoxダウンロード
  • vccwダウンロード
  • vagrant初期設定

ね。面倒な感じでしょ?しかも、インストールにターミナルを使う必要がある。
なので、インストールとかに失敗したときなど原因がいまいちわからんかったりする。

  VirtualBoxインストール

以下からVirtualBoxをダウンロードしてインストール。インストーラーの指示にしたがって進めるだけ。 https://www.virtualbox.org/

  Vagrantインストール

以下からVagrantをダウンロードしてインストール。インストーラーの指示にしたがって進めるだけ。 http://www.vagrantup.com/

ここまでは非常に簡単。ここから若干の時間とハードルが…

  vagrant-hostsupdater(オプション)

オプションと言っても構築中のサイトにアクセスする際に気持ちの良いURLでアクセスしたいので必須項目。
ターミナルアプリケーションを立ち上げ、以下のコマンドを入力する。

【Fetching: vagrant-hostsupdater-1.0.2.gem (100%)】がでればOK。
これは割とサックと終了。

  VagrantBoxダウンロード

ターミナルで以下のコマンドを実行し、インストールをかける。
結構時間がかかるので放置したいところではあるが、Macがスリープしかけたりするとなぜかプロセスが中断しエラーとなることがあるので、Macで他事をしながら監視。

【==> box: Successfully added box ‘miya0001/vccw’ (v2.19.0) for ‘virtualbox’】が表示されたらOK。

  VCCWダウンロード

これは公式サイトからZIPファイルをダウンロードしてくる。
公式サイト:http://vccw.cc/

ダウンロードしてきた書類は【vccw-x.x.x.zip(x.x.xはその時点のバージョン数値)】で、これを普通に解凍すると【vccw】というフォルダになる。
自分の場合は、複数サイト構築する事を想定して【vccw-プロジェクト名】にした。格納場所はどこでも良いのだが、ユーザー階層のアプリケーションフォルダに格納した。Adobeをはじめとする各アプリケーションはユーザデレクトリではなくメインデレクトリに格納されているので、ユーザのアプリケーションフォルダはほぼ何もない状態だったので…
自分が解りやすければどこでも良いと思う。

任意のデレクトリに解凍したvccwを格納したらターミナルにもどり、ターミナルのコマンドがvccwに指示できるように移動する。ターミナルに以下を入力

cdは命令デレクトリの移動を意味し、それ以降は命令を出したいデレクトリ名。
カタカナの部分はそれぞれで変更してね。

移動したら以下を実行。

しばらく待てば構築完了〜
ただし初動時のセットアップの場合、結構時間かかる。
なぜならば、PHPやMySQLのインストール、Wordpressのインストールを裏で行っているから。
考えてみれば、それらを手動でやろうと思うと結構手間なので「時間がかかるのもしゃあないか…」と思ったりもする。

http://vccw.dev/またはhttp://192.168.33.10/にアクセスしてWordpressがインストールされている事を確認してみる。
ログインはhttp://vccw.dev/wp-login.phpで。
デフォルトのID・パスワードは共に【admin】でログインすることができる。
因みに、VCCWが自動的に作るMySQLのrootユーザーとIDは【Username: root/Password: wordpress】ね。

  作業の開始と終わりにはターミナルでコマンドを

仮想サーバが起動し、Wordpressが編集可能なことが解ったらそのまま作業するもよし、今日はここまで…終了するもよし。しかし、起動している開発環境は終了させる必要がある。
ターミナルを起動して、以下のコマンドを入力。

これで、仮想サーバをシャットダウンできる。管理者権限が必要になるのでPC事のパスワードを聞かれるかも。
因みに、起動させるときはターミナルで以下を入力。

これで開発をスタートさせることができる。

  開発後の作業と疑問

さて、ローカルに開発環境を解説できたけれども、本サイトにはどうするの?
の疑問は…こちらに記事のあるWordMoveが効率良さそう。これはまた次の機会に挑戦してみます。
考えてみれば、デザインが出来て投稿が始まって…で、リニューアルの時には投稿蓄積のあるデータベースをローカルに構築してリニューアル作業をしなければならない。

どうやら、WordMoveは行ったり来たりのWordpressの移動に凄く便利なツールらしい。
直ぐにでも覚えなければいけない。

で、疑問。
幾つも同時に開発する場合は…
どのような方法が効率良いのかも調べてみなければ。

補足ね

デフォルトでprovisionフォルダに、default.ymlという書類があるけれども、これをsite.ymlとして第一階層にうつし、そちらをチョコチョコっといじるとWordpressの初動が省略出来たりもする。

参考になるサイトをいくつかあげておきます〜

vccwとVagrantでWordPressのローカル開発環境を作りました

MacでWordPressの開発環境をVCCWで作る手順

ゼロからできるWordPress開発〜VCCWでローカル開発環境構築編〜