miso_soup3 Blog

主に ASP.NET 関連について書いています。

node.js で、Katana の Welcome ページ を動して遊ぶ

Katana node.js

※2013/12/2 頂いたコメントをもとに修正しました。

本当は、node.js で ASP.NET Web API を動かしたかったのですが、いろいろ引っかかってできませんでした。ということで、途中までの Welcome ページ を表示するとこまで書いておきます。ぐだぐだです。
２段階に分けました。

  • node.js で OWIN に接続し、C# で書いた簡単なコードを動かす。
  • node.js で OWIN に接続し、Katana の Middleware である Welcome ページ を適用させる。

準備

以下のツールをインストールします。

Node.js ソリューションを用意する

Visual Studio を開き、ファイル＞新しいプロジェクトから「Blank Node.js Web Application」を選択します。
f:id:miso_soup3:20131129183958p:plain

作成されたソリューションに、C# のプロジェクトを追加します。ソリューションエクスプローラで、ソリューションを右クリック＞追加＞新しいプロジェクトの追加で、「クラスライブラリ」を選択。

Class1.cs が追加されているので、これを「Startup.cs」に直しておきます。
以上でできあがったソリューションはこんな感じ。
f:id:miso_soup3:20131129184139p:plain

node.js + OWIN + C#

簡単な C# を動かしてみます。

C#: OWIN の Startup クラスを用意

NuGet で「Owin」を C# プロジェクトの方にインストールし、Startup.cs を下の様に書きます。

using Owin;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.IO;

namespace MyApp
{
	using AppFunc = Func<IDictionary<string, object>, Task>;

	public class Startup
	{
		public void Configuration(IAppBuilder app)
		{
			app.Use(new Func<AppFunc, AppFunc>(next => async env =>
			{
				env["owin.ResponseStatusCode"] = 200;
				((IDictionary<string, string[]>)env["owin.ResponseHeaders"]).Add(
					"Content-Length", new string[] { "53" });
				((IDictionary<string, string[]>)env["owin.ResponseHeaders"]).Add(
					"Content-Type", new string[] { "text/html" });
				StreamWriter w = new StreamWriter((Stream)env["owin.ResponseBody"]);
				w.Write("Hello, from C#. Time on server is " + DateTime.Now.ToString());

				await w.FlushAsync();
			}));
		}
	}
}
node.js: npm でパッケージをインストール

node.js のプロジェクトでは、２つのパッケージを使います。Web アプリのフレームワークの王道「express」と、OWIN に接続するための「connect-owin」です。
（OWIN 接続にするためのパッケージとしては、他にも 「edge」があるみたい。）

npm というとこを右クリックし、manage npm package を選択。
f:id:miso_soup3:20131129184248p:plain

左は「Local Packages」タブ、右は「Search npm Repository」タブを開きます。
右側の Find のところに「express」を入力し、表示された「express」を選択後、下の「install Locally」を押します。
f:id:miso_soup3:20131129184422p:plain

同様に、「connect-owin」のパッケージもインストールします。
インストールが完了すると、ソリューションエクスプローラにこのように表示されます。
f:id:miso_soup3:20131129184506p:plain

node.js: server.js のコード

server.js は以下の様に書きます。

var owin = require('connect-owin'),
    express = require('express');

var app = express();
app.all('/', owin('../MyApp/bin/Debug/MyApp.dll'));
// ...
app.listen(3000);

"MyApp.dll" のところで、先ほど書いた C# の dll を参照しています。なので、C# のプロジェクト名に合わせて書き換える必要があります。（上は、プロジェクト名が「MyApp」の例）

実行

一度、ソリューションのリビルドを行ってから、F5 でデバッグ実行します。「http://localhost:3000」にアクセスすると、下のように表示されるはずです。
f:id:miso_soup3:20131129184727p:plain

node.js + OWIN + C# + Katana-Middleware

次は、Katana の Welcome ページを表示させる Middleware を適用させてみます。

C#: Startup.cs のコード

C# のプロジェクトの方に NuGet で「Microsoft.Owin.Diagnostics」をインストールし、Startup.cs を下のように書きます。

using Owin;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.Owin.Diagnostics;
using Microsoft.Owin;
using Microsoft.Owin.Infrastructure;

namespace MyApp
{

	public class Startup
	{
		public void Configuration(IAppBuilder app)
		{
			SignatureConversions.AddConversions(app);
			app.UseWelcomePage();
		}
	}
}
実行

再びリビルドを行い、F5 でデバッグ実行し、「Http://localhost:3000」にアクセスすると、下の用に Welcome ページが表示されます。
f:id:miso_soup3:20131129185050p:plain

ASP.NET Web API を動かそうとしてみましたが、わからず…。