環境 : Visual Studio 2013 Update 2, Node.js Tools for Visual Studio 1.0 Beta 2

こんにちは。

前回 は、node-inspector を使った Node.js の Remote Debug について紹介しました。
そこで今回は、Remote Debug をおこなうその他の手法として、現在 Beta がリリースされている Node.js Tools for Visual Studio を使用した Remote Debugging について紹介します。(なので、前回の投稿を、勝手に「node-inspector 編」と変更させていただきました。)

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

Node.js Tools for Visual Studio を使用すると、このツールが使用する NodeJS 用の Debug proxy (後述) を使って、NodeJS の Remote Debugging が簡単に実現できます。

Node プロジェクトの作成

まず、Visual Studio 2012、または Visual Studio 2013 の環境に、Node.js Tools for Visual Studio をダウンロードしてインストールしてください。今回は、Visual Studio 2013 Update 2 と Node.js Tools for Visual Studio 1.0 Beta 2 を使用します。

この拡張機能 (Node.js Tools for Visual Studio) をインストールすると、Visual Stuio を起動してプロジェクトの新規作成をおこなう際、下図の通り Node.js のさまざまなプロジェクト テンプレートが選択できます。

上図の通り、プロジェクト テンプレートの中に Express のプロジェクトがありますが、今回は、使い方の流れがわかるよう、あえて、この中から [Blank Microsoft Azure Node.js Web Application] を選択し、「Azure による Node.js の Remote Debug (node-inspector 編)」と同様の手順で Express をインストールします。
なお、以降で理由を説明しますが、Remote Debug をおこなう際は、できるだけ、上記のプロジェクト テンプレートの中から「Microsoft Azure」と書かれたもの (下の 3 つのどれか) を選択してください。

まず、今回は Express を使用するので、作成されたプロジェクトの中の server.js は削除しておきましょう。

つぎに、npm を使って express-generator をインストールします。
プロジェクトの npm フォルダーを右クリックして [Install New npm Packages] を選択します。なお、初回は Package list を取得するので、大変遅いです。

表示されるダイアログで、下図の通り express-generator を選択して [Install Package] ボタン押します。この際、[Deployment type] として、下図の通り [Global] を選択してください。

補足 : Node.js の開発者の方には説明不要と思いますが、Global にインストールすると、他のプロジェクトを作成した際も Global の Package として見えてしまいます。(Azure の App Service Editor の場合には、Azure Web App ごとに別の環境ですので、その Azure Web App の範囲内でしか見えませんでした。)

なお、Package を unistall する場合は、インストールされた package フォルダーを右クリックして [uninstall package] を選択すれば OK です。

つぎに、express アプリケーションのファイルを作成します。
プロジェクトを右クリックして表示される [Open Command Prompt Here] (下図) を選択すると Console が表示されます。

この Console で、以下のコマンドを実行します。(やはり、Node.js 開発者の方にとっては、Console のほうが安心ですね。。。)
このコマンドにより、express アプリケーションのファイルが作成されます。

express -f

続いて、作成された Package.json を元に関連パッケージのインストール (ビルド) をおこないます。
Console 上で、下記の通り入力します。

npm install

なお、上記のコマンドで作成された一連のファイルは、既定ではプロジェクトのファイルとして設定されないようなので、以下のファイルを右クリックして [プロジェクトに含める] を選択し、プロジェクトのファイルとして取り込みます。

bin/www
app.js
public フォルダ
routes フォルダ
views フォルダ

また、bin/www にある下記の debug 出力が、後述する Remote Debug の Debug proxy と Conflict してしまうようなので、bin/www を下記太字の通り書き直しておきましょう。

#!/usr/bin/env nodevar debug = require('debug')('NodejsWebApp1');var app = require('../app');var http = require('http');app.set('port', process.env.PORT || 3000);var server = app.listen(app.get('port'), function() {  // This conflicts with Remote Debug ...  // debug('Express server listening on port ' + app.get('port'));  console.log('Express server listening on port ' + app.get('port'));});http.createServer(app).listen(app.get('port'), function(){});

また、今回は express 4 のアプリケーションですので、プロジェクトのプロパティの [Startup file] を、下図の通り <project folder>binwww に変更しておきましょう。

さいごに、Web.config を開いて、下記太字の通り、追加 / 変更をおこないます。今回は、server.js を bin/www に変更し、express 用に rewrite rule などを追加しています。

<?xml version="1.0" encoding="utf-8"?><configuration>  <appSettings>  </appSettings>  <system.webServer>    <modules runAllManagedModulesForAllRequests="false" />    <iisnode watchedFiles="web.config;*.js"/>    <handlers>      <add name="iisnode" path="bin/www" verb="*" modules="iisnode"/>    </handlers>    <rewrite>      <rules>        <clear />        <rule name="app" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">          <match url="iisnode.+" negate="true" />          <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />          <action type="Rewrite" url="bin/www" />        </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>  </system.webServer></configuration>

動作確認

Visual Studio の開発経験がある方なら説明不要ですが、Visual Studio では F5 ボタンを押すと Debug 実行がスタートします。(今回は Node.js 開発者の方のために、あえて当たり前のことも記載しておきます。)
F5 を押すと、localhost:<port> にこの express アプリケーションがホストされて、ブラウザーが起動します。(内部では、IIS Express と呼ばれる開発目的の簡易 Web サーバーが使用されています。)

補足 : Debug 時の起動ブラウザーを Chrome など他のブラウザーに変えることもできます。

コードの止めたい場所に F9 キーで Breakpoint を置いて実行すると、その箇所でコードは止まり、内部で使用している変数の Watch や、Step 実行 (F10 を押します) などが可能です。

まあ、localhost で動いていますから、Debug ができて当たり前ですね。

そして、Azure 展開と Remote Debug

さて、今日のテーマである Remote Debug について記載します。

まず、作成した上記のアプリケーションを Azure Web App (旧 Azure WebSite) に配置 (発行) しましょう。
ここも、Visual Studio に慣れた方なら説明不要と思いますが、プロジェクトを右クリックして表示される [発行] メニューを選択します。すると、下図のような画面が表示されるので、[Windows Azure Webサイト] (Azure Web App) を選択します。

なお、この方法では Web Deploy という方法が使用されますが、git で deploy することもできます。手順は省略しますが、Visual Studio は、git ともシームレスに統合されています。

以降、画面は省略しますが、Azure へのログインと、配置先である Azure Web App の領域の作成をおこなって先に進みます。
Azure Web App の作成と、上記の express アプリケーションの配置が完了し、さいごに 動作確認用にブラウザーが起動します。(設定した名前に応じて ***.azurewebsites.net という独自の domain が作成されます。)

なお、この際、1 つだけ注意すべき設定があります !
発行の際に、下記のような構成 (Configuration) を選択する画面が表示されますが、このあとの Remote Debug のために、ここでは必ず、[Debug] を選択してください。

以降、Remote Debug 用の設定をおこないます。
Node.js for Visual Studio の Remote Debug では、専用の Debug proxy と呼ばれる Node.js のコードが実行され、この proxy を通して Visual Studio の Debugger が Attach します。

まず、Azure Portal を使って、作成された Azure Web App の [構成] (Configuration) ページを表示します。この中に WebSocket の設定があると思いますので、これをオン (On) に設定します。

補足 : このように、Debug では WebSocket を使用しますので、例えば、皆さんの会社の Proxy 設定などの問題で WebSocket が使用できない場合は、Remote Debug はおこなえません。

つぎに、Debug Proxy 用に Web.config の設定を書き換えますが、上記の Microsoft Azure 用のプロジェクトを選択した場合は、実は、あらかじめ、Remote Debug の設定が Web.Debug.config に記述されていますので (下記)、何もおこなう必要はありません。
もし、上記以外のプロジェクト (「Microsoft Azure」と書かれていないプロジェクト テンプレート) を選択した場合には、こうした面倒な構成設定 (下記) が必要ですので注意してください。

<?xml version="1.0" encoding="utf-8"?><configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">  <system.web xdt:Transform="Insert">    <httpRuntime targetFramework="4.5" />    <customErrors mode="Off"/>  </system.web>  <system.webServer>    <iisnode loggingEnabled="true"             devErrorsEnabled="true"             interceptor="--debug"             xdt:Transform="SetAttributes" />    <handlers>      <add name="NtvsDebugProxy" path="ntvs-debug-proxy/99f4df0a-f6ff-460c-9fba-85a1c604d130" verb="*" resourceType="Unspecified"           type="Microsoft.NodejsTools.Debugger.WebSocketProxy, Microsoft.NodejsTools.WebRole"           xdt:Transform="Insert" />    </handlers>    <rewrite>      <rules>        <rule name="NtvsDebugProxy" enabled="true" stopProcessing="true" xdt:Transform="InsertAfter(/configuration/system.webServer/rewrite/rules/clear)">          <match url="^ntvs-debug-proxy/.*"/>        </rule>      </rules>    </rewrite>  </system.webServer></configuration>

以上ですべての準備は完了しました。Remote Debug を試してみましょう !

Visual Studio のソースコード エディター上で F9 を押して、Breakpoint を置きます。今回は、routes/index.js の適当な箇所に設定してみてください。(下図参照)

そして、Visual Studio の Server Explorer を使って、[Windows Azure] ノードから配置先の Azure Web App を右クリックして、[Attach Debugger (node.js)] を選択します。

上記で Debug 実行が開始されます。
あとは、ブラウザーを使って、この Azure Web App のサイトにアクセスすると、下図のように、設定した Breakpoint で停止し、F10 による Step 実行や、変数の Watch などがおこなえます。

今回は Azure Web App を使用しましたが、上述の通り、Debug proxy が動いていれば大丈夫ですので、Azure の Linux VM を使った Remote Debug なども可能です。(「Node.js Tools for Visual Studio – Debugging Node.js running on Linux」を参照。)
また、Visual Studio 2012 など他の環境の場合には Remote Debug の方法が異なるので注意してください。詳細は「Node.js Tools for Visual Studio – Advanced Debugging」を参照してください。

上記では express を使ったアプリケーションを新規に作成しましたが、git などで既存のコード一式を取得して、これをプロジェクトとして開くこともできます。例えば、Azure Web App 上の App Service Editor などで構築したコードをプロジェクトとして取り込むこともできますね。

※ 変更履歴

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

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