MEAN環境をVagrantで構築してみた

MEANとは？

MEANとは以下のJSフレームワーク等を組み合わせて作られるフルスタック環境です
・MongoDB
・Express
・Angular.js
・Node.js

今回VagrantにのせたOSはCentOS6.5です

VagrantにCentOS6.5を構築

Vagrant環境構築方法はこちら

Vagrant構築の際に、Vagrantfileの修正をして立ち上げる

Vagrantfile

# config.vm.network "private_network", ip: "192.168.33.10"
↑コメントアウトを外す

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

下準備

個人的にvimとepelを有効化

sudo yum -y install vim epel-release

開発ツールを一括インストール、更新

sudo yum -y groupinstall "Development Tools"
sudo yum -y update

これで下準備完了

Node.js,npmのインストール

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

sudo yum -y install --enablerepo=epel nodejs npm
sudo rm -rf /usr/lib/node_modules/inherits
sudo mv /usr/lib/node_modules/inherits@2 /usr/lib/node_modules/inherits

MongoDBのインストール

MongoDBレポジトリの追加

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

/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

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

sudo yum -y install mongodb-org
sudo service mongod start
sudo chkconfig mongod on

bowerのインストール

インストール

sudo npm install -g bower

gruntのインストール

インストール

sudo npm install -g grunt-cli

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

インストール

sudo yum install libpng-devel
sudo npm install -g yo

Angular-Fullstackのインストール

sudo npm install -g generator-angular-fullstack-jp

YEOMAN実行

yo

もしココでこけたら以下のコマンド

bower install & npm install
yo

Gruntfileの変更

sudo vim Gruntfile.js

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'
    ]);
  });

サーバの起動

ビルド

grunt serve

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

この画面が出たら構築完了

YEOMANすげぇー(・∀・)