Dance with Tech

プログラミングとか学んだことの備忘録ブログです。

MEAN(MongoDB,Express,Angular.js,Node.js)環境を構築して簡単なアプリを作るまで

ちょっと面白そうだったので、勉強も兼ねてごにょごにょやってみました。

#参考サイト

[mean.io] Mac OSX Yosemite に mean.io 環境を構築 - Qiita

その中でハマったというか、躓いた部分を書き出していきます。

エラーのキャプチャとか取るの忘れていたので、覚えてる部分だけ。。

※ちなみに環境はMac OS X

MEANとは?

MEANスタックとか言ったりしますが、

  1. M→MongoDB(NoSQLの1種)
  2. E→Express(Node.jsのフレームワーク
  3. A→Angular.js(JavaScriptフレームワーク
  4. N→Node.js(サーバーサイドで動くJavaScript

の頭文字を取ってMEANと呼びます。

LAMPとかXAMPPとかと同じような感じです。

 

NoSQLとは?

  • リレーショナル・データベースと違って、問い合わせ言語のSQLが使えないデータベースシステム
  • ビッグデータと相性が良い
  • KVS(キーバリューストア)とドキュメント指向データベース(MondoDBはこっち)が有名 

 

実際に環境を構築する

ここからはターミナルを開いて、実際に環境を作っていきます。

あんまり良くないかもですが、sudoコマンド使いまくっています。。

※参照していたリンク先のキータのコマンドでは上手くいかなかったのですが、

下記のコマンドでは上手くいきました。

 

ちなみにnpmというのは、Node Package Managerの略です。

成功すれば以下のように表示されます。

f:id:kmatz90:20141021131048j:image

次は以下のコマンド↓

 

上手くいっていれば、ブラウザで「localhost:3000」にアクセスすると、

以下のように「This is the home view」と表示されます。

ログイン機能がデフォで付いています(右上)。

f:id:kmatz90:20141021134026p:plain

サインアップすると掲示板ぽく投稿出来ます。

f:id:kmatz90:20141021155756p:plain

そしてこんな感じに反映されます。

f:id:kmatz90:20141021162407p:plain

上手く動作しない場合 

上記の画面が表示されなかった場合、以下のケースが考えられます。 

 

MongoDBがインストールされていない

#MongoDBのインストール方法に関してはこちらを参照しました。

MongoDBのインストール - Qiita

 

gruntがインストールされていない

#gruntについては以下の記事が分かりやすかったです。

Gruntで始めるWeb開発爆速自動化入門(1):ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) - @IT

 

不要なプロセスが残っている

あんまり無いかもですが、Node.jsで不必要なプロセスが残っているとエラーがになる場合があります。

 

Bowerがインストールされていない

僕の場合、gruntを実行したら、タイトルしか表示されず、ビューが真っ白で表示されてしまいました。

どうやらbootstrapが読み込めていないようです。

ただ今回は、bower_componentsの中のbootstrapが無いぜ!ってエラーだったので、Bowerをインストールしなければいけないようでした。

※myAPPの中にbower.jsonがあるはず

Bowerとは、CSSとかJavaScriptのパッケージ管理ツールで、bootstrapと同じくツイッターの人が作っています。

bower.jsonがプロジェクトの設定ファイルです。

#参考サイト

パッケージマネージャー「Bower」が大変便利で捗りそうです – Mach3.laBlog

 

覚えているのはこれくらい。

同じような状況の方に少しでも参考になればと。。