Visual Studio で Node.js + Express4 を Azure Webサイトに Deploy

#準備
あらかじめNode.js Tools for Visual Studioをインストールしておきます。

2014/11/25追記
この投稿をあげたのが昨日の11/24のことだったのですが、その数時間後にNode.js Tools for Viausl StudioのRC1がリリースされました。これにより、Express4のテンプレートが提供されるようになったようです。稼働確認はとっていませんが。

#プロジェクト作成
Blank Azure Node.js Web Applicationを選びます。
（ここでは TypeScriptのカテゴリから選んでいますが、JavaScriptのカテゴリから選んでも構いません。）

#express4アプリケーション生成

1. server.js(TypeScriptの場合はserver.ts)を削除します。

2. ソリューションエクスプローラー内のnpmを右クリック→Instal New npm Packagesをクリックします。
   

3. express-generatorをインストールします。Dependency type をGlobalにします。
   

4. プロジェクトの場所をコマンドプロンプトを開きます。開き、> express -e -fと入力します。 (-e はviewをejsにするオプション、-f は上書き強制のオプションです）

5. 続けて依存解決します。> npm installと入力します。（expressが依存している他のパッケージをインストールします）

ここまででexpress4の生成は終了です。
#Visual Studio用に設定修正

1. bin\WWW ファイルをプロジェクトに含めます。（WWWファイルが表示されていない場合は、ソリューションエクスプローラーの「すべてのファイルを表示」アイコンをクリック）
   

2. 同様に、public, routes, viewsフォルダとapp.jsをプロジェクトに含めます。

3. プロジェクトファイルのプロパティを開き、Startup fileをserver.jsからbin\WWWに修正します。
   

4. web.config を次のコードですべて入れ替えます。引用元はこちら

web.config

<?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>

#Azure WebサイトへDeploy

1. プロジェクトファイルを右クリック→発行をクリックします。
   
2. Microsoft Azire WebSitesをクリックします。
   
3. サインインをクリックします。（既にサインイン済みの場合は表示されません）
   
4. 新規ボタンをクリックします。
   
5. 好きなサイト名をつけ、リージョンを選んだら作成ボタンをクリックします。リージョンはJapan East, Japan West, 東アジア、東南アジアのいずれかを選ぶのが良いと思います。物理的に近いところを選ぶほうが、表示が速いです。
   
6. 特に変更する箇所はありません。次へをクリックします。
   
7. 構成が Release になっていることを確認し、次へをクリックします。
   
8. 発行ボタンをクリックします。
   
9. ブラウザが自動的に立ち上がり、Express4の初期画面が表示されます。