Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordBench熊本Vagrant勉強会

4,672 views

Published on

Published in: Technology
  • Be the first to comment

WordBench熊本Vagrant勉強会

  1. 1. Vagrantを使って自分のPCに WordPress環境構築ハンズオン 建山  晃徳 2014.02.01 WordBench熊本 第9回勉強会資料
  2. 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. 3. 目次 !   Vagrantとは? !   Vagrantとは? !   Vagrantを使うメリット !   WordPress環境の構築 !   必要ソフトインストール !   WordPress環境を構築しよう(vccw)  ※Macの方 !   WordPress環境を構築しよう(vvv) ※Winの方 !   チーム内で同じ環境を共有してみよう ※Macの方 !   自分のお気に入りプラグインをインストール済みの WordPress開発環境を他人に渡してみよう
  4. 4. Vagrantとは
  5. 5. Vagrantとは コマンド一発で任意の構成の 仮想マシンを構築してくれる ソフト
  6. 6. Vagrantを使うメリット !  WordPress開発環境を整えるのが簡単 !  チーム内で同じ開発環境を共有できる
  7. 7. Vagrantを使うメリット !  WordPress開発環境を整えるのが簡単
  8. 8. Vagrantを使うメリット !  WordPress開発環境を整えるのが簡単 他の人が作った 開発環境
  9. 9. Vagrantを使うメリット !  WordPress開発環境を整えるのが簡単 他の人が作った 開発環境 もってきて
  10. 10. Vagrantを使うメリット !  WordPress開発環境を整えるのが簡単 他の人が作った 開発環境 vagrant  up!!   (起動)
  11. 11. Vagrantを使うメリット !  WordPress開発環境を整えるのが簡単 他の人が作った 開発環境 環境出来上 がり!
  12. 12. Vagrantを使うメリット !  チーム内で同じ開発環境を共有できる
  13. 13. Vagrantを使うメリット !  チーム内で同じ開発環境を共有できる 全く同じ   環境
  14. 14. Vagrantを使うメリット !  チーム内で同じ開発環境を共有できる 同じ   OS   PHP   mysql   Apache   WordPress   (バージョン テーマ   プラグイン)   ・・・
  15. 15. Vagrantを使うメリット !  チーム内で同じ開発環境を共有できる テキスト ファイル のみ   (Vagran>ile)
  16. 16. とりあえず やってみましょう!!
  17. 17. WordPress環境の構築(mac)
  18. 18. 必要なソフトインストール ! VirtualBoxをインストール (h@ps://www.virtualbox.org/)   !  Vagrantをインストール (  h@p://www.vagrantup.com/)
  19. 19. 他の方がつくられた 公開されているWordPressの Vagrant環境構築済み のものを使います VCCW
  20. 20. WordPress環境を構築しよう(VCCW) VCCW
  21. 21. WordPress環境を構築しよう(VCCW) VCCW (vagrant-chef-centos-wordpress) 宮内さん@miya0001が開発 OS:CentOS その他:     ・Apache     ・SSL利用可      マルチサイト対応      デフォルトテーマ・プラグイン設定可能
  22. 22. WordPress環境を構築しよう(VCCW) VCCW (vagrant-chef-centos-wordpress) h@ps://github.com/miya0001/ vagrant-­‐chef-­‐centos-­‐wordpress
  23. 23. WordPress環境を構築しよう(VCCW) URLにアクセス h@ps://github.com/miya0001/ vagrant-­‐chef-­‐centos-­‐wordpress
  24. 24. WordPress環境を構築しよう(  VCCW) 始め方が書いてあります
  25. 25. WordPress環境を構築しよう(  VCCW) 日本語マニュアルは README-ja.mdに
  26. 26. WordPress環境を構築しよう(VCCW) !  ターミナル(黒い画面)を起動  Mac:ターミナル  Windows:コマンドプロンプト 
  27. 27. WordPress環境を構築しよう(VCCW) !  Vagrantファイルをダウンロード VCCW もってくる
  28. 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. 29. WordPress環境を構築しよう(VVV) !  コマンドでVagrantのプラグインをインストール  ※一回インストールすればいい   $vagrant  plugin  install  vagrant-­‐hostsupdater   ローカルでも好きなドメインでブラウザから アクセスできるように自動で設定してくれます プラグイン説明・・・ ゲストOSを起動したときにホストOSのhostsファイルに ゲストOSのホスト名とIPを追加。停止時に削除してれるプラグイン
  30. 30. WordPress環境を構築しよう(VCCW) !  ターミナルでダウンロードしたフォルダに移動   $cd vagrant-wp   cd・・・指定したフォルダに移動するコマンド。       (→カレントディレクトリとする)       MacのFinderウィンドウでフォルダを選択するイメージ
  31. 31. WordPress環境を構築しよう(VCCW) vagrant-wp cookbooks site-cookbooks .gitignore .README-ja.md .README.md Vagrantfile.sample ファイルが ダウンロードされた
  32. 32. WordPress環境を構築しよう(VCCW) ! Vagrantfileのサンプルファイル(Vagrantfile.sample)をコピー してVagantfileを作る   $cp  Vagrantfile.sample  Vagrantfile cookbooks site-cookbooks .gitignore .README-ja.md .README.md Vagrantfile.sample Vagrantfile 名前を変えて コピー
  33. 33. WordPress環境を構築しよう(VCCW) ! Vagrantfileの中身
  34. 34. WordPress環境を構築しよう(VCCW) !  仮想マシン起動 vagrant  up!!   (起動)
  35. 35. WordPress環境を構築しよう(VCCW) !  仮想マシン起動   $vagrant  up    実行中です。   しばらく待ちましょ う。  
  36. 36. WordPress環境を構築しよう(VCCW) !  URLにアクセス     http://wordpress.local
  37. 37. WordPress環境を構築しよう(VCCW) vagrant-wp cookbooks site-cookbooks www wordpress .gitignore .README-ja.md .README.md Vagrantfile.sample wwwフォルダに WordPressが ダウンロード されています
  38. 38. WordPress環境を構築しよう(VCCW) !  主なコマンド Vagrantfileがあるフォルダに移動(cd)して !   仮想マシン起動(電源on) !   仮想マシン一時停止(状態保存) vagrant  up vagrant  suspend !   仮想マシン停止(電源off) vagrant  halt !   仮想マシン削除(破棄) vagrant  destroy !   仮想マシン再起動(電源off→電源on) vagrant  reload
  39. 39. WordPress環境を構築しよう(VCCW) !   使わないなら仮想マシンは停止しましょう !  仮想マシン停止 vagrant  halt !   次の起動を早くしたいなら一時停止 vagrant  suspend
  40. 40. Windowsの方
  41. 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. 42. WordPress環境を構築しよう(VVV) VVV (varying-vagrant-vagrants) WordPressのコアチームが開発 OS:Ubuntu その他:     ・Nginx     ・4種類のWordPressをインストール      最新版      開発版×3
  43. 43. WordPress環境を構築しよう(VVV) VVV (varying-vagrant-vagrants) h@ps://github.com/Varying-­‐Vagrant-­‐ Vagrants/VVV
  44. 44. WordPress環境を構築しよう(VVV) URLにアクセス h@ps://github.com/Varying-­‐Vagrant-­‐ Vagrants/VVV
  45. 45. WordPress環境を構築しよう(VVV) 始め方が書いてあります
  46. 46. WordPress環境を構築しよう(VVV) !  ターミナル(黒い画面)を起動  Mac:ターミナル  Windows:コマンドプロンプト 
  47. 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. 48. WordPress環境を構築しよう(VVV) !  vagrant-­‐hostsupdater使いたい方は、hosts ファイル書き込み権限追加後   $vagrant  plugin  install  vagrant-­‐hostsupdater   ローカルでも好きなドメインでブラウザから アクセスできるように自動で設定してくれます プラグイン説明・・・ ゲストOSを起動したときにホストOSのhostsファイルに ゲストOSのホスト名とIPを追加。停止時に削除してれるプラグイン
  49. 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. 50. WordPress環境を構築しよう(VVV) !  ターミナルでダウンロードしたフォルダに移動   #cd vagrant-local   cd・・・指定したフォルダに移動するコマンド。       (→カレントディレクトリとする)       MacのFinderウィンドウでフォルダを選択するイメージ
  51. 51. WordPress環境を構築しよう(VVV) ! Vagrantfileの中身
  52. 52. WordPress環境を構築しよう(VVV) !  仮想マシン起動   $vagrant  up    実行中です。   しばらく待ちましょ う。  
  53. 53. WordPress環境を構築しよう(VVV) !  URLにアクセス     http://local.wordpress.dev
  54. 54. WordPress環境を構築しよう(VVV) vagrant-local www default wordpress-default wordpress-trunk .gitignore .README.md Vagrantfile wwwフォルダに WordPressが ダウンロード されています
  55. 55. チーム内で同じ環境を共有してみよう
  56. 56. 自分のお気に入りプラグインを インストール済みの WordPress開発環境を他人に渡して みよう
  57. 57. チーム内で同じ環境を共有してみよう
  58. 58. チーム内で同じ環境を共有してみよう テキスト ファイル のみ   (Vagran>ile)
  59. 59. チーム内で同じ環境を共有してみよう !  手順 !  Vagrant環境一式を全員でダウンロード !  1人がWordPressのデフォルト環境を設定 ! Vagrantfile修正 !  1人が全員に設定ファイル(Vagrantfile)を渡す !  仮想マシン起動 !  vagrant  up
  60. 60. チーム内で同じ環境を共有してみよう !  Vagrant環境一式を全員でダウンロード Vagrant開発環境 もってくる
  61. 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. 62. チーム内で同じ環境を共有してみよう !  一人がVagrantfile修正 一人が Vagran>ile 修正
  63. 63. チーム内で同じ環境を共有してみよう !  一人がVagrantfile修正 !  みんなで共有したい環境 !  日本語版最新版WordPress初期インストール状態 !  プラグインは下記を初期インストール !  Contact  form  7 ! Advenced  custom  fields
  64. 64. チーム内で同じ環境を共有してみよう !  一人がVagrantfile修正 最初はこんな状態
  65. 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. 66. チーム内で同じ環境を共有してみよう ! Vagrantfileを全員にわたす Vagran>ile Vagran>ile Vagran>ile
  67. 67. チーム内で同じ環境を共有してみよう ! Vagrantfileを全員にわたす vagrant-share cookbooks site-cookbooks .gitignore .README-ja.md .README.md Vagrantfile.sample Vagrantfile 受け取ったファイルを 自分のvagrant-share配 下に置く
  68. 68. チーム内で同じ環境を共有してみよう !  仮想マシン起動 vagrant  up!!   (起動) vagrant  up!!   (起動) vagrant  up!!   (起動)
  69. 69. チーム内で同じ環境を共有してみよう !  仮想マシン起動   #vagrant  up    実行中です。   しばらく待ちましょ う。  
  70. 70. チーム内で同じ環境を共有してみよう !  URLにアクセス     http://wordpress.org
  71. 71. チーム内で同じ環境を共有してみよう !  プラグインも最初からインストールされている
  72. 72. チーム内で同じ環境を共有してみよう !  仮想マシン起動
  73. 73. ハンズオンは ここまで
  74. 74. 概要
  75. 75. XAMPP・MAMPとはちがうところ !  XAMPP・MAMP パソコン
  76. 76. XAMPP・MAMPとはちがうところ !  Vagrant パソコン サーバ(仮想マシン)
  77. 77. XAMPP・MAMPとはちがうところ !  Vagrant パソコン パソコンの中に   サーバがある サーバ(仮想マシン)
  78. 78. XAMPP・MAMPとはちがうところ !  Vagrant パソコン サーバ(仮想マシン) Vagrantはここを自動 で構築してくれる
  79. 79. vagrant  upについて !  vagrant  upすると・・(初めの一回だけ) パソコン サーバ(仮想マシン)
  80. 80. VCCWを使うなら !  慣れないうちはこんな感じでいいかも パソコン サーバ(仮想マシン) h@p://aaa.com   192.168.0.1 サーバ(仮想マシン) h@p://bbb.com   192.168.0.2
  81. 81. 仮想マシンにログインしたい場合 !  コマンドをたたく !  vagrant  ssh パソコン サーバ(仮想マシン)
  82. 82. 仮想マシンにログインしたい場合 !  Windowsでは「vagrant  ssh」するに環境をつく らないといけなから、sshできるソフトを入れた ほうがラク ! TeraTerm !  Putty
  83. 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. 84. もっと詳しく知りたいなら
  85. 85. もっと詳しく知りたいなら
  86. 86. 環境構築をもっとカスタマイズしたいなら
  87. 87. お疲れ様でした
  88. 88. よいVagrantライフを!

×