Cloud9にMEAN Stackを導入する方法

MEAN Stackとは

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

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

  • Mongo DB
  • Express
  • AngularJS
  • Node.js

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

Cloud9とは

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

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

Cloud9にMEAN Stackを導入する

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

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

ワークスペースを作成する

  1. Cloud9にログインし、Workspacesの「Create a new workspace」をクリックします。
  2. Workspace Nameに任意の名前を入力し、Choose a template項目で「Node.js」を選択します。
  3. 「Create Workspace」をクリックします。

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

準備

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

$ rm -rf *

Cloud9にMongoDBを導入する

 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

Cloud9にmean-cliを導入する

 ここまでで、コンソールが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のページが表示されれば、導入は成功です。

hello world!!

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

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の世界へと足を踏み入れてみるのはいかがでしょうか。