WordBench熊本Vagrant勉強会

4,321 views
4,218 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,321
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
24
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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ライフを!

×