鳥取でWebサイト制作

S.K Works

2018.8.11

VCCWを使ってローカル環境でWordPressを開発しよう

どうも、kuroro0319です。

突然ですが、WordPressを使ってますか?

私が見る限りでは、ブログを書く場合は慣れてる人なら結構使ってる人が多い印象です。
はてなブログとかアメブロとかブログサービスは色々ありますが、やはり自由度の高さからWordPressになるのかなと思います。
ちなみに、このサイトも、もちのろんでWordPressです。
ブログやってない人で、WordPressじゃない人はモグリです!(何の!?)

というのは冗談です。

ちなみに、Webサイト制作の案件でもWordPressはかなり使います。
クライアント側でも気軽に更新しやすいというが受けている理由かと考えられます。
あとは、デザイナーでも簡単にある程度のシステム案件がこなせて、設置費用などで費用が取りやすいのもでかいかと思いますが…
さらに言うと、改修なんかがあろうもんなら、ありえないほどの金額をふっかけて、ヤ◯ザ丸出しのあこぎなことをやる人もいるみたいです。
私はもちろん、そんなことはしません。
わざとちょっとだけバグを残して、改修させるとかこすい手は使いません。

使いません!

そんな便利なWordPressさんを構築していて悩みのタネになるのが、毎度毎度サーバーにあげないと確認できないということです。
地味に時間がかかる…
わしゃ、サーバーアップ職人か!
日が暮れてまうわ!

さらに、テスト環境から本番に移行するとかの場合などは正直かなり怖いです。

絶体絶命、四面楚歌、投了寸前、風前の灯火、まな板の上の鯉、蛇に睨まれた蛙状態です。

エマージェンシーだよ!おっかさん!(誰??)

ドラ〜えも〜ん!

って、ドラえもんが来るわけもありません。
ジャイアンが優しいのも映画版だけです。

もしもテスト環境がない世界だったら…


もっと怖い!!

しかも、私はサーバー周りの知識や経験が乏しいので、データベースを直で触るのはちょっと躊躇してしまいます。

ボランティアに来たけど、やったことないから、ただただ立ち尽くす的な…(そんな状況あるのか??)
電気屋なのに、世界を救え的な…(さらにそんな状況ないでしょ!?)

WordPressのエクスポート機能とかもありますが、ちょっと面倒です。
人は便利さに貪欲なのです。
歩くより馬を、馬より車を、車より飛行機をという具合です。
人類の貪欲さにどれだけの自然が傷ついたか…

というわけで、今回はそんなヘタレな私でも使えそうなローカルにWordPressをインストールして開発する方法を紹介します。
本番環境とも簡単に同期できるので便利だと思います。慣れないうちはちょっと怖い面もありますが…

まぁ、怖い人は慣れてる人に頼んじゃいましょう。
優しい人なら安くやってくれるはずです。

世の中面倒なことはお金で解決するのが一番!(ちょっとクズ発言!?)

VCCWって何?

そういうわけで、まずはVCCWの公式サイトに行きましょう!
もうなんというか、公式が全てです。
というより、公式以外に書いてあることは基本的に妄言です。虚言です。戯言です。
なので、このページも信用しないでください。
常に全てを疑いましょう!
一番疑うべきは自分です!こんちきしょう!

ちなみにVCCWについてはページの最初の方に書いていますが、Vagrantという仮想の開発環境を利用する人向けの、WordPress開発環境用パッケージになります。
なんかわかりにくいですが、そんなもんだと思ってもらったら大丈夫です。

「夢ばっか語ってないで、現実見ようよ!って言われても、結局、夢見れねぇヤツに現実なんか変えらんねぇんだよ!」的な…

えぇそうです。私もよくはわかってません。
まぁ、PCの中身は知らなくても、PCは使えるというのと同じです。

そんなもんです。
知らなくたっていいことは知らない方が幸せなんです。

何も考えずにここに書いてある通り、全てを受け入れたらいいのです。

そして、何も考えずに、何も知らないまま死んでいったらいいんです。

こんなもの動けばいい!

それが真理です。(最低)

VCCWをインストールしよう!

ページの下の方に「Getting Started」という見出しがあります。
そこに使用するまでの全手順が書いてありますね。

正直書くの面倒なので、「そこを読め!以上、終わり!第1部完!」

としてしまってもいいのですが、この記事の意味がなくなるので、順にやっていきましょう。
ちょっと手順が多いので、挫折しないよう頑張ってください!
一回挫折して不良になってしまうと、バスケ部に戻るのがすごい辛くなりますからね。
バスケの話じゃないですね。すいません。

「安西先生、VCCWをインストールしたいです。」
誰だよ!安西先生って!

というわけで、まずは「1. Install VirtualBox.」とあるので、VirtualBoxをインストールします。
こちらに関しては、この前書いたブログを読んでもらったらインストールの手順が書いてあります。

「MacにVirtualBoxを入れて、IEを確認しよう」

ちゃんと書いといてよかった。
備えあれば憂いなしというか、鬼に金棒というか…(ちょっと違う??)

次に「2. Install Vagrant.」とあるので、Vagrantをインストールします。
Vagrantの公式サイトからダウンロードしてインストールでいいと思います。

それから、Vagrantのpluginをインストールします。
以下ターミナルに以下コマンドを入れてインストールしてください。

$ vagrant plugin install vagrant-hostsupdater

その次のVagrant Boxも以下コマンドを入れて追加してください。

$ vagrant box add vccw-team/xenial64

そして、遂にVCCWのパッケージをダウンロードです。
zipファイルをダウンロードして、任意のディレクトリに配置してください。
以下のコマンドでgitからcloneする方法もあるみたいです。
gitからの方が常に最新状態だと思われるので、いいかもしれません。

$ git clone https://github.com/vccw-team/vccw.git 任意のディレクトリ名

ターミナル上で、VCCWを置いたディレクトリに移動してください。
ディレクトリごとターミナルにドラッグドロップで大丈夫です。

そうしたら、以下コマンドを入れて、Vagrantを起動してください。

$ vagrant up

これでやっとVCCWが起動できる状態になりました。
以下のURLでアクセスできると思います。
http://vccw.test/ or http://192.168.33.10/

VCCWをカスタマイズしよう

やっとVCCWをインストールできたわけですが、ここからが本番です。
一応Wordpressもインストールされているので、http://wordpress.local/wp-login/で管理画面にアクセスできます。
パスワードなどは以下になります。
Username: admin
Password: admin

で、VCCWをカスタマイズしていくわけですが、まずは「provision」というディレクトリ内の「default.yml」を、ルートにコピーして「site.yml」という名前に変更します。

そして、以下のようにhostnameやipを変更しましょう。

hostname: vccwtest.local
ip: 192.168.33.20
memory: 1024
lang: ja
plugins:
  - contact-form-7
  - jetpack

Vagrantを起動中の場合は「vagrant reload」というコマンドでsite.ymlの修正が反映されます。
Vagrant起動時にパスワードを求められる場合は自分のPCのパスワードを入れてください。
新しいURLは以下になりますので、アクセスしてみてください。
http://vccwtest.local/ or http://192.168.33.20/

これで一応ローカルでWordPressを開発する環境は構築できました。
というわけで、今回はここで記事を終了させていただきます。

本番のWordPressを同期する話はまた別の機会に書いていきます。

ちなみにVagrantを終了する方法は以下になります。

$ vagrant halt

ただ、終了してしまうと結構面倒なので、以下の一時停止の方がいいかもしれません。

## 仮想マシンの一時停止 
$ vagrant suspend
## 仮想マシンの一時停止から復帰 
$ vagrant resume

VCCWを使ってみての感想

とりあえず、サクッとWordPressをローカルで作りたいとかだといいかもしれません。
初期構築の手間はありますが、一度インストールしてしまえば、何個でも簡単に作れるので手間が省けます。

別の機会に書きますが、WordMoveというWordPress環境を同期するプラグインと合わせて使うと、かなり便利です。
めんどくさいことしなくても、簡単に同期できちゃいます。
それを使いたいがためにVCCWをインストールしたというのが正しいかもしれません。
SSHが使えないといけないとか、データベースぶっ壊す可能性があったりとか、結構ハードルはあったりはしますが…

やっぱりそんな時は合言葉的な感じですが、もう金で解決しましょう!

金が全て!(かなりのクズです。)

金があれば何でもできる!(超メガバズーカランチャーハイパーメディアクズクリエイター。)

それでは、良いVCCWライフを!

参考サイト

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう | vdeep
→ここのページはとても優秀だと思います。
→今回書いたことは全部書いてますし、いっそのこと上記を見てください!

VCCWによるWordPress用ローカル環境構築&ハマりやすいポイント
→ここの記事もとても優秀です。
→すごいね!みんな!

【Qiita】 WordPressをVagrant環境にらくらくインストールする。 - VCCW →これは若干メモ扱いなので、ちょっとわかりにくい点ありますが、要点がうまいこと書いてあったので、よかったです。
→上の2つの補足として、合わせて読むといいかと思います。

結局のところ、このブログを読むよりも上の参考サイトを見た方がためになる!
ダメだこりゃ!

追記

Wordmoveで本番とローカルのWordPress環境を同期する方法を追加しました。
そっちが本題なので、この記事と合わせて読んでいただけたらと思います。
Wordmoveでローカルと本番のWordPressを同期しよう

鳥取県倉吉市でWebサイト・ホームページ制作をお考えの方はお気軽にお問い合わせください。

お問い合わせフォームはこちら