Yeomanを使ってローカルにMEAN環境をつくる

Yeomanでgenerator-angular-fullstack使ってMEAN環境作成するマニュアルのようなものを社内共有用に作ったけれども別に社内だけにとどめておく必要がないことに気付いたので公開。

正直申し訳ないことにWindowsユーザ向けにはもしかしたらダメな部分多々あると思われる。ごめん。

以下、今回インストールするもの一覧

• Node.js
• Yeoman (yo,bower,grunt-cli)
• generator-angular-fullstack(Yeomanのgenerator)
• Homebrew
• MongoDB
• CoffeeScript (任意)
• Sass(&Compass),LESS,Stylus(任意)
• node-inspector(任意)

Windowsの人はGit Bash使いたいのでGit for Windowsを入れておく。

下準備

ディレクトリ作って移動しておく

mkdir yeoman_test && cd yeoman_test

Node.jsのインストール

まずはNode.jsがインストールされているか確認しましょう。

node -v
which node

これでバージョン情報出たらインストールされてます。
-bash: node: command not found
とか出たらインストールされてないのでインストールしましょう。

Macでのインストール手順(インストール済の人は飛ばしてよし)

Nodeのインストールにはバージョン管理ツール使いたい。管理がラクだし、io.jsにも対応しているので。
バージョン管理ツールには、Nodebrew,nvm,naveなどあるが、個人的にはNodebrewがオススメということで以下Nodebrewを使ったインストール手順です。
ステップ的には

• Homebrewのインストール
• Nodebrewのインストール
• Node.jsのインストール

となります。

Homebrewのインストール

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

これをターミナルに叩けばおｋです。

インストール後に以下のことをしておきましょう。

brew doctor
brew -v
brew update

公式サイト - Homebrew

Nodebrewのインストール

brew install nodebrew

パスを通します。

vim ~/.bash_profile

次の一行を加えて保存(:wq) export PATH=$HOME/.nodebrew/current/bin:$PATH
再読み込み

source .bashrc

人によってbashかzshかとか違うと思うんですけど適宜対応してください。
bashの場合は ~/.bash_profile
zshの場合は ~/.zshrc

Node.jsのインストール

nodebrew ls-all
nodebrew install stable
nodebrew use v0.xx.xx(インストールしたバージョンの数字入れてください)
node -v

【参考】
【node.js】nodebrewでnode.jsのインストールめも
バージョン管理ツール入れたくない人は公式サイトでも見てやってくれ(雑)

Windowsでのインストール手順

WindowsでNodeのバージョン管理するのはnodistっていうのがいいらしい。
あとで詳しく書く。

Yeomanのインストール

sudo npm install -g yo grunt-cli bower

Nodeを使ってyoとgrunt-cliとbowerをインストールしているだけ。かんたんでしょ？sudoいらないかも？
インストールされたか確認しましょう。

yo --version
grunt --version
bower -v

バージョン表示されたら問題ないですが、doctorコマンド推進派なのでこれもやってほしい。

yo doctor

Everything looks all right!って出たらよし！

参考にしなくてもいい駄文
Yeomanを使うならまずはじめに覚えておきたいコマンド1選

generatorのインストール

いろいろあるのでぐぐってくさい。
今回インストールしてみるのは、angular-fullstackというMEANスタックのやつ。

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

ここも困る要素はないのではないだろうか。

MongoDBのインストール

インストール時には任意で --with-openssl か --devel を選択可能

brew update
brew install mongodb
brew upgrade mongodb
mongod

mongodb起動の手順

sudo mkdir /var/db/mongo
sudo chmod a+rwx /var/db/mongo
mongod --dbpath /var/db/mongo &

CoffeeScriptのインストール

npm install -g coffee-script

Sass(Compass),LESS,Stylusのインストール

ここらへんはプロジェクトによるので、そのプロジェクトに合わせてください。

SassとCompassを使う場合

gem install sass

これでSassインストール完了
次はCompass

gem install compass

LESSを使う場合

npm install less -g

Stylusを使う場合

npm install stylus -g

仮想環境の実行＆終了

実行 grunt serve
終了 ctrl + c

generator-angular-fullstackはHerokuへのデプロイもサポートしてるらしいよ！！

参考リンク集

node.jsを複数バージョン切り替えられるようにインストール（Mac:nodebrew Windows:nodist）
そのうちちゃんと載せる
MongoDB MANUAL / Installing
新しい Yeoman と、ついでに MEAN を試してみる
【Mac】nodebrewのインストールとコマンドなど使い方まとめ