webstromでMEAN.IOをデバッグ

MEAN.IOのルートでgultしてみると

デフォルトはdevelopになっていて、

[14:19:40] Starting 'development'...
[14:19:40] Finished 'development' after 10 μs
[14:19:44] [nodemon] 1.11.0
[14:19:44] [nodemon] to restart at any time, enter `rs`
[14:19:44] [nodemon] watching: *.*
[14:19:44] [nodemon] starting `node --debug server.js`
Debugger listening on port 5858

[14:19:40] Starting 'development'...

[14:19:40] Finished 'development' after 10 μs

[14:19:44] [nodemon] 1.11.0

[14:19:44] [nodemon] to restart at any time, enter `rs`

[14:19:44] [nodemon] watching: *.*

[14:19:44] [nodemon] starting `node --debug server.js`

Debugger listening on port 5858

勝手にDebuggerを立ち上げてくれる。

なので、WebstormでやるべきことはこのDebuggerを受け取ること。

なので、

Edit Configurations -> Add New Configuration -> Node.js Remote Debug

といった感じでせっていたら、Debuggerを拾ってくれるはず！

ッと思ったら。ブレイクポイントで止まってくれない。

どうやらNode Debuggerをnode –debug-brk ~~~ で立ち上げないとDebuggerを拾ってくれないみたいです。

ということで、修正。

修正すべきところは、

/gulp/development.js

です。

    nodeArgs: ['--debug'],
　　　　を↓のように修正
    nodeArgs: ['--debug-brk'],

nodeArgs: ['--debug'],

　　　　を↓のように修正

nodeArgs: ['--debug-brk'],

gulpを立ち上げ直す。

Good!

MEAN.IOのデフォルトで入ってるmeanio-usersを引っ張り出してカスタマイズ

MEAN.IO

/node_modules/meanio-users/*

にユーザ登録などを行うパッケージが入っている、

node_modules以下にあるものをカスタマイズするのは抵抗があるので、これを

/packages/custom/にusersというフォルダを作ってそこに移動する。

node_modules上からmeanio-usersは消す。

好き好きだが、一応

/packages/custom/…./packages.jsonからもdependenciesを削除する。

  "dependencies": {
    "meanio-system": "~0.1.4",
    "meanio-users": "~0.1.6", // 消す
    "meanio-circles": "~0.1.7",
    "meanio-admin": "~0.1.8"
  },

"dependencies": {

"meanio-system": "~0.1.4",

"meanio-users": "~0.1.6", // 消す

"meanio-circles": "~0.1.7",

"meanio-admin": "~0.1.8"

/packages/custom/…./server/views/includes/foot.html

でパッケージをインクルードしていく。

<script src="/users/controllers/meanUser.js"></script>
<script src="/users/routes/auth.js"></script>
<script src="/users/directives/meanUser.js"></script>
<script src="/users/services/meanUser.js"></script>

これでOK。

gulpでbowerのパッケージを自動挿入

gulp-injectを使う。

インストール(開発環境だけでいいので、–save-dev)

npm install --save-dev wiredep

1	npm install --save-dev wiredep

挿入されるhtmlを編集

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

パッケージの挿入先を指し示すためgulpfile.js編集

// bowerのスクリプトをHTMLに埋め込む
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;

  return gulp
    .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])
    .pipe(wiredep()) // wiredep bower dependencies
//    .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {
//      relative: true // no need for the './src/client' part
//    }))    
    .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html
})

// bowerのスクリプトをHTMLに埋め込む

gulp.task('wiredep', function() {

var wiredep = require('wiredep').stream;

return gulp

.src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])

.pipe(wiredep()) // wiredep bower dependencies

// .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {

// relative: true // no need for the './src/client' part

// }))

.pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html

})

取り敢えずテスト的にbower

$ bower init

1	$ bower init

リターン連続

$ bower install angular-translate --save

1	$ bower install angular-translate --save

でangular-translateをインストール

bower.jsonを確認

{
  "name": "mean",
  "description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.",
  "main": "",
  "authors": [
    "https://......."
  ],
  "license": "MIT",
  "homepage": "https://.......",
  "moduleType": [
    "node"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-translate": "^2.15.1"
  }
}

{

"name": "mean",

"description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.",

"main": "",

"authors": [

"https://......."

"license": "MIT",

"homepage": "https://.......",

"moduleType": [

"node"

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

"dependencies": {

"angular-translate": "^2.15.1"

}

dependenciesに挿入されて

bower_componentsフォルダにangular-translateがインストールされているのを確認。

では、gulp wiredepを実行。

gulp wiredep

1	gulp wiredep

↓はhead.html, foot.htmlに設置

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。

基本は相対パスで挿入されてしまう。

絶対パスがいいので↓のようにgulpfile.jsを変更

// bowerのスクリプトをHTMLに埋め込む
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;

  return gulp
    .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])
    .pipe(wiredep({
      ignorePath: '../../../../../../bower_components/',
      fileTypes: {
        html: {
          replace: {
            js: '<script src="/bower_components/{{filePath}}"></script>',
            css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />'
          }
        }
      }
    }))
// wiredep bower dependencies
//    .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {
//      relative: true // no need for the './src/client' part
//    }))    
    .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html
})

// bowerのスクリプトをHTMLに埋め込む

gulp.task('wiredep', function() {

var wiredep = require('wiredep').stream;

return gulp

.src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])

.pipe(wiredep({

ignorePath: '../../../../../../bower_components/',

fileTypes: {

html: {

replace: {

js: '<script src="/bower_components/{{filePath}}"></script>',

css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />'

}

}))

// wiredep bower dependencies

// .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {

// relative: true // no need for the './src/client' part

// }))

.pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html

})

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

結論から、

私の結論としてはnodemonを使うしかないかと。

ソース監視の方式に

nodemon

supervisor

node-dev

pm2

っといったアプリがありますが、すべてデフォルトではVagrantの共有フォルダに反応してくれません。

試行錯誤で結局全て試してしまったので、紹介する。

Nodemonをインストール

nodemonをインストール

npm install nodemon -g

1	npm install nodemon -g

後はnodeコマンドの代わりにnodemonを使うだけ

$ nodemon server.js

1	$ nodemon server.js

これがスタンダードなやり方。

VagrantのSynced folderを使っている場合には遅くするために”L”というオプションをつけて、

$ nodemon -L server.js

1	$ nodemon -L server.js

っとしなくてはいけないのですが、これが何故か上手くいかない。

何故かと言うと、↑のコマンドではファイルの更新を監視する対象(watch)

が「*.*」っとなっている、これでは同階層のファイルに対する変更しか監視しない。

監視したい対象は自分で指定する必要がある。

私の場合はこんな感じ。

nodemon -L server.js -watch packages/**/**/**/* packages/**/**/*

1	nodemon -L server.js -watch packages///*/ packages///*

これでOK。

Vagrantの共有フォルダで更新を監視したいだけなら、ココまでの部分でOK。

以降は蛇足。

Supervisorのインストール。

supervisorをインストールした。

$ npm install supervisor -g

1	$ npm install supervisor -g

無視するファイルとディレクトリの指定は -i

npmでインストールをかけたときに異常に再起動しないために

$ supervisor -i node_modules server.js

1	$ supervisor -i node_modules server.js

としてみたけど、結局VagrantのSynced Folderでは、これも結局使えない。

Node-devのインストール

$ npm install node-dev -g

1	$ npm install node-dev -g

PM2のインストール

$ npm install pm2 -g

こうです。

$ pm2 start server.js --watch

1	$ pm2 start server.js --watch

そうするとこう。

$ pm2 list
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────────┤
│ server   │ 0  │ fork │ 24446 │ online │ 1       │ 13s    │ 0%  │ 46.3 MB   │ enabled  │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────────┘

$ pm2 list

┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────────┐

│ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ watching │

├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────────┤

│ server │ 0 │ fork │ 24446 │ online │ 1 │ 13s │ 0% │ 46.3 MB │ enabled │

└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────────┘

ただひとつ残念なのが、今まで標準出力でリアルタイムに監視できてたログが見えなくなってしまうこと、標準出力がどこに言っているかというと

~/.pm2/logs/ ここ

ここに、

エラー：server-error-0.log

標準出力：server-out-0.log

っとわけて収納されている。

リアルタイム監視をしたいなら

$ tail -f ~/.pm2/logs/server-error-0.log

1	$ tail -f ~/.pm2/logs/server-error-0.log

っとすればリアルタイム監視ができます。

pm2での監視もういいよってなったらこう。

$ pm2 delete all

1	$ pm2 delete all

ただSynced Folderで使えない。

Node.jsでSSHからサーバを起動するけどBroken Pipeで止まっちゃう

件名の通り、

$ node server.js

1	$ node server.js

で起動したNode.jsのサーバがSSHでのログインが切れると止まってしまう。

正確な理由は、サーバのログ出力でエラーが発生したから。

Broken PipeするとSSHでのログインが切れる、ログインが切れると標準出力がなくなる、そうすると、、エラーが発生してサーバが落ちる。

っということ。

なのでログの吐き出し先を示してやる、かつバックグラウンドで走るように”＆”をつけてやる。

$ node server.js & > ~/log/porkyou_log.out

1	$ node server.js & > ~/log/porkyou_log.out

これで、ログオフしてもserverが走り続けてくれる。。

と思ったらダメでした。

npmで発行してるnodeでリリース用のアプリがありました。

npm install -g forever

1	npm install -g forever

をインストール。

forever start server.js

1	forever start server.js

これでOK。

意味はserver.jsをサービスとして実行したということ。

M	T	W	T	F	S	S
« Nov
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

HARD WORKER

カンボジア・プノンペンのフリーWEBプログラマー

Category: Node.js

webstromでMEAN.IOをデバッグ

MEAN.IOのデフォルトで入ってるmeanio-usersを引っ張り出してカスタマイズ

gulpでbowerのパッケージを自動挿入

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

Nodemonをインストール

Supervisorのインストール。

Node-devのインストール

PM2のインストール

Node.jsでSSHからサーバを起動するけどBroken Pipeで止まっちゃう