Vagrantで起動したCentOS6.5にMEAN環境を構築した

はじめに

前回の記事でVirtualBoxとVagrantをインストールし、
CentOS6.5の仮想環境を構築しました。
そして、共有フォルダ内に入れたHTMLソースファイルをWebで確認するところまでできました。

今回は、共有フォルダではなく新しくディレクトリを作成し、
そこにMEAN環境を構築していきます。

1. MEANとはなにか

M: MongoDB（ドキュメント指向データベース）
E: Express（Node.js上で動作するMVCフレームワーク）
A: Angular.js（フロントエンドのJavaScript用MVWフレームワーク）
N: Node.js（サーバーサイドJavaScriptの実行環境）

・全てJavaScriptでWebアプリを開発することが可能
・フロントエンドからデータベースまで一貫してJSONフォーマットでデータのやりとりを行うことが可能

もっと詳しく

2. 下準備

Windowsの場合はTera Termで接続しておく。
(Macの場合はvagrant sshで接続する。　suでpass:vagrant）
接続が出来たら、
[vagrant@vagrant-centos65 ~]$
と表示される。

2-1. 新規ディレクトリの作成

まずルートディレクトリに移動します。
[vagrant@vagrant-centos65 ~]$ cd /

[vagrant@vagrant-centos65 /]$ ls
bin   dev  home  lib64       media  opt   root  selinux  sys  usr      var
boot  etc  lib   lost+found  mnt    proc  sbin  srv      tmp  vagrant

共有ディレクトリがある場所まで移動します。
[vagrant@vagrant-centos65 /]$ cd var/www/html

[vagrant@vagrant-centos65 html]$ ls
hello

このhelloという名前のディレクトリがwindows側との共有ディレクトリです。
ここにWebSampleという名前のディレクトリを作成します。
WebSampleにMEAN環境を構築していきます。

・新規ディレクトリの作成
[vagrant@vagrant-centos65 html]$ sudo mkdir WebSample
・WebSampleのディレクトリの所有者を変更します。"chown"の参考サイト
[vagrant@vagrant-centos65 html]$ sudo chown -R vagrant:vagrant WebSample
　これで、rootだったのだvagrantに変更されました。
・WebSampleのアクセス権を変更します。"chmod"の参考サイト
[vagrant@vagrant-centos65 html]$ sudo chmod -R 777 WebSample
　これで、drwxr-xr-xだったのがdrwxrwxrwxに変更されました。

「参考」

[vagrant@vagrant-centos65 html]$ ls -la
total 12
drwxr-xr-x 4 root    root    4096 Apr 26 11:47 .
drwxr-xr-x 6 root    root    4096 Apr 25 09:02 ..
drwxrwxrwx 1 vagrant vagrant    0 Apr 25 09:00 hello
drwxrwxrwx 6 vagrant vagrant 4096 Apr 25 16:58 WebSample

WebSampleに移動します。
[vagrant@vagrant-centos65 html]$ cd WebSample

2-2. vimとepelを有効化

[vagrant@vagrant-centos65 WebSample]$ sudo yum -y install vim epel-release

2-3. 開発ツールを一括インストール、更新

[vagrant@vagrant-centos65 WebSample]$ sudo yum -y groupinstall "Development Tools"
[vagrant@vagrant-centos65 WebSample]$ sudo yum -y update

3. インストール

3-1. Node.jsとnpmのインストール

epelレポジトリからインストール

[vagrant@vagrant-centos65 WebSample]$ sudo yum -y install --enablerepo=epel nodejs npm
[vagrant@vagrant-centos65 WebSample]$ sudo rm -rf /usr/lib/node_modules/inherits
[vagrant@vagrant-centos65 WebSample]$ sudo mv /usr/lib/node_modules/inherits@2 /usr/lib/node_modules/inherits

3-2. MongoDBのインストール

MongoDBレポジトリの追加
[vagrant@vagrant-centos65 WebSample]$ sudo vim /etc/yum.repos.d/mongodb.repo
下記を追加する。
（vimを使用しているため、まずaを押してインサートモードに移る。
保存して終了するときは、Escを押してコマンドモードに移ってから:wqを押す。）

/etc/yum.repos.d/mongodb.repo

[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/
gpgcheck=0
enabled=1

インストール・起動・自動起動

[vagrant@vagrant-centos65 WebSample]$ sudo yum -y install mongodb-org
[vagrant@vagrant-centos65 WebSample]$ sudo service mongod start
[vagrant@vagrant-centos65 WebSample]$ sudo chkconfig mongod on

3-3. bowerのインストール

[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g bower

3-4. gruntのインストール

[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g grunt-cli

3-5. ここでとりあえずvagrantを再起動します

①Tera Termを閉じます
[vagrant@vagrant-centos65 WebSample]$ exit
②Vagrantを再起動します
C:\Users\keisuke\centos> vagrant reload
③接続します
Teta Termを開いてアクセスします
(Macはvagrant sshでアクセスしsuでpass:vagrant)
④WebSampleまで移動する
[vagrant@vagrant-centos65 /]$ cd var/www/html/WebSample

4. YEOMAN（ヨーマン）のインストール

この項目は、インストールに時間がかかるためコーヒーでも飲みながらのんびりとやったほうが良いです。

4-1. インストール

[vagrant@vagrant-centos65 WebSample]$ sudo yum install libpng-devel
[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g yo

4-2. Angular-Fullstackのインストール

[vagrant@vagrant-centos65 WebSample]$ sudo npm install -g generator-angular-fullstack-jp

4-3. YEOMAN実行

[vagrant@vagrant-centos65 WebSample]$ yo

[vagrant@vagrant-centos65 WebSample]$ yo
? 'Allo! What would you like to do? (Use arrow keys)
  Run a generator
? Angular Fullstack Jp
  qqqqqqqqqqqqqq
  Update your generators
  Install a generator
  Find some help
  Get me out of here!
  qqqqqqqqqqqqqq

[vagrant@vagrant-centos65 html]$ yo
? 'Allo! What would you like to do? Angular Fullstack Jp

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo angular-fullstack-jp


     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I create an AngularJS app with an Express server.

# Client

? What would you like to write scripts with? (Use arrow keys)
? JavaScript
  CoffeeScript

? What would you like to write markup with? (Use arrow keys)
? HTML
  Jade

? What would you like to write stylesheets with?
? CSS
  Sass
  Stylus
  Less

? What Angular router would you like to use? (Use arrow keys)
  ngRoute
? uiRouter

その後もYやYESなど自分の好きなように選んでいき雛型を生成します。

4-4. Gruntfileの変更

下記を実行してGruntfileを変更する

[vagrant@vagrant-centos65 WebSample]$ sudo vim Gruntfile.js

vimで開いているとき、
539行目に書かれているopenをコメントアウトする。（下記を参考）

Gruntfile.js

if (target === 'debug') {
      return grunt.task.run([
        'clean:server',
        'env:all',
        'concurrent:server',
        'injector',
        'wiredep',
        'autoprefixer',
        'concurrent:debug'
      ]);
    }

    grunt.task.run([
      'clean:server',
      'env:all',
      'concurrent:server',
      'injector',
      'wiredep',
      'autoprefixer',
      'express:dev',
      'wait',
  //    'open', ←コメントアウト（539行目）
      'watch'
    ]);
  });

5. サーバの起動

ビルド

[vagrant@vagrant-centos65 WebSample]$ grunt serve

ビルド後にアクセス
http://192.168.33.10:9000/

上記の画面が表示されたら、
無事MEAN環境が構築出来ました。

切断方法
ctrl+cで終了する

現在起動しているサーバを見る
ps aux | grep grun

Tera Termの"新しい接続"でターミナルを複数使用して開発していく。

おわりに

これでweb開発を行う環境を構築することができました！
今後、Web開発を行っていくために、
server側とclient側の連携などについても理解してまとめていきたいです。

参考サイト

「【Windows7(64bit)】VirtualBox+VagrantでCentOSの仮想環境構築」
URL：http://qiita.com/kobaboi/items/5469523a2b0bf8b61e8e
「MEAN環境をVagrantで構築してみた」
URL：http://qiita.com/kurun/items/d957e65a084019f9f610
「CentOS6.5(64bit)にMeanを入れてみた」
URL：http://gaku3601.hatenablog.com/entry/2014/12/07/210911
「YEOMANを使ってMEAN(MongoDB+Express+AngularJS+Node.js)を作成しよう」
URL：http://blog.chat.ac/yeoman%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6meanmongodbexpressangularjsnode-js%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%82%88%E3%81%86/