expressを使ってウェブアプリを開発中、views/以下のファイルを変更したときに、自動でブラウザをリロードしたいと考えた。
同じnode.js製のbrowser-sync(bs)ならできるだろうと考えて調べると、gulpを使う方法と、connect-browser-sync(cbs)というライブラリを使う方法の2つを見つけた。
それでgulpは必要ないということで、cbsを採用。
browser-syncでブラウザ自動更新 - ushumpei’s blog
このサイトを参考にして実装を始める。
簡単そうだと思いきや、めちゃくちゃハマった。3時間くらいハマった。
どうしてもbsが動いてくれない。
この方法じゃだめなのかとgulpを使って実装してみるもだめ。
どうすりゃええんじゃーということで調べてみると、stackoverflow兄貴の記事を発見
node.js - Express and BrowserSync without gulp? - Stack Overflow
とりあえず最小構成でbsとexpressを同時に動かすサンプルがあったので動かしてみると、やっぱり動かない。
GitHub - damienromito/express-sync: How to use an express server with browser-sync (without gulp)
ソースを見てみるとlistenポートを9000に変更してあったので、ufwをつかってサーバーの9000をallowにしてみる。
すると、localhost:3000 でbsのディレクトリ管理画面が開いた。
ここで、ファイヤーウォールに問題があることが発覚。
このときexpressは9000番で動作しており、bsは3000番ポートで起動していたということだろう。
その上でbsのコアサーバーのポートは何番なんだろうと調べてみると、デフォルトで3001番ポートだということが判明。
3001番ポートを改めて開放してやると、expressとcbsが同時に動き始めた。
localhost:3000に接続してviews/*を編集するとちゃんとブラウザがリロードしてくれた。
おそらく、cbsはこんな構造をしているんだろうなと。
ということで、cbsやbsが動かないとお困りの方はファイヤウォールの設定を見直しになられることをおすすめします。
nodemonと一緒に動かす場合
最後に、nodemonも一緒に動かしてあげると全部自動で更新してくれるので便利です。
まずはnodemonをインストール
npm install nodemon --save-dev
package.jsonのstartのスクリプトを下記のように書き換えます。
//package.json
start: "./node_modules/.bin/nodemon ./bin/www"
これで
npm start
をかけると、nodemon + express + browser-syncの環境が立ち上がりました。
