『Vagrant+VCCW』でWordPressローカル環境を構築してみよう
2018/04/13
- Macに『Vagrant + VirtualBox』を導入する手順
- Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
- Vagrantを使ってみよう！Boxの取得から起動・停止・削除まで
- 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
- Vagrantで仮想マシンに接続＆Webサーバを立ち上げてみよう
- Vagrantで作成した環境を「コピー＆配布して他人と共有する」方法
- 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう <- 本記事
- 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期！
こんにちは、okutani(@okutani_t)です。お店のサイトやブログなんかを立ち上げる時、WordPressを使うとかんたんにリッチなWebサイトが作れて便利です。
ふつうにWordPressを利用する分には、サーバーにWordPressをインストール&ログインで、更新作業なんかポチポチすればOKの楽チン作業。
ですが、デザインをHTMLやCSSで変えたかったり、コーディング作業をしなければならない場合は、ローカル環境を構築して利用するのがベターです。
『VCCW』というVagrantで動作するテンプレートを使うことで、ローカル環境にWordPressをサクッとインストールすることができます。
というわけで、VCCWを使うには『Vagrant + VirtualBox』が必要になってくるので、まだ導入していない方は下記記事を参考に前準備を済ませておきましょう。
LINKMacに「Vagrant」+「VirtualBox」を導入する手順 | vdeep
なお本記事では、Mac上でVCCWの設定を進めています。Windowsでは多少設定が違ってくるかと思いますのでご了承ください。
ではさっそく、VCCWの導入方法を見ていきましょう。
[2018/04/11追記] VCCWのバージョンが上がっていたので、記事全体をリライトしました
スポンサーリンク
もくじ
VCCWのダウンロード
VCCWのダウンロード方法は2パターンあり、「公式サイトからZIPをダウンロード」「gitコマンドを使ってダウンロード」があります。どちらでもお好きな方法でダウンロードしましょう。
公式からのダウンロードは次のとおりです。公式TOPの「Download .zip」を選択でOK。
LINKVCCW – A WordPress development environment.
解凍&好きな名前にリネームしておきましょう。
GitからDLする場合
gitコマンドを使ったダウンロードは次のとおりです。
$ git clone git@github.com:vccw-team/vccw.git 好きな名前これでVCCWがローカルPCに取得できました。公式を見る限りは、gitコマンド経由ではなくてZIPから導入する手順で書かれています。なので、本記事ではZIPファイルから導入を進めていきます。
ディレクトリの設定
今回は、一例として当ブログをVCCWで管理できるように進めるので「vdeep」とサイト名にリネームしておきます。
ダウンロードしたVCCW本体を、次の場所に配置しておきました。
~/Vagrant/vdeep/「~」はホームディレクトリの意味です。通常、Macだと「/Users/ユーザ名/」にあたります。その直下に「Vagrant」ディレクトリを作成して、そこにリネームしたVCCWのファイルを配置、としています。
ちなみに今回ダウンロードした「vccw-3.18.0」の中身はこうなってました。
vagrant-hottsupdaterの導入
ここで「vagrant-hostsupdater」というプラグインを導入しておくと、「http://192.168.33.11」というIPアドレスが「http://wordpress.local」といったホスト名としてアクセスできる設定が書けるようになります。
下記コマンドで導入しておきましょう。
$ vagrant plugin install vagrant-hostsupdater※正確にはvagrant-hostsupdaterは、仮想マシン立ち上げ時にホストOSの「/etc/hosts」を、後述の「Vagrantfile」の設定に合わせて書き換えてくれます。仮想マシン終了時に、自動で起動前のhostsの設定に戻ります。
VCCWのVagrant Boxの追加
次のコマンドでVCCWのVagrant Boxを追加します。必ずネットワーク環境下でおこないましょう。
$ vagrant box add vccw-team/xenial64私の環境下では15分ほどかかりました。コーヒーでも飲みながら待ちましょう。
ちなみに、このBoxは一度追加しておけば使い回しができます。覚えておきましょう。
provisionファイル「site.yml」の設定
「provision/default.yml」をテンプレートとして、「site.yml」というファイルを作成して便利な設定を記述していきます。
site.ymlには「言語設定」「最初から導入したいWordPressプラグイン」「ホスト名」「利用するメモリー量」などなどを設定できます。便利ですね。
次のように、cpコマンドで複製しておきましょう。
$ cd ~/Vagrant/vdeep/
$ cp provision/default.yml site.ymlエディターでsite.ymlを編集します。該当する箇所を適宜書き換えてみてください。「plugins」に使いたいプラグインを書いておくと、勝手にインストールしてくれます。
複数VCCWを立ち上げたい場合は、IPアドレスも重複しないように設定しておくとよいです。
hostname: vdeep.local
ip: 192.168.33.20
memory: 1024
lang: ja
plugins:
- contact-form-7
- jetpackちなみにsite.ymlファイルの内容はいつでも変更することができます。のちほど紹介するvagrant reloadを叩けば更新されます。
VCCWを使って仮想マシンを起動する
ターミナルから下記のようにvccwのディレクトリに移動して、仮想マシンを起動させてみましょう。こいつも多少時間がかかります……
$ cd ~/Vagrant/vdeep
$ vagrant up途中パスワードを求められますが、自身のPCで使っているパスワードを入力してください。
起動が成功したら、ブラウザのアドレスバーにsite.ymlで設定したホスト名かIPアドレスを入力。WordPressサイトが表示されたら成功です。
無事、VCCWを使ってWordPressがローカル環境に導入できました。
管理画面の確認
管理画面は「http://設定したホスト名/wp-login.php」か「http://設定したIP/wp-login.php」でアクセスできます。
IDとパスワードを求められるので、両方とも「admin」と入力してログイン。
お馴染みのダッシュボードが表示されたでしょうか？
利用できるvagrantコマンド
先ほども出てきましたが、次のコマンドで仮想マシン起動。
$ vagrant up次のコマンドで仮想マシンを終了できます。
$ vagrant halt次のコマンドで再起動。書き換えたsite.ymlはこのコマンドで再読み込みできます。
$ vagrant reload立ち上げた仮想マシンには次のコマンドでログインできます。
$ vagrant sshログアウトは普通にexitでOKです。
$ exitWordPressサイトの構築方法
WordPressのローカル開発環境が整ったので、カスタマイズの方法をかんたんに説明します。
Vagrantfileがある階層に「wordpress」ディレクトリがあるので、そちらにあるファイルを書き換えていけばWordPressサイトを構築することができます。
まとめ
VCCWを使うことでかんたんにWordPressローカル環境が整いました。
site.ymlを書き換えていけば、お好みのWordPressローカル環境が一発で立ち上げられるので便利ですね。
次回は「WordMove」を使って本番環境とローカル環境を同期させてみたいと思います。
- Macに『Vagrant + VirtualBox』を導入する手順
- Windowsローカル開発環境を『Vagrant + VirtualBox』で作ってみよう
- Vagrantを使ってみよう！Boxの取得から起動・停止・削除まで
- 『Vagrant Cloud』を利用してVagrantのBoxを追加してみよう
- Vagrantで仮想マシンに接続＆Webサーバを立ち上げてみよう
- Vagrantで作成した環境を「コピー＆配布して他人と共有する」方法
- 『Vagrant+VCCW』でWordPressローカル環境を構築してみよう <- 本記事
- 本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期！
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
