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.

ローカル開発環境の構築をしよう VirtualBox + Vagrant

494 views

Published on

VirtualBox + Vagrantを使った、ローカル開発環境の構築方法を紹介したLTです。VirtualBoxのみと、Vagrantを使った場合の比較をしています。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

ローカル開発環境の構築をしよう VirtualBox + Vagrant

  1. 1. ローカル開発環境の構築をしよう VirtualBox + Vagrant
  2. 2. 株式会社oliva 知恵で世界を変えていく。
  3. 3. 初めに • 初心者向けです! • VirtualBox、Vagrantを知っているけど、使ったことがない人 • いまいち仮想環境を構築するメリットがよく分かってない人    そんな方にピッタリのスライドとなっています!  それでは見ていきましょう!
  4. 4. 自己紹介 • Kazuma Kimura(木村 和真)  二匹の猫さまと暮らす  システムエンジニア • Twitter:@K_Makazu • 所属:株式会社oliva
  5. 5. 目的 • ローカル開発環境の作り方を知ってほしい • ローカル開発環境をつくるメリットを知ってほしい
  6. 6. アジェンダ • 開発環境あるある? • Web3層構成を見てみよう • VirtualBox + Vagrantの紹介 • 開発環境構築のデモ • 開発環境あるある?解決編
  7. 7. アジェンダ • 開発環境あるある? • Web3層構成を見てみよう • VirtualBox + Vagrantの紹介 • 開発環境構築のデモ • 開発環境あるある?解決編
  8. 8. ローカル開発で こんな経験ありませんか?
  9. 9. ローカル環境依存問題
  10. 10. 俺のローカル環境だと動かない…orz
  11. 11. 原因 • ソフトとか、ツールのバージョン違う • 環境設定ファイルが違う • Mac/WindowsなどのOS依存 • ディレクトリ構造が違う etc.
  12. 12. ローカルPCにインストールしたソフトが 競合してうまく動かない
  13. 13. 俺達の 80 Port は渡さないぞ!!
  14. 14. PC壊れた… また一から環境構築だ…
  15. 15. うちの会社にいたような…(´・ω・`)
  16. 16. VirtualBox + Vagrantなら 解決しちゃいます
  17. 17. 乞うご期待!!
  18. 18. アジェンダ • 開発環境あるある? • Web3層構成を見てみよう • VirtualBox + Vagrantの紹介 • 開発環境構築のデモ • 開発環境あるある?解決編
  19. 19. Webサー バ APサー バ DBサー バ インター ネット クライ アント 静的コンテ ンツ 動的コンテ ンツ データ HTML・CS S・JS Java・PHP
  20. 20. Webサー バ APサー バ DBサー バ インター ネット クライ アント 静的コンテ ンツ 動的コンテ ンツ データ HTML・CS S・JS Java・PHP VirtualBox + Vagrant 仮想環境の構築
  21. 21. ローカルPC上の構成 • ローカルPCに仮想環境は複数作成するこ とができる • Box単位にVagrantfileが作成される OS( Windows/Mac/Linux ) VirtualBox OS(Box) Web AP DB Vagrantfile 192.168.33.10 OS(Box) Web AP DB Vagrantfile 192.168.33.11
  22. 22. アジェンダ • 開発環境あるある? • Web3層構成を見てみよう • VirtualBox + Vagrantの紹介 • 開発環境構築のデモ • 開発環境あるある?解決編
  23. 23. What’s VirtualBox? • ライセンスフリーの仮想化ツール • イメージは、PCの中にもう一つのPCを作 れるもの • 開発元:Oracle • 初版:2007/1/15 • 公式サイト:https://www.virtualbox.org/
  24. 24. What’s Vagrant? • 仮想マシンを管理するツールで、構築や 共有を簡単に行うことができる • 開発元:Mitchell Hahimoto • Rubyで作られている • 公式サイト:https://www.vagrantup.com/
  25. 25. VirtualBoxだけで構築はできる Vagrantを使うといろいろ便利
  26. 26. アジェンダ • 開発環境あるある? • Web3層構成を見てみよう • VirtualBox + Vagrantの紹介 • 開発環境構築のデモ • 開発環境あるある?解決編
  27. 27. まずVirtualBoxで作ってみよう!
  28. 28. デモの流れ • VirtualBoxのインストール • 仮想マシンの作成 • 仮想マシンの起動 • 共有フォルダの設定 • Hello Worldを表示させてみる
  29. 29. VirtualBoxのインストール • ダウンロードサイト :https://www.virtualbox.org/wiki/Downlo ads • インストールは、特殊なことをしない限りデ フォルトで進めればOK
  30. 30. 仮想マシンの作成 • 仮想マシンの初期設定をする • OSタイプの設定 • 仮想メモリの割当を設定 • ハードディスクの容量を設定   etc..
  31. 31. 仮想マシンの起動 • 起動に必要なCentOSをダウンロードして くる • ダウンロードサイト :http://isoredirect.centos.org/centos/7/is os/x86_64/CentOS-7-x86_64-DVD-170 8.iso
  32. 32. 仮想マシンの起動 • OSの初期設定をする • デフォルトソフトウェアの選択 • インストール先の設定 • ネットワークとホスト名の設定   etc..
  33. 33. 共有フォルダの設定 • ローカルPCの共有させたいフォルダを選 択 • Guest Additionsインストール $ mkdir /media/cdrom $ mount -r /dev/cdrom /media/cdrom $ cd /media/cdrom/ $ ./VBoxLinuxAdditions.run … $ ls /media/sf_{共有フォルダ名}
  34. 34. ベースの構築はこれで完了!
  35. 35. ここまでざっと1時間くらい ダウンロード/起動にやたら時間か かった
  36. 36. ここからは好みの環境を!
  37. 37. Hello Worldを表示させてみる • 言語:Java • Webサーバ:Apache • アプリケーションサーバ:Tomcat
  38. 38. とりあえず Yum Yum してインストール を進めていく
  39. 39. • Java インストール $ yum -y install java-1.8.0-openjdk java-1.8.0-openjdk-devel … $ java -version openjdk version "1.8.0_161" OpenJDK Runtime Environment (build 1.8.0_161-b14) OpenJDK 64-Bit Server VM (build 25.161-b14, mixed mode) $ javac -version javac 1.8.0_161
  40. 40. • Apache インストール • Apache 起動 $ yum -y install httpd … $ httpd -version Server version: Apache/2.4.6 (CentOS) Server built: Oct 19 2017 20:39:16 $ systemctl start httpd …
  41. 41. • Tomcat インストール • Tomcat 起動 $ yum -y install tomcat … $ tomcat version Server version: Apache Tomcat/7.0.76 Server built: Oct 30 2017 10:21:55 UTC … $ systemctl start tomcat …
  42. 42. Firewallの設定も忘れずに!
  43. 43. • Firewallの設定 • Apache • Tomcat $ firewall-cmd --add-service=http --zone=public —permanent $ firewall-cmd —reload # デフォルトに設定がなかったので、tomcat.xmlを作成 $ vim tomcat.xml $ firewall-cmd --add-service=tomcat --zone=public --permanent $ firewall-cmd --reload
  44. 44. モジュールを配置していく
  45. 45. • Apache • index.htmlの作成 • Tomcat • sample.warをデプロイ $ vim /var/www/html/index.html ——— <h1>Hello World</h1> ——— $ ls /usr/share/tomcat/webapps sample sample.war
  46. 46. さあ、Hello Worldを拝むときだ!
  47. 47. まずはApacheさんのHello World アクセス!Enter!
  48. 48. よし、Hello World \(^O^)/
  49. 49. 次はTomcatさんのHello World アクセス!Enter!
  50. 50. (; ・`ω・´)ナン…ダト!?
  51. 51. Apache → Tomcat連携の設定を忘 れていた・・・
  52. 52. Apache→Tomcatの連携を設定
  53. 53. • Apache <=> Tomcatの連携 • Apache • Tomcat # ProxyPassの追加 Apache -> Tomcat $ vim /etc/httpd/conf.modules.d/httpd-proxy.conf ProxyPass /sample/ ajp://192.168.33.10:8009/sample/ # httpd.conf Includeさせる cat /etc/httpd/conf/httpd.conf | grep Include Include conf.modules.d/*.conf … # 受口を設定 Apache -> Tomcat $ cat /usr/share/tomcat/conf/server.xml <!-- Define an AJP 1.3 Connector on port 8009 --> <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" /> …
  54. 54. 仕切り直し アクセス!Enter!
  55. 55. ねこちゃん Hello \(^O^)/
  56. 56. 無事、Hello World 拝めた
  57. 57. でもなんか
  58. 58. 結構大変だったな・・・
  59. 59. Vagrantに期待!
  60. 60. Vagrantを使ってみよう!
  61. 61. デモの流れ • Vagrantのインストール • Boxの追加 • 仮想マシンの初期化 • Vagrantfileの設定 • 仮想マシンの起動
  62. 62. Vagrantのインストール • ダウンロードサイト :https://www.vagrantup.com/downloads .html • インストールは、特殊なことをしない限りデ フォルトで進めればOK
  63. 63. Boxの追加 • Boxとは、作成する仮想マシンのベースと なるもの • Box一覧:http://www.vagrantbox.es/ • 追加:vagrant box add {name} {url} $ vagrant box add CentOS70 https://github.com/tommy-muehle/puppet -vagrant-boxes/releases/download/1.1.0/ centos-7.0-x86_64.box
  64. 64. 仮想マシンの初期化 • VirtualBoxの初期化:vagrant init {boxName} • Vagrantfileが作成される $ vagrant init CentOS70 A `Vagrantfile` has been placed in this directory. You are now … $ ls vagrant/CentOS70 Vagrantfile
  65. 65. Vagrantfileの設定 • Vagrantfileとは、仮想マシンの設定ファイル • IPアドレスの設定追加 $ vim Vagrantfile config.vm.network “private_network”, ip: “192.168.33.10”
  66. 66. 仮想マシンの起動 • VirtualBoxを起動:vagrant up • 起動されたか確認:vagrant status $ vagrant up Bringing machine 'default' up with 'virtualbox' provider... ==> default: Clearing any previously set forwarded ports… … $ vagrant status Current machine states: default running (virtualbox) …
  67. 67. ベースの構築はこれで完了!
  68. 68. タイムは・・・
  69. 69. 6分43秒
  70. 70. コマンドだけ見るとこれだけ $ vagrant box add {boxName} {box} $ vagrant init {boxName} $ vagrant up
  71. 71. 確かに早いし、簡単だ!
  72. 72. でもこれだけか??
  73. 73. Vagrantの凄さはここからだ
  74. 74. Yum Yumとか、サービスの起動設定 とか、構築時に一回だけやるやつ 立ち上げたときにやってくれると嬉しい
  75. 75. コマンドをShellにして自動化
  76. 76. Vagrant up時にShellを実行 • VagrantfileにProvision用のShellを読み込むように設定を追加 • Shellを作成 $ vim Vagrantfile Bconfig.vm.provision :shell, :path => “ファイル名" … $ vim provision.sh sudo yum -y install java-1.8.0-openjdk java-1.8.0-openjdk-devel sudo yum -y install httpd systemctl start httpd sudo yum -y install tomcat systemctl start tomcat
  77. 77. 今の構築した状態を保存しておいて、 また作るときにベースとして使えたりし たら嬉しい
  78. 78. パッケージ化してベース(Box)作成
  79. 79. Boxの作成 • Box作成:vagrant package $ vagrant package $ ls vagrant/CentOS70 package.box
  80. 80. Vagrantならリカバリーも簡単
  81. 81. 環境リカバリー • 削除→初期化→立ち上げる • vagrant destroy • vagrant init {boxName} • vagrant up
  82. 82. アジェンダ • 開発環境あるある? • Web3層構成を見てみよう • VirtualBox + Vagrantの紹介 • 開発環境構築のデモ • 開発環境あるある?解決編
  83. 83. 解決策はもう出て来てるが、 開発環境あるあるを解決してく
  84. 84. ローカル環境依存問題
  85. 85. 俺のローカル環境だと動かない…orz
  86. 86. VatualBox + Vagrantなら ローカル依存(環境差異)はない
  87. 87. ローカルPCにインストールしたソフトが 競合してうまく動かない
  88. 88. 俺達の 80 Port は渡さないぞ
  89. 89. VatualBox + Vagrantなら 環境分離できる
  90. 90. PC壊れた・・・ また一から環境構築だ。。。
  91. 91. うちの会社にいたような…(´・ω・`)
  92. 92. VirtualBox + Vagrant + Boxインス トール 10分あればできちゃう
  93. 93. まとめ
  94. 94. • 仮想化とか難しい気がしてたけどそ んなに難しくなかった • 構築も簡単なので、いろんな環境を つくって見ようと思った
  95. 95. みなさんも是非作ってみてください!
  96. 96. 木村 和真 DAT E AUTH OR2018/5/8 ご静聴ありがとうございました
  97. 97. 株式会社oliva 知恵で世界を変えていく。

×