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

#はじめに
[前回の記事](http://qiita.com/kobaboi/items/5469523a2b0bf8b61e8e)で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フォーマットでデータのやりとりを行うことが可能

[もっと詳しく](http://qiita.com/KENJU/items/41f54d157dae69924386)

#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"の参考サイト](http://raining.bear-life.com/linux/chown%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%84%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E6%89%80%E6%9C%89%E8%80%85%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B)
`[vagrant@vagrant-centos65 html]$ sudo chown -R vagrant:vagrant WebSample`
　これで、`root`だったのだ`vagrant`に変更されました。
・WebSampleのアクセス権を変更します。["chmod"の参考サイト](http://raining.bear-life.com/linux/chmod%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%80%81%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E3%83%91%E3%83%BC%E3%83%9F%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E5%A4%89%E6%9B%B4)
`[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/
![c3c7c355-4719-8d3f-8825-618203590c86.png](https://qiita-image-store.s3.amazonaws.com/0/75241/a4902cef-8bb4-b21f-efbb-ca250b214f63.png)
上記の画面が表示されたら、
無事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/