Edited at

VirtualBox Vagrant でローカル開発web環境の共通化

More than 1 year has passed since last update.

Xampp(win) mamp(mac) でweb環境を都度つくっていくのがしんどいので共通化したり、もっと簡単に構築できないかと思い、VirtualBox & Vagrant での環境構築を行った。

仮想サーバーを立ち上げてhtmlをブラウジングできるまでをメモ。


必要なもの


■ OS共通


  • VirtualBox

  • Vagrant


◇ windows


  • tera term

    web環境を構築するため、phpとかapachとかをコマンドラインでinstallするのですが
    sshで仮想環境に接続してコマンド打つために入れる
    sshできればtera termでなくてもよい
    (macはターミナルで接続できるので不要)


◆ mac

PC買い換えたときとか、複数PCにinstallしなくてはいけないときとか

いちいちdmg落としてinstallすると時間がかかるのでコマンドラインからinstallできるようにするため、以下を入れておく


  • homebrew

    OS X 用パッケージマネージャー

  • homebrew-cask

    dmgファイルを手動DL、installするところを commandでinstallできるようにするhomebrewの拡張プラグイン

  • Cakebrew

    homebrewをGUI操作したい人向け


手順


VirtualBoxとvagrantをinstall

簡単な説明


  • VirtualBoxとは

    自分のPCの中に仮想環境を作って、別の OS をインストール・実行できるフリーの PC 仮想化ソフト

  • vagrantとは

    アプリケーションやシステム開発のバックエンドを簡単にパッケージ化し、共有するためのツール

    VirtualBoxをコマンドラインで動かすコントローラーみたいなものって思うといいかも


◇ windows


VirtualBoxのinstall

OSにあったインストーラーでインストール

https://www.virtualbox.org/wiki/Downloads


Vagrantのinstall

OSにあったインストーラーでインストール

https://www.vagrantup.com/downloads.html


tera termのinstall

windowsのコマンドプロンプトではssh接続でapachのインストールなどできないので、コマンド打つためのツールとして入れておく。ssh打てれば別のツールでもOK

https://osdn.jp/projects/ttssh2/


◆ mac


homebrewのinstall

http://brew.sh/index_ja.html

VirtualBox / Vagrant はインストーラーで入れても構いませんが、homebrewで入れた方がいちいちdmg落としてinstallするより断然楽なので入れておく

公式サイトにもあるようにmacのターミナルから以下を打ってinstall

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"


homebrew-caskのinstall

$ brew install caskroom/cask/brew-cask


VirtualBoxのinstall

通常、dmg落としてinstallするところをhomebrew-caskを入れておけば

以下をターミナルから打つことでinstallできる



$ brew cask install virtualbox


Vagrantのinstall

これもhomebrew-caskでいれる

$ brew cask install vagrant


■ OS共通

上記、vagrantまでinstallが完了しているか、コマンドラインで確認する

$ vagrant -v

Vagrant 1.8.1 などとversionが返ってきたら成功


vagrantでboxファイルから仮想環境にOSを入れて、Vagrantfileを作成してvagrantを動かす

簡単な説明


  • boxとは

    仮想マシンを作成する際に必要なOSのディスクイメージファイル等が入ったファイルの集まりで、仮想マシンのテンプレートみたいなもの

  • Vagrantfileとは

    vagrantを動かすにあたってのコンフィグ(設定)ファイルのこと


■ OS共通


boxのinstall

VirtualBoxの仮想環境の中にOSをいれます。

Vagrantbox.esというサイトでさまざまなboxファイルが配布されており、ネットにつながるPCであれば以下のコマンドラインで、任意のboxファイルをinstallすることができる

$ vagrant box add {title} {url}


  • {title} : Box名 (任意です。自分がわかる名前をつけましょう)

  • {url} : Boxの配置先URL()

今回は例としてCentOSのCentOS7.0を入れるので以下のようになります

$ vagrant box add CentOS7.0 https://github.com/tommy-muehle/puppet-vagrant-boxes/releases/download/1.1.0/centos-7.0-x86_64.box


tips

ネットワークの環境によっては(特に会社のネットワークなどでお仕事されている方)proxyの設定によりうまく box add できないケースがあるようです。

その場合はproxyの設定をしてあげましょう。

set http_proxy="http://proxyhostほげほげ:port"

set https_proxy="http://proxyhostほげほげ:port"


boxがinstallされたか確認

boxファイルはPCに一度入れるとそのまま残っているので、別の環境を構築する際に同じboxでよいならば都度installする必要はない

というわけでinstallされているboxをコマンドラインで確認

$ vagrant box list

CentOS7.0 (virtualbox, 0)などと返ってきたらboxファイルが入っていることになる


Vagrantfileを新規作成する

新規テキストを作成して拡張子も含めて、Vagrantfileというものを作り、中身を書いていくことで作成可能だが、

vagrantのコマンドから初期化で作成が可能。こちらの方が初期設定が記述されたファイルが生成されるのでオススメ

ローカル開発の場所にしたいフォルダまでコマンドラインで移動して、そこで初期化コマンドを打ちます

$ vagrant init {title}

今回は例としてCentOS7.0にしたので以下のようにする

$ vagrant init CentOS7.0

すると、フォルダの中にVagrantfileというファイルが作成される

いろいろとコメントアウトされているが、とりあえず必要なものをコメント外す


  • boxの設定

config.vm.box = "box名"

例のinitコマンドで作成した場合はconfig.vm.box = "CentOS7.0"となっているはず


  • ネットワークの設定

    ブラウザでのアクセスだったりFTPで接続だったりでこの仮想環境にipが必要なので以下のコメントアウトを外しておく

config.vm.network "private_network", ip: "192.168.33.10"

ipは任意で変えてもよい模様


  • ホスト・ゲスト間でファイルの同期設定

    これにより仮想環境側に SCP などでいちいち転送する必要がなくなり、スムーズに直接確認することが出来ます。

config.vm.synced_folder ".", "/vagrant", mount_options:['dmode=777','fmode=777']

dmodeがディレクトリ、fmodeがファイルのパーミッション。本番環境などでは777とかしたらめっちゃ怒られるのでこれは適宜変えましょう。


vagrantを起動する

コマンドラインからVagrantfileがおいてあるディレクトリで起動コマンドを実行する

$ vagrant up

VirtualBoxが立ち上がって仮想環境がスタンバイする


仮想環境にsshで接続してwebサーバーをinstallする


  • macはターミナルからsshで接続可能

  • windowsはコマンドプロンプトではssh接続できないため、事前にインストールしていたtera termを使って接続する


◆ mac


  • ssh接続

$ vagrant ssh


■ OS共通

ssh接続状態でコマンドを打っていく


webサーバーをinstall

$ sudo yum -y install httpd


httpd を起動

$ sudo systemctl start httpd.service


次回以降、立ち上げたら自動で起動するように設定

$ sudo systemctl enable httpd.service


ローカルですし、ファイヤーウォールを切っておく

$ sudo systemctl stop firewalld

$ sudo systemctl disable firewalld
$ sudo systemctl status firewalld


phpをinstallします

$ sudo yum -y install php php-mbstring


vagrant 上で共有フォルダへシンボリックリンクをはってすぐ反映させるようにする

まずコピー先のDocumentRootを空っぽにしておく

$ sudo rm -rf /var/www/html

シンボリックリンクを設定

$ sudo ln -fs /vagrant /var/www/html


testファイルを置いて検証ブラウザで見れるか確認

以上だとVagrantfileがある場所がドキュメントルートになっていると思われるので、同階層にtest.htmlを作成。


test.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vagrant Congratulations Success!!!!</title>
<style type="text/css" media="screen">
body{
background: #000;
color: #fff
}
</style>
</head>
<body>
<h1>Vagrant Congratulations Success!!!!</h1>
</body>
</html>


ブラウザでURLへアクセス

http://192.168.33.10/test.html

以上で閲覧できたら成功