1. Vagrantを使って自分のPCに
WordPress環境構築ハンズオン
建山 晃徳
2014.02.01
WordBench熊本
第9回勉強会資料

2. 自己紹介
!
!
!
!
!
名前：建山晃徳
Twitter：aqun00
Facebook：akinori.tateyama
職業：プログラマ・Webサイト制作（WordPress）
ブログ：WordPress関連のブログちょっと書いてます
(会社ブログ：http://thinking.ne.jp/author/tateyama/)
(個人ブログ：http://free-free-wheeling.com)
! 過去のスライド：(
http://www.slideshare.net/akinoritateyama)

3. 目次
! Vagrantとは？
! Vagrantとは？
! Vagrantを使うメリット
! WordPress環境の構築
! 必要ソフトインストール
! WordPress環境を構築しよう（vccw） ※Macの方
! WordPress環境を構築しよう（vvv） ※Winの方
! チーム内で同じ環境を共有してみよう ※Macの方
! 自分のお気に入りプラグインをインストール済みの
WordPress開発環境を他人に渡してみよう

4. Vagrantとは

5. Vagrantとは
コマンド一発で任意の構成の
仮想マシンを構築してくれる
ソフト

6. Vagrantを使うメリット
! WordPress開発環境を整えるのが簡単
! チーム内で同じ開発環境を共有できる

7. Vagrantを使うメリット
! WordPress開発環境を整えるのが簡単

8. Vagrantを使うメリット
! WordPress開発環境を整えるのが簡単
他の人が作った
開発環境

9. Vagrantを使うメリット
! WordPress開発環境を整えるのが簡単
他の人が作った
開発環境
もってきて

10. Vagrantを使うメリット
! WordPress開発環境を整えるのが簡単
他の人が作った
開発環境
vagrant
up!!
(起動)

11. Vagrantを使うメリット
! WordPress開発環境を整えるのが簡単
他の人が作った
開発環境
環境出来上
がり!

12. Vagrantを使うメリット
! チーム内で同じ開発環境を共有できる

13. Vagrantを使うメリット
! チーム内で同じ開発環境を共有できる
全く同じ
環境

14. Vagrantを使うメリット
! チーム内で同じ開発環境を共有できる
同じ
OS
PHP
mysql
Apache
WordPress
(バージョン
テーマ
プラグイン)
・・・

15. Vagrantを使うメリット
! チーム内で同じ開発環境を共有できる
テキスト
ファイル
のみ
（Vagran>ile）

16. とりあえず
やってみましょう!!

17. WordPress環境の構築（mac）

18. 必要なソフトインストール
! VirtualBoxをインストール
（h@ps://www.virtualbox.org/）
! Vagrantをインストール
（
h@p://www.vagrantup.com/）

19. 他の方がつくられた
公開されているWordPressの
Vagrant環境構築済み
のものを使います
VCCW

20. WordPress環境を構築しよう（VCCW）
VCCW

21. WordPress環境を構築しよう（VCCW）
VCCW
（vagrant-chef-centos-wordpress)
宮内さん@miya0001が開発
OS：CentOS
その他：
・Apache
・SSL利用可
マルチサイト対応
デフォルトテーマ・プラグイン設定可能

22. WordPress環境を構築しよう（VCCW）
VCCW
（vagrant-chef-centos-wordpress)
h@ps://github.com/miya0001/
vagrant-­‐chef-­‐centos-­‐wordpress

23. WordPress環境を構築しよう（VCCW）
URLにアクセス
h@ps://github.com/miya0001/
vagrant-­‐chef-­‐centos-­‐wordpress

24. WordPress環境を構築しよう（ VCCW）
始め方が書いてあります

25. WordPress環境を構築しよう（ VCCW）
日本語マニュアルは
README-ja.mdに

26. WordPress環境を構築しよう（VCCW）
! ターミナル（黒い画面）を起動
Mac：ターミナル
Windows：コマンドプロンプト

27. WordPress環境を構築しよう（VCCW）
! Vagrantファイルをダウンロード
VCCW
もってくる

28. WordPress環境を構築しよう（VCCW）
! Vagrantファイルをダウンロード
! Gitを入れている方はローカルにclone
$git clone https://github.com/miya0001/vagrant-chef-centos-wordpress.git vagrant-wp
! Gitを入れていない方はzipをダウロード後に解凍
https://github.com/miya0001/vagrant-chef-centos-wordpress/archive/master.zip

29. WordPress環境を構築しよう（VVV）
! コマンドでVagrantのプラグインをインストール
※一回インストールすればいい
$vagrant
plugin
install
vagrant-­‐hostsupdater
ローカルでも好きなドメインでブラウザから
アクセスできるように自動で設定してくれます
プラグイン説明・・・
ゲストOSを起動したときにホストOSのhostsファイルに
ゲストOSのホスト名とIPを追加。停止時に削除してれるプラグイン

30. WordPress環境を構築しよう（VCCW）
! ターミナルでダウンロードしたフォルダに移動
$cd vagrant-wp
cd・・・指定したフォルダに移動するコマンド。
（→カレントディレクトリとする）
MacのFinderウィンドウでフォルダを選択するイメージ

31. WordPress環境を構築しよう（VCCW）
vagrant-wp
cookbooks
site-cookbooks
.gitignore
.README-ja.md
.README.md
Vagrantfile.sample
ファイルが
ダウンロードされた

32. WordPress環境を構築しよう（VCCW）
! Vagrantfileのサンプルファイル(Vagrantfile.sample)をコピー
してVagantfileを作る
$cp Vagrantfile.sample Vagrantfile
cookbooks
site-cookbooks
.gitignore
.README-ja.md
.README.md
Vagrantfile.sample
Vagrantfile
名前を変えて
コピー

33. WordPress環境を構築しよう（VCCW）
! Vagrantfileの中身

34. WordPress環境を構築しよう（VCCW）
! 仮想マシン起動
vagrant
up!!
(起動)

35. WordPress環境を構築しよう（VCCW）
! 仮想マシン起動
$vagrant up
実行中です。
しばらく待ちましょ
う。

36. WordPress環境を構築しよう（VCCW）
! URLにアクセス
http://wordpress.local

37. WordPress環境を構築しよう（VCCW）
vagrant-wp
cookbooks
site-cookbooks
www
wordpress
.gitignore
.README-ja.md
.README.md
Vagrantfile.sample
wwwフォルダに
WordPressが
ダウンロード
されています

38. WordPress環境を構築しよう（VCCW）
! 主なコマンド
Vagrantfileがあるフォルダに移動（cd）して
! 仮想マシン起動(電源on) ! 仮想マシン一時停止(状態保存)
vagrant up
vagrant suspend
! 仮想マシン停止(電源off)
vagrant halt
! 仮想マシン削除(破棄)
vagrant destroy
! 仮想マシン再起動(電源off→電源on)
vagrant reload

39. WordPress環境を構築しよう（VCCW）
! 使わないなら仮想マシンは停止しましょう
! 仮想マシン停止
vagrant halt
! 次の起動を早くしたいなら一時停止
vagrant suspend

40. Windowsの方

41. 必要なソフトインストール
! VirtualBoxをインストール(バージョン4.3.4)
（
h@ps://www.virtualbox.org/wiki/
Download_Old_Builds_4_3）
! Vagrantをインストール(1.4.0)
（
h@p://www.vagrantup.com/downloads-­‐
archive.html）

42. WordPress環境を構築しよう（VVV）
VVV
（varying-vagrant-vagrants)
WordPressのコアチームが開発
OS：Ubuntu
その他：
・Nginx
・4種類のWordPressをインストール
最新版
開発版×３

43. WordPress環境を構築しよう（VVV）
VVV
（varying-vagrant-vagrants)
h@ps://github.com/Varying-­‐Vagrant-­‐
Vagrants/VVV

44. WordPress環境を構築しよう（VVV）
URLにアクセス
h@ps://github.com/Varying-­‐Vagrant-­‐
Vagrants/VVV

45. WordPress環境を構築しよう（VVV）
始め方が書いてあります

46. WordPress環境を構築しよう（VVV）
! ターミナル（黒い画面）を起動
Mac：ターミナル
Windows：コマンドプロンプト

47. WordPress環境を構築しよう（VVV）
! Windowsの方
hostsファイルに下記を1行追加してください
場所：
C:WindowsSystem32Driversetc
hosts
192.168.50.4
vvv.dev
local.wordpress.dev
local.wordpress-­‐trunk.dev
src.wordpress-­‐develop.dev
build.wordpress-­‐develop.dev
最近のWindowsではHostsファイルを普通に保存できないため、管理者権限でメモ帳を開いた後、
保存してください。
この作業が面倒くさい場合は、macと同じようにhostsファイル自動設定プラグイン（vagrant-­‐
hostupdater）を使用してください。その場合hostsファイルのユーザーの書き込み権限を追加してく
ださい。こちらは自己責任でお願いします。

48. WordPress環境を構築しよう（VVV）
! vagrant-­‐hostsupdater使いたい方は、hosts
ファイル書き込み権限追加後
$vagrant
plugin
install
vagrant-­‐hostsupdater
ローカルでも好きなドメインでブラウザから
アクセスできるように自動で設定してくれます
プラグイン説明・・・
ゲストOSを起動したときにホストOSのhostsファイルに
ゲストOSのホスト名とIPを追加。停止時に削除してれるプラグイン

49. WordPress環境を構築しよう（VVV）
! Vagrantファイルをダウンロード
! Gitを入れている方はローカルにclone
$git clone git://github.com/10up/varying-vagrant-vagrants.git vagrant-local
! Gitを入れていない方はzipをダウロード後に解凍
https://github.com/Varying-Vagrant-Vagrants/VVV/archive/master.zip

50. WordPress環境を構築しよう（VVV）
! ターミナルでダウンロードしたフォルダに移動
#cd vagrant-local
cd・・・指定したフォルダに移動するコマンド。
（→カレントディレクトリとする）
MacのFinderウィンドウでフォルダを選択するイメージ

51. WordPress環境を構築しよう（VVV）
! Vagrantfileの中身

52. WordPress環境を構築しよう（VVV）
! 仮想マシン起動
$vagrant up
実行中です。
しばらく待ちましょ
う。

53. WordPress環境を構築しよう（VVV）
! URLにアクセス
http://local.wordpress.dev

54. WordPress環境を構築しよう（VVV）
vagrant-local
www
default
wordpress-default
wordpress-trunk
.gitignore
.README.md
Vagrantfile
wwwフォルダに
WordPressが
ダウンロード
されています

55. チーム内で同じ環境を共有してみよう

56. 自分のお気に入りプラグインを
インストール済みの
WordPress開発環境を他人に渡して
みよう

57. チーム内で同じ環境を共有してみよう

58. チーム内で同じ環境を共有してみよう
テキスト
ファイル
のみ
（Vagran>ile）

59. チーム内で同じ環境を共有してみよう
! 手順
! Vagrant環境一式を全員でダウンロード
! 1人がWorｄPressのデフォルト環境を設定
! Vagrantfile修正
! １人が全員に設定ファイル（Vagrantfile）を渡す
! 仮想マシン起動
! vagrant up

60. チーム内で同じ環境を共有してみよう
! Vagrant環境一式を全員でダウンロード
Vagrant開発環境
もってくる

61. チーム内で同じ環境を共有してみよう
! Vagrantフォルダ一式を全員でダウンロード
! Gitを入れている方はローカルにclone
$git clone https://github.com/miya0001/vagrant-chef-centos-wordpress.git vagrant-share
前回は違う名前で保存
! Gitを入れていない方はzipをダウロード後に解凍
https://github.com/miya0001/vagrant-chef-centos-wordpress/archive/master.zip

62. チーム内で同じ環境を共有してみよう
! 一人がVagrantfile修正
一人が
Vagran>ile
修正

63. チーム内で同じ環境を共有してみよう
! 一人がVagrantfile修正
! みんなで共有したい環境
! 日本語版最新版WordPress初期インストール状態
! プラグインは下記を初期インストール
! Contact form 7
! Advenced custom fields

64. チーム内で同じ環境を共有してみよう
! 一人がVagrantfile修正
最初はこんな状態

65. チーム内で同じ環境を共有してみよう
! 一人がVagrantfile修正
IPアドレスとドメインを変える
WP_HOSTNAME
=
"wordpress.org"
WP_IP
=
"192.168.33.11"
デフォルトでインストールしたいプラグインを追記
WP_LANG=“ja”
WP_DEFAULT_PLUGINS=
%w(contact-­‐form-­‐7
advanced-­‐custom-­‐fields)

66. チーム内で同じ環境を共有してみよう
! Vagrantfileを全員にわたす
Vagran>ile
Vagran>ile
Vagran>ile

67. チーム内で同じ環境を共有してみよう
! Vagrantfileを全員にわたす
vagrant-share
cookbooks
site-cookbooks
.gitignore
.README-ja.md
.README.md
Vagrantfile.sample
Vagrantfile
受け取ったファイルを
自分のvagrant-share配
下に置く

68. チーム内で同じ環境を共有してみよう
! 仮想マシン起動
vagrant
up!!
(起動)
vagrant
up!!
(起動)
vagrant
up!!
(起動)

69. チーム内で同じ環境を共有してみよう
! 仮想マシン起動
#vagrant up
実行中です。
しばらく待ちましょ
う。

70. チーム内で同じ環境を共有してみよう
! URLにアクセス
http://wordpress.org

71. チーム内で同じ環境を共有してみよう
! プラグインも最初からインストールされている

72. チーム内で同じ環境を共有してみよう
! 仮想マシン起動

73. ハンズオンは
ここまで

74. 概要

75. XAMPP・MAMPとはちがうところ
! XAMPP・MAMP
パソコン

76. XAMPP・MAMPとはちがうところ
! Vagrant
パソコン
サーバ（仮想マシン）

77. XAMPP・MAMPとはちがうところ
! Vagrant
パソコン
パソコンの中に
サーバがある
サーバ（仮想マシン）

78. XAMPP・MAMPとはちがうところ
! Vagrant
パソコン
サーバ（仮想マシン）
Vagrantはここを自動
で構築してくれる

79. vagrant upについて
! vagrant upすると・・（初めの一回だけ）
パソコン
サーバ（仮想マシン）

80. VCCWを使うなら
! 慣れないうちはこんな感じでいいかも
パソコン
サーバ（仮想マシン）
h@p://aaa.com
192.168.0.1
サーバ（仮想マシン）
h@p://bbb.com
192.168.0.2

81. 仮想マシンにログインしたい場合
! コマンドをたたく
! vagrant ssh
パソコン
サーバ（仮想マシン）

82. 仮想マシンにログインしたい場合
! Windowsでは「vagrant ssh」するに環境をつく
らないといけなから、sshできるソフトを入れた
ほうがラク
! TeraTerm
! Putty

83. wp-cliについて
! wp-cliはブラウザを開かずにWordPressを操作できる
! VVV・VCCWにはwp-cliが最初から入っている
例）プラグインの有効化
wp plugin active akismet
例）データベース置換
wp serch-replace ‘http://ex.com’ ‘http://ex.jp’
vagrant
ssh
してログインして
やってみよう

84. もっと詳しく知りたいなら

85. もっと詳しく知りたいなら

86. 環境構築をもっとカスタマイズしたいなら

87. お疲れ様でした

88. よいVagrantライフを！