【環境ごとまるっと提供】MEANスタックを始めよう

環境ごとまるっと提供とは

ツールのインストールが若干面倒だったり、環境の違いで動かないといった状況を無くすために、Vagrantとそのプロビジョニング用のファイルを提供することで、確実に動く環境を手元にお届けするのが狙いです。
※VirtualBox&Vagrantの環境をセットアップしてあることが前提になってしまうのですが、それらのインストールは、非常に簡単ですので、「動かないから断念」問題になる可能性が低いです。

MEANスタックとは

MEANスタックで始めるWebアプリ開発入門に分かりやすい解説がありますが、とても簡単に言ってしまうと、最近はやりのリッチなwebアプリを簡単に作成することを目的としたフルスタックなフレームワーク（およびそれを支えるミドルウェア等）郡のことを指します。
一昔前に流行った（今もたくさん使われていますが）LAMPのようなものですね。

LAMPは、主にLinux,Apache,MySQL,PHP(Perl,Python)の頭文字を取った呼称であり、他にもLAPP(MySQL→Postgres SQL)などちょっとずつ変わった派生系が存在するのが特徴です。

MEANは、LAMPの派生系ではなく、以下のフレームワーク郡のことを指します。
M：MongoDB（ドキュメント指向データベース）
E：Express（Node.js上で動作するMVCフレームワーク）
A：AngularJS（フロントエンドのJavaScript用MVWフレームワーク）
N：Node.js（サーバーサイドJavaScriptの実行環境）
最近は、Node.jsが台頭してきたことにより、フロント〜サーバサイドまでJavascriptで統一し、Javascriptの知識さえあれば、ある程度のwebサービスは作れるようになってきています。また、今どきはsocket-ioなどによりクライアントとサーバが双方向で通信するなど、昔はできなかったことが今は簡単にできるようになっており、時代の流れを感じます。
一昔前に、Ruby on Railsの生産性、マジパネェ!って言っていたのが懐かしいですね（笑）
業務系のwebアプリでは、未だにstrutsだったりするのに。。。（笑）

サンプルを作ってみる上では、以下を参考にさせていただきました
YEOMANを使ってMEAN（MongoDB + Express.js + Angular.js + Node.js）のWebアプリケーションを作る
最新・最速！Webサービスが今すぐ作れる！ - MEANスタック開発(1)

環境構築用のVagrantfile

今回は、とりあえず環境をさくっと作るところまでを紹介します。

まずは、お決まりのVagrantfileから

Vagrantfile

Vagrant::Config.run do |config|
  config.vm.box = "centos64_6_5"
  config.vm.box_url = "http://opscode-vm-bento.s3.amazonaws.com/vagrant/virtualbox/opscode_centos-6.5_chef-provisionerless.box"

  config.vm.define "for_mean" do |for_mean|
    for_mean.vm.network "hostonly", "192.168.55.10"
    for_mean.vm.provision "shell", path: "setup_mean_env.sh"
  end

end

setup_mean_env.sh

#!/bin/bash
VAGRANT_HOME=/home/vagrant
NODE_VERSION=v0.12.7
NVM_INSTALL_PATH=/usr/share/bin

##### install git ######
echo "yum install git -y"
yum install git -y

##### install g++ ######
echo "yum install gcc-c++
 -y"
yum install gcc-c++ -y



##### set up nvm ######
echo "git clone https://github.com/creationix/nvm.git ${NVM_INSTALL_PATH}/.nvm"
git clone https://github.com/creationix/nvm.git ${NVM_INSTALL_PATH}/.nvm

ln -s ${NVM_INSTALL_PATH}/.nvm ${VAGRANT_HOME}/.nvm # symbolic link for vagrant user
cat << _EOT_ >> ${VAGRANT_HOME}/.bash_profile
source ~/.nvm/nvm.sh
nvm use ${NODE_VERSION}
_EOT_

ln -s ${NVM_INSTALL_PATH}/.nvm ~/.nvm # symbolic link for root user
cat << _EOT_ >> ~/.bash_profile
source ~/.nvm/nvm.sh
nvm use ${NODE_VERSION}
_EOT_

source ~/.bash_profile


##### set up node from nvm ######
echo "nvm install ${NODE_VERSION}"
nvm install ${NODE_VERSION} 2>/dev/null # no-output progress-bar(stderr To /dev/null
echo "nvm use ${NODE_VERSION}"
nvm use ${NODE_VERSION}

echo "npm version"
npm version
echo "node --version"
node --version


##### install node packages for mean ######
#echo "npm install -g spawn-sync"
#npm install -g spawn-sync # ==> error occur by spawn-sync 要調査
#echo "npm install -g yo"
#npm install -g yo # ==> error occur by spawn-sync 要調査
echo "npm install -g bower"
npm install -g bower
echo "npm install -g grunt-cli"
npm install -g grunt-cli
echo "npm install -g gulp"
npm install -g gulp
#echo "npm install -g generator-angular-fullstack"
#npm install -g generator-angular-fullstack # ==> error occur by spawn-sync 要調査

echo "chown -R vagrant:vagrant ${NVM_INSTALL_PATH}/.nvm"
chown -R vagrant:vagrant ${NVM_INSTALL_PATH}/.nvm
echo "chown -R vagrant:vagrant ${VAGRANT_HOME}/.nvm"
chown -R vagrant:vagrant ${VAGRANT_HOME}/.nvm


##### install mongodb ######
cat << _EOT_ > /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
_EOT_

echo "yum install -y mongodb-org"
yum install -y mongodb-org

本当は,これで準備を完結させたかったのですが、npmでうまく入らないパッケージ(Yeomanの構成要素の一つである、"yo"が”spawn-sync”に依存しているようで、自動で入れようとするとうまく入らない。。Yeomanが入らないので、generator-angular-fullstackも入らない。。。)
ので、とりあえず手動で入れる手順とします。(原因については調査中。。。https://github.com/ForbesLindesay/spawn-sync/issues/28 と似たような事象に見えるが。。。)

これらのファイルを配置して、
「vagrant up」を実行して、無事起動できたら。
「vagrant ssh」でログインし、
以下のコマンドを実施して、インストールできていないnodeのパッケージをインストールします。

npm install -g yo
npm install -g generator-angular-fullstack
npm update -g


mkdir mean_sample
cd mean_sample
yo angular-fullstack mean_sample
#とりあえず全部EnterでOK(と思ったけど、この手順ではgemが入っていないのでsassではなくてcssを選択しましょう)

# mongodb起動(passwordを聞かれたらvagrant)
sudo service mongod start

grunt serve --force # forceをつけるのは、ブラウザオープンしようとして、失敗して止まるため。

上記grunt serveまで完了したら、hostマシンの適当なブラウザを起動し、以下のURLにアクセスして画面が表示されたらとりあえずOKです。
http://192.168.55.10:9000

あとは、他のサイトを参考にしながら、適当にプログラムをいじって学習してみてください。ちなみに、/vagrantフォルダは、ホストマシンで共有になっていますので、mean_sampleフォルダを、そこに作ると、ホスト側でファイルの参照や編集が出来て便利です。

ではでは〜