21

2月 19

 

Browser-syncとExpressが同時に動かない問題はファイヤーウォールが原因だった

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番ポートだということが判明。

Browsersync options

3001番ポートを改めて開放してやると、expressとcbsが同時に動き始めた。

localhost:3000に接続してviews/*を編集するとちゃんとブラウザがリロードしてくれた。

おそらく、cbsはこんな構造をしているんだろうなと。

Browser syncの仕組み予想

ということで、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の環境が立ち上がりました。




No comments yet, be the first.

コメントを残す