N 分で作るTypeScript で Node.jsVisual Studio 編@TANAKA_733

@tanaka_733 ( 自己紹介 )

お仕事 Ruby, Java, Node.js, Lua とかで PaaS をごにょっている人

趣味 C# な開発 Windows Phone (7/8)

Windows Store Apps

Kinect

ブログ 銀の光と碧い空

@tanaka_733 ( 自己紹介 )

お仕事 Ruby, Java, Node.js, Lua とかで PaaS をごにょっている人

趣味 C# な開発 Windows Phone (7/8)

Windows Store Apps

Kinect

TypeScript やるしかない！！！

TypeScript で Node.js

昔書いた記事のブラッシュアップ版 http://techblog.hilife-jp.info/2012/10/nodejs-typescript/

今回は Visual Studio で Ts ファイルから js ファイルへは同じ tsc コマンドなのでほかのエディタでも基本同じ 準備

Visual Studio 2012 (VS Express for Web か VS professional Edition 以上 )

TypeScript VS Plugin (v0.8.2)

http://www.microsoft.com/en-us/download/details.aspx?id=34790

Node (v0.8.17), nvmw を使用しています https://github.com/hakobera/nvmw

Git client

http://code.google.com/p/msysgit/downloads/list?q=net+installer

プロジェクト作成

0.8.2 から Visual C# からTypeScript の下に

BOM 問題

Visual Studio のテキストファイルのデフォルトエンコードは、SHIFT-JIS もしくは UTF-8 BOM 付きの模様

Node.js のライブラリまわりでよくはまることが… デフォルトの設定はなさそう めんどいですが、 1 つ 1 つ保存しなおし。 よりよい方法があったら教えてください <m(__)m>

ファイル > 名前を付けて保存

ここを押して、エンコードを選択

UTF-8 シグネチャなし

(BOM なしのこと )

TypeScript 定義ファイルを取ってこよう

https://github.com/borisyankov/DefinitelyTypedが更新頻度が高いのでおすすめ。

> git clone https://github.com/borisyankov/DefinitelyTyped.git

その 1 Hello World

app.ts を消して一から書き直し。 まずは、これを書いて定義ファイルを参照可能にする ///<reference path='DefinitelyTyped/node/node.d.ts'/>

import http = module('http')http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/');

こんな感じ InteliSense が効きます

node.js を起動する

> node app.js

その 2 パッケージ＆ PaaS にデプロイ

npm: node のパッケージ管理システム package.json をいつも通り記述 (UTF-8 ボムなしで保存 )

{    "name": “typescript-sample"  , "version": "0.0.1"  , "private": true  , "dependencies": { "express": "3.0.0" , "ejs": ">= 0.8.3" , "jade": ">= 0.27.7“  }}

npm install でパッケージをインストール

> npm install を実行

app.ts を書き換え

///<reference path='DefinitelyTyped/node/node.d.ts'/>///<reference path='DefinitelyTyped/express/express.d.ts' />///<reference path="DefinitelyTyped/underscore/underscore.d.ts" />

import http = module('http')import url = module("url")import routes = module("./routes/index")import express = module('express')var app = <express.ServerApplication> express()

var port = process.env.VCAP_APP_PORT || 1337;// 続く

コンパイルエラーでるのは、あとで追加します

後半の PaaS にデプロイして

クラウド上で動くときに使います

app.ts を書き換え

app.configure(function () { app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); //express3 app.set('view options', { layout: false }); app.use(express.bodyParser({})); app.use(express.methodOverride()); app.use(express.static(__dirname + '/public'));});

// 続く

app.ts を書き換え

app.configure('development', function () { app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});

app.configure('production', function () { app.use(express.errorHandler());});

// Routesapp.get('/', routes.index);app.listen(port);console.log('Server running at http://127.0.0.1:' + port + '/');

routes フォルダを作成して、 index.ts 追加

///<reference path='/DefinitelyTyped/express/express.d.ts' />

import express = module("express")export function index(req: any, res: any) { res.render('index', { title: 'Page Title', testArray: ["1", "2", "3", "4"] })}

views フォルダ追加して View を定義

jade は素人なのでもっといい書き方があるかも この jade (ejs も ) VS の補完は効かないし、

BOM なしで保存しなおさないといけないので、VS 以外のエディタでやるのがいいような…

views/layout.jade ( ファイルはもう一つ次のページに )

!!! 5html head title PageTitle body #container #header block mainContent

views フォルダ追加して View を定義

views/index.jade

extends layout

block mainContent

h1= title p Welcome to #{title}

ul - each test in testArray li a(href= "/user/"+test) b= test

実行

> node app.js

PaaS にデプロイ

最近は、 node.js が動く PaaS が増えてきました Azure Web Site, Heroku などなど

今回は 変わったとこで、 Uhuru Cloud を使ってみます OSS な PaaS CloudFoundry を使ったサービスの 1 つ CloudFoundry 自体は Ruby を中心に書かれています CloudFoundry 本家でも Node.js 使えます Uhuru は .NET も動かせるのが違うところ

Uhuru Cloud の登録

http://uhurusoftware.com/ からユーザー登録

コマンドラインツールのセットアップ

要 Ruby 1.9.2 以上 http://

support.uhurusoftware.com/entries/21454287-deploying-and-managing-apps-with-command-line

> ruby --versionruby 1.9.2p290 (2011-07-09) [i386-mingw32]> gem update –system> gem install vmcu 

> vmcu target services.uhurucloud.com   Successfully targeted to Uhuru AppCloud [http://services.uhurucloud.com] > vmcu login > vmcu cloud-team  Web の管理画面から

OneTimeToken 発行して入力

コマンドラインツールからデプロイ

> cd <ProjectFolder>

> vmcu push hello-typescript  --runtime node08

# 以下プロンプトは全部デフォルトのまま Enter で OK

本当はビルド成果物 (js) と jade ファイルだけで十分

アプリ名はグローバルで一意なので適当に変えてください

( 参考 ) プロンプト

>vmcu push hello-typescript --runtime node08Would you like to deploy from the current directory? [Yn]:Detected a Node.js Application, is this correct? [Yn]:Application Deployed URL [hello-typescript.uhurucloud.com]:Memory reservation (128M, 256M, 512M, 1G, 2G) [64M]:How many instances? [1]:Bind existing services to 'hello-typescript'? [yN]:Create services to bind to 'hello-typescript'? [yN]:Would you like to save this configuration? [yN]:Creating Application: OKUploading Application: Checking for available resources: OK Processing resources: OK Packing application: OK Uploading (2M): OKPush Status: OK

Staging Application 'hello-typescript': OK

Starting Application 'hello-typescript': OK

アプリにアクセス

URL は <appname>.uhurucloud.comhello-typescript なら hello-typescript.uhurucloud.com

おつかれさまでした

ここまでのサンプルは Github においています