menスタック構築手順

mongo + express + nodejs + ejs　を構築したので備忘録として残したい。

• 一般的にはMEANスタックだが、Angularを除いて構築することにした。
• jadeではなくejsとした理由は、汎用的に使えるhtml*1 でモックをつくるため
• angularはあとで必用になったら考えることにした。

前提条件

1.nodejs インストール
2.express インストール
3.mongodb インストール

構築

1.モック作成

画面イメージhtml*1 を作成する。

2.フォルダ作成

2-1.ディレクトリ移動
2-2.フォルダ作成

3.プロジェクト作成

3-1.npm install
3-2.ディレクトリ構成確認
root/
　├ bin/
　│　└ www
　├ node_modules/
　├ public/
　│　└ images/
　│　└ javascripts/
　│　└ stylesheets/
　├ routes/
　│　└ index.js/
　│　└ users.js/
　├ views/
　│　└ index.jade/
　├ app.js/
　├ package-lock.json/
　└ package.json/

4.アプリ起動

4-1.npm start
4-2.http://localhost:3000/にアクセスし、デフォルト表示の確認
4-3.ctrl + c でアプリ終了

5.ejs インストール

npminstallejs

6.モック追加

6-1.viewsフォルダ内に index.ejsとして追加
6-2.public/stylesheets内にcssファイル追加
6-3.public/javascripts内にjsファイル追加
6-4.public/images内に画像ファイル追加

7.ejsロジック追加

7-1.index.js修正

router.get('/',function(req,res,next){res.render("./index.ejs",{hoge:"hoge"});});

7-2.app.js修正

app.set("view engine","ejs");

8.ejsファイルにデータを渡す設定をする

8-1.バインドしたい場所に<%= hoge %>を記述
8-2.index.jsのrouter.getのres.renderの第二引数にobject型で設定する
　{hoge:"hoge"}

9.サーバー再起動ロジックの設定

• ソースを修正するたびに再起動は手間なので、自動化する。

npminstall-gnode-dev

• 再起動ロジックは、開発版でしか使わないので、グローバルにしておき、package.jsonには記述しない

10.アプリ起動

10-1.

node-dev./bin/www

10-2.http://localhost:3000/にアクセスすると、index.ejsに値がバインドされて、styleやjsや画像が読み込まれたものが表示される。
　

番外.コマンドプロンプトでmongodb crud操作

mongoshowdbsuse"dbName"showcollectionsdb."collectionName".find()