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

#準備
あらかじめ[Node.js Tools for Visual Studio](http://nodejstools.codeplex.com/)をインストールしておきます。

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

#プロジェクト作成
Blank Azure Node.js Web Applicationを選びます。
（ここでは TypeScriptのカテゴリから選んでいますが、JavaScriptのカテゴリから選んでも構いません。）
![WS000003.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/88479902-2d99-3c07-e71b-85e2988a4450.jpeg)

#express4アプリケーション生成
1. server.js(TypeScriptの場合はserver.ts)を削除します。
2. ソリューションエクスプローラー内のnpmを右クリック→Instal New npm Packagesをクリックします。
![WS000005.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/d26f68af-87aa-3656-b2f0-0555c27a8a4c.jpeg)

3. express-generatorをインストールします。Dependency type をGlobalにします。
![WS000006.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/5d941c39-dc9e-bfbb-a100-97c10be5e3c8.jpeg)

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

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

ここまででexpress4の生成は終了です。
#Visual Studio用に設定修正
1. bin\WWW ファイルをプロジェクトに含めます。（WWWファイルが表示されていない場合は、ソリューションエクスプローラーの「すべてのファイルを表示」アイコンをクリック）
![WS000007.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/a985d28e-b28f-d72b-62bd-190465bd4fff.jpeg)

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

1. プロジェクトファイルのプロパティを開き、Startup fileをserver.jsからbin\WWWに修正します。
![WS000008.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/0a042de2-cf01-369b-3c91-37d1cbdc6a67.jpeg)

1. web.config を次のコードですべて入れ替えます。[引用元はこちら](http://blogs.msdn.com/b/tsmatsuz/archive/2014/08/21/node-js-remote-debugging-using-node-js-tools-for-visual-studio.aspx)

```xml: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. プロジェクトファイルを右クリック→発行をクリックします。
![WS000009.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/73db03e2-1751-1440-22eb-17359ed71ca9.jpeg)
2. Microsoft Azire WebSitesをクリックします。
![WS000011.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/7995f155-334b-f727-fbd4-0033a1924ceb.jpeg)
3. サインインをクリックします。（既にサインイン済みの場合は表示されません）
![WS000012.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/1a391353-3548-0b37-9c1a-229354ae3709.jpeg)
4. 新規ボタンをクリックします。
![WS000014.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/cdd6ff94-c754-5705-3d4a-c180b697653f.jpeg)
5. 好きなサイト名をつけ、リージョンを選んだら作成ボタンをクリックします。リージョンはJapan East, Japan West, 東アジア、東南アジアのいずれかを選ぶのが良いと思います。物理的に近いところを選ぶほうが、表示が速いです。
![WS000016.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/c39a29f4-fec8-40e2-495c-35f668093898.jpeg)
6. 特に変更する箇所はありません。次へをクリックします。
![WS000017.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/b2d208f6-b771-43d4-2145-5026e5e22ee4.jpeg)
7. 構成が Release になっていることを確認し、次へをクリックします。
![WS000018.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/21376844-9325-7233-7232-972ed3a7ce88.jpeg)
8. 発行ボタンをクリックします。
![WS000019.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/ac825b02-7a4e-e2fc-d76a-20bbb794c868.jpeg)
9. ブラウザが自動的に立ち上がり、Express4の初期画面が表示されます。
![WS000020.JPG](https://qiita-image-store.s3.amazonaws.com/0/60459/ada5559b-f082-8d4a-1992-7f23733a95f1.jpeg)