Your SlideShare is downloading. ×
WordBench熊本Vagrant勉強会
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WordBench熊本Vagrant勉強会

3,535
views

Published on

Published in: Technology

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,535
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
21
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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をインストール      最新版      開発版×3
  • 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人がWordPressのデフォルト環境を設定 ! Vagrantfile修正 !  1人が全員に設定ファイル(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ライフを!

×