Vagrant+Centos+Apache+Gulpで静的Webサイトの開発環境


##概要
Vagrant上に、CentOS7+Apache+Gulpで静的Webサイトのローカル開発環境を構築し、Node.jsのBrowserSyncを使用して、修正がリアルタイムにブラウザに同期されるようにします。
ついでにWi-Fiにつないだスマホでも確認できるようにします。

##環境

- MacOSX Yosemite 10.10.3
- Vagrant 1.7.2
- VitualBox 4.3.28
- CentOS 7.1
- Apache 2.4.6
- Node.js 6.6.0
- Gulp 3.9.0

##CentOS7環境の構築
Mac上に任意のディレクトリを作成し、その中にVagrantのSynced Folderで、かつApacheのドキュメントルートと同期するディレクトリを作成します。

```Bash
cd ~
mkdir vm
mkdir vm/sample
cd vm/sample

# synced_folder用の同期ディレクトリを作成
# このディレクトリがApacheのドキュメントルートと同期される
mkdir website
```

vagrant initを実行して、作成されたVagrantfileを編集します。

```Bash
vagrant init jhcook/centos7
```

```ruby
 # config.vm.network "private_network", ip: "192.168.33.10"
 config.vm.network "private_network", ip: "192.168.33.50"
 
 # config.vm.network "public_network"
 config.vm.network "public_network", ip: '192.168.1.50', bridge: 'en1: Wi-Fi (AirPort)'
 
 # config.vm.synced_folder "../data", "/vagrant_data"
 config.vm.synced_folder "website", "/var/www/html",
   type: "rsync", owner: "root", group: "root", rsync__chown: false,
   rsync__exclude: [".DS_Store"]
```

public_networkに設定するIPは以下を参考にしてください。
http://qiita.com/elim/items/816f03c732e4b274d181
http://www.d-wood.com/blog/2014/06/13_6344.html

Vagrantを立ち上げます。無事立ち上がったら、rsync-autoでファイルの自動同期を実行し、Vagrant環境に入ります。

```Bash
# Vagrantの起動
vagrant up --provider virtualbox

# ファイルの自動同期を実行
vagrant rsync-auto > /dev/null &

# Vagrantに入る
vagrant ssh
```

CentOSの設定を行います。rootになりますが、sudoでも良いと思います。

```Bash
# rootユーザに変更、パスワードはvagrant
su

# yumのupdate
yum -y update

# 開発ツールインストール
yum -y group install "Development Tools"

# タイムゾーンの設定
timedatectl set-timezone Asia/Tokyo

# ロケールの設定
localectl set-locale LANG=ja_JP.UTF-8
```

##Apacheのインストール
Apacheをインストールして、ファイアーウォールを設定します。

```Bash
yum -y install httpd
systemctl start httpd
systemctl enable httpd

firewall-cmd --permanent --add-service=http
firewall-cmd --reload
```

Macの適当なブラウザを立ち上げて、以下にアクセスして、Centos7のウェルカムページが表示されることを確認します。
http://192.168.33.50/

Wi-Fiにつないだスマホでブラウザを立ち上げて、以下にアクセスして、Centos7のウェルカムページが表示されることを確認します。
http://192.168.1.50/


次に、Mac上の~/vm/sample/websiteディレクトリ内にindex.html、style.cssを作成します。
再度ブラウザで確認して、作成したファイルが表示されれば成功です。

Mac: http://192.168.33.50/
スマホ：http://192.168.1.50/

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>hoge</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<p class="hoge1">hoge</p>
</body>
</html>
```
```CSS
.hoge1 {
	color: blue;
}
```

##Node.jsをインストール

```Bash
cd /tmp
sudo curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
sudo yum -y install nodejs
```

Gulpをインストールして、BrowserSyncで編集した内容がすぐにブラウザでロードされるようにします。

```Bash

# コンパイラインストール
cd /vagrant

npm install --global gulp
npm install --save-dev gulp
npm install --save-dev browser-sync
npm install --save-dev run-sequence

```

Mac上の~/vm/sampleディレクトリに、gulpfile.jsを作成します。

```JavaScript
var gulp         = require('gulp');
var runSequence  = require('run-sequence');
var browserSync  = require('browser-sync').create();

gulp.task('browser-sync', function() {
	browserSync.init({
		 proxy: "localhost/"
	});

	gulp.watch("/var/www/html/*.*").on('change', browserSync.reload);
});

gulp.task('default', function(callback) {
	return runSequence(
		'browser-sync',
		callback
	);
});
```

BrowserSyncで使用するポートを開けて、Gulpを起動します。

```Bash
#ファイアーウォールでBrowserSyncで使用するポートを開ける
firewall-cmd --permanent --add-port=3000/tcp
firewall-cmd --permanent --add-port=3001/tcp
firewall-cmd --reload

gulp
```

gulpが起動し終わったら、以下にアクセスして、作成したページが表示されていることを確認します。
Mac: http://192.168.33.50:3000/
スマホ：http://192.168.1.50:3000/

Mac上で、index.htmlやstyle.cssを編集してブラウザと同期されれば成功です。