こんにちは。

今回は、Node.js の Remote Debug について紹介します。

現実の開発では、実際にクラウド上にアプリを配置をしないと Debug できないことはよくあります。例えば、Facebook, Google, Live Services (OneDrive, Outlook.com) 等の Authentication を埋め込んだコード (許可された URI でしか動作しない場合) や、Twilio API を使用したコード (クラウド上の Server から Callback される場合) などです。

開発プラットフォームでもある Microsoft Azure を使うと、こうした Debug が非常に容易におこなえます。
.NET (C#, VB) の Remote Debug については、以前、「Visual Studio で Azure のプロジェクトを Remote Debug する」で紹介しましたが、今回はその Node.js 版を紹介します。ただし、以降を見ていただくとわかりますが、実は、Local の開発環境から Remote の Debugger に Attach する「Remote Debug」ではなく、Azure Web App (旧 Azure WebSite) の App Service Editor を使い、Remote に Deploy されたコードをそのまま Debug するというものです。

最近の更新 (July Update) でさらに容易になっていますので、以下は、その辺りの最新情報も含めて紹介します。

アプリケーションの作成

では、Debug するサンプル アプリケーションを構築します。
もちろん、Local でアプリケーションを作成して git で Azure Web App に発行すれば OK ですが、今回は、Azure の App Service Editor を使用して express (Node.js でよく使用されるアプリケーション フレームワークです) のサンプル アプリケーションを作成し、これを Debug してみましょう。
まずは、express を使ってサンプル アプリケーションを作成します。(といっても、コマンド 3 つで終了です。)

App Service Editor を表示し、[Open Console] (Ctrl-Shift-c) で Console を表示して、以下のコマンドを実行します。(App Service Editor の使用方法については、「App Service Editor で Node.js アプリ開発」を参照してください。)

// install express generatornpm install express-generator -g// create express filesexpress -f// build using package.jsonnpm install

[Run] (Ctrl-F5) で実行するとブラウザーが起動し、下図の通り express のアプリケーションが動いていることが確認できます。

なお、上記の [Run] と共に、内部で Web.config が自動生成されます。
このあと、この Web.config を編集しますので、実は大変重要なプロセスです。

Debug 実行

では、Debug 実行をおこなってみましょう。

App Service Editor (というか、Azure Web App) では、node-inspector が既に built-in されています。
また、上記で自動作成された Web.config を開いていただくとわかりますが、自動作成された Web.config では 既に Node Inspector 用のいくつかの設定がおこなわれています。例えば、express を使用した場合は、
/bin/www がエントリ URI なので、下記の通り /bin/www/debug/ で Node Inspector を表示するように構成されます。

このように、ほどんどの設定は自動でおこなってくれます。
Debug をおこなうには、Web.config の中の下記太字のみを追記 (変更) すれば充分です。

<?xml version="1.0" encoding="utf-8"?><configuration>   <system.webServer>      <webSocket enabled="false" />      <handlers>         <add name="iisnode" path="bin/www" verb="*" modules="iisnode"/>      </handlers>      <rewrite>         <rules>          <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">                      <match url="^bin/www/debug[/]?" />          </rule>          <rule name="StaticContent">             <action type="Rewrite" url="public{REQUEST_URI}"/>          </rule>          <rule name="DynamicContent">             <conditions>                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>             </conditions>             <action type="Rewrite" url="bin/www"/>          </rule>         </rules>      </rewrite>      <security>         <requestFiltering>          <hiddenSegments>             <remove segment="bin"/>          </hiddenSegments>         </requestFiltering>      </security>      <iisnode watchedFiles="web.config;*.js" debuggingEnabled="true" />   </system.webServer></configuration>

補足 : 上述の通り node-inspector は WebSocket を使用しますが、上記の Web.config の中の <webSocket enabled=”false” /> は false のままにしておいてください。(ここを true に変更すると、かえって動きません !)

[Run] (Ctrl-F5) で実行し、Chrome を使って、http://<your app>.azurewebsites.net/bin/www/debug/ にアクセスしてください。
下図のような Node Inspector の画面が表示され、ここで Breakpoint の設定や Debug 実行がおこなえます。

補足 : 例えば、皆さんの会社の Proxy 設定などの問題で WebSocket が使用できない場合、この画面は表示されないので注意してください。(画面の表示と同時に WebSocket の Listen をおこないます。)

左上のアイコンをクリックするとサーバー側のディレクトリ一覧が表示されるので、ここで Debug したいファイルを選択して開き、下図の通り番号をクリックすると Breakpoint が設定できます。
今回は、home/site/wwwroot/routes/index.js を Debug してみましょう。

別のブラウザー (Internet Explorer など何でも構いません) を起動して、express のアプリケーションにアクセスしてみてください。
下図の通り、設定した Breakpoint で停止しますので、変数の中の Watch や、[F10] の step 実行、[F8] による Continue (継続実行) などが可能です。

終了したら、http://<your app>.azurewebsites.net/bin/www/debug/?kill にアクセスして、Debugger プロセスを終了してください。

一見 Chrome に依存しているように見えますが、node-inspector のプロセスがコードの実行を Inspect して、Breakpoint に来た際、WebSocket を使って Debug ウィンドウに通知しています。つまり、Twilio Server からの Callback など、さまざまな要求を Track して Debug することが可能です。(Chrome が必要なのは、Debug ウィンドウのみです。)

[参考情報] Visual Studio Online Monaco team blog : Debug your node.js application
http://blogs.msdn.com/b/monaco/archive/2014/04/24/stand-up-part-4-debug-your-node-js-application.aspx

※ 変更履歴

2015/03/26  Azure WebSite から Azure Web App に名称変更

2016/07/19  Visual Studio Online (Monaco) から App Service Editor に名称変更