Cloud9にMEAN Stackを導入する方法

MEAN Stackとは

　フルスタックjavascriptでの開発環境として、MEAN stackと呼ばれるソフトウェアスタックがあります。

　これは、MongoDB開発者のValeri Karpovにより提唱された言葉で、以下の4つを組み合わせて利用するアーキテクチャを指します。

　かの有名なLAMP環境のjavascript版と考えて差支えありません。

　クラウド上で開発を行えるIDEで、いちいちローカルに開発環境を構築しなくてもよいという大きなメリットがあります。プライベートプロジェクトも作成でき、どこからでも同じ環境が利用できることから、小規模開発や実験に最適です。

　2016/8/24現在、ubuntu14.04が導入されており、aptコマンドやsudoなど、あらゆるコマンドが利用可能です。そのため、任意のアーキテクチャを自由に組むことができ、ローカル環境に比べても遜色ない環境で開発を進めることができます。

　今回は、MEAN.IOをCloud9に導入します。

　※Cloud9の登録方法等についてはスコープから外れるため、割愛します。

　暫くすると、IDEが立ち上がります。

　新しくワークスペースを作成すると、すぐに開発開始できるようにテンプレートが用意されています。しかし、今回はmean-cliにより開発を行うため、これらは一切必要ありませんので、全て削除してしまいます。

$ rm -rf *

　MEAN stackでは、データベースにMongoDBを利用します。これは、後述するmean-cliではインストールできないため、aptで個別にインストールを行う必要があります。

$ sudo apt update
$ sudo apt install mongodb -y

　さらに、データベース用のディレクトリを作成します。

$ mkdir data

　次に、mongodb起動用スクリプトを作成します。

$ echo mongod --bind_ip=$IP --dbpath=data --nojournal --rest "$@" > mongod
$ chmod +x mongod

　mongodbを起動します。

$ ./mongod

　ここまでで、コンソールがmongodbで専有されていますので、作業を継続するため、Window -> New Terminal（もしくは、alt+t）で新しいウィンドウを開きます。

　まず、gulpとbowerを導入します。npmも最新版にしておきましょう。

$ npm install -g npm
$ npm install -g gulp
$ npm install -g bower

　次に、mean-cliを導入します。

$ npm install -g mean-cli

　これでmean-cliの導入は完了です。非常に簡単ですね。

　mean-cliを利用して、アプリケーションを作成します。

$ mean init myapp

　”myapp”の部分は任意の名前に読み替えてください。いくつか対話式での設定箇所があります。そのままenterを押すとデフォルト設定が適用されますが、デフォルト設定で問題ありません。

? What would you name your mean app? (そのままenter)
Do you want to set up an admin user? (そのままenter)

　依存モジュールをインストールします。

$ cd myapp
$ npm install
$ bower install

　npm installには非常に時間が掛かります。もし、メモリ使用率超過などの理由で中断されてしまった場合、再度インストールコマンドを実行しても、正常にインストールできないかもしれません。その場合は、myappディレクトリ内のnode_modulesを削除してから、再度実行します。

$ rm -rf node_modules
$ npm install
$ bower install

　すべて完了したら、アプリケーションを起動します。

$ gulp

　もし、この段階でエラーが発生する場合は、npm installをやり直してみてください。

　ページを開くには、ツールバー上のPreview -> Preview Running Applicationを選択します。MEANのページが表示されれば、導入は成功です。

　プレビューで表示されている画面は、

myapp/packages/custom/app/public/views/system/index.html

です。ためしに、2行目に以下を追加してみましょう。

<h1>hello world!!</h1>

　ctrl+sで保存すると、自動的にサーバーがオートリロードされます。プレビュー画面を更新すると、ページ冒頭に「HELLO WORLD!!」と表示されることが確認できたかと思います。

　MEAN stackは、難解ながら、node.jsで開発を行う上では、比較的ポピュラーな選択肢のひとつです。気軽、かつ高速に開発を行えるので、小規模なプロジェクトに非常にマッチします。

　Node.jsは癖が強く、学習するのに苦労する部分があるかもしれませんが、これを機にフルスタックjavascriptの世界へと足を踏み入れてみるのはいかがでしょうか。