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

概要

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のドキュメントルートと同期するディレクトリを作成します。

cd ~
mkdir vm
mkdir vm/sample
cd vm/sample

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

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

vagrant init jhcook/centos7

 # 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環境に入ります。

# Vagrantの起動
vagrant up --provider virtualbox

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

# Vagrantに入る
vagrant ssh

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

# 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をインストールして、ファイアーウォールを設定します。

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/

<!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>

.hoge1 {
    color: blue;
}

Node.jsをインストール

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

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


# コンパイラインストール
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を作成します。

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を起動します。

#ファイアーウォールで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を編集してブラウザと同期されれば成功です。