Hatena::ブログ(Diary)

Kazzzの日記 このページをアンテナに追加 RSSフィード

2013-05-12

[][][]nodeサーバディレクトリの指定に注意

次の仕事ではangularJSを使うつもりで勉強を始めた。
今更angularJSについては説明しないが、JavascriptのMVC実装ということではGoogleが開発に関わっており現時点では最も情報が多く期待ができるものである。 (Good bye JSP!)

angularJSを覚えたいのであればまずは評判の高いチュートリアルだろう、ということで本家のチュートリアル用のリポジトリクローンして、始めたわけだが、
AngularJS: Tutorial
angular/angular-phonecat · GitHub

プロジェクト、動作確認には先だってエントリで紹介したようにWebブラウザで動かす方法他に、Testacular(Karma)を使ってテストする方法(これはまた別途時間をとって学習する)、node.jsでhttpdを構成したテスト用Webサーバで動作確認する方法があるのだが、このWebサーバとして動かすweb-server.jsが動かない。相対パスで取れるはずの/app/index.html等のリソースがすべて404になるのである。
f:id:Kazzz:20130511221627p:image

Macで同じ事を行ったところ問題なく動作するので、またWindowsはぶられてるのかな※とも思ったのだが、よく調べ見ると、起動設定に問題があった。

WebStormではnode.jsの起動設定があるのだが、それに誤りがあった。

相対パスが見つからない設定 (web-server.js)

f:id:Kazzz:20130511222538p:image

正しい設定 (web-server.js)

f:id:Kazzz:20130511222539p:image

注意するのは「Working Directory:」の設定。
文字通り作業ディレクトリを指定するのだが、node.jsのスクリプトから見たリソースルート(コンテキストルート)もこのディレクトリになるので、Macでは何もせずとも正しい設定になったのだが、Windowsの場合、正しく設定したつもりでも次の項目である「Path to Node App JS File:」のパスによってはWebStormに勝手に変更されてしまうようなのである。

正しくは後者のようにWorking Directoryはリソースルートに、web-setver.jsはそこからの相対パスで指定する必要がある。
実際のチュートリアルでは./scripts/web-server.jsを起動すると説明されており、このことは暗黙になっているので、私のようにてきなりWebStormで動かそうとする場合は注意が必要ということだ。

※node.jsの開発はMicrosoftも支援しており、はぶられている訳はないのである。