13016 n分で作るtype scriptでnodejs

2,167 views
1,956 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,167
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

13016 n分で作るtype scriptでnodejs

  1. 1. N分で作るTypeScript で Node.jsVisual Studio編@TANAKA_733
  2. 2. @tanaka_733 (自己紹介) お仕事  Ruby, Java, Node.js, Lua とかでPaaSをごにょっている人 趣味  C#な開発  Windows Phone (7/8)  Windows Store Apps  Kinect ブログ  銀の光と碧い空
  3. 3. @tanaka_733 (自己紹介) お仕事  Ruby, Java, Node.js, Lua とかでPaaSをごにょっている人 趣味  C#な開発  Windows Phone (7/8)  Windows Store Apps TypeScript やるしかない!!!  Kinect
  4. 4. 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
  5. 5. プロジェクト作成 0.8.2 から Visual C#から TypeScriptの下に
  6. 6. BOM問題 Visual Studioのテキストファイルのデフォルトエンコードは、 SHIFT-JISもしくはUTF-8 BOM付きの模様 Node.js のライブラリまわりでよくはまることが… デフォルトの設定はなさそう めんどいですが、1つ1つ保存しなおし。 よりよい方法があったら教えてください <m(__)m>
  7. 7. ファイル > 名前を付けて保存 UTF-8 シグネチャなし (BOMなしのこと) ここを押して、 エンコードを選択
  8. 8. TypeScript定義ファイルを取ってこよう https://github.com/borisyankov/DefinitelyTyped が更新頻度が高いのでおすすめ。 > git clone https://github.com/borisyankov/DefinitelyTyped.git
  9. 9. その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 Worldn); }).listen(1337, 127.0.0.1); console.log(Server running at http://127.0.0.1:1337/);
  10. 10. こんな感じInteliSense が効きます
  11. 11. node.js を起動する > node app.js
  12. 12. その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“ } }
  13. 13. npm install でパッケージをインストール > npm install を実行
  14. 14. 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に// 続く デプロイして クラウド上で動くときに 使います
  15. 15. 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));});//続く
  16. 16. 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 + /);
  17. 17. 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"] })}
  18. 18. views フォルダ追加してViewを定義 jade は素人なのでもっといい書き方があるかも このjade (ejsも) VSの補完は効かないし、 BOMなしで保存しなおさないといけないので、 VS以外のエディタでやるのがいいような… views/layout.jade (ファイルはもう一つ次のページに) !!! 5 html head title PageTitle body #container #header block mainContent
  19. 19. 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
  20. 20. 実行 > node app.js
  21. 21. PaaSにデプロイ 最近は、node.js が動くPaaSが増えてきました  Azure Web Site, Heroku などなど 今回は 変わったとこで、Uhuru Cloud を使ってみます  OSS なPaaS CloudFoundryを使ったサービスの1つ  CloudFoundry自体はRuby を中心に書かれています  CloudFoundry本家でもNode.js使えます  Uhuru は .NET も動かせるのが違うところ
  22. 22. Uhuru Cloud の登録 http://uhurusoftware.com/ からユーザー登録
  23. 23. コマンドラインツールのセットアップ 要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 発行して入力
  24. 24. コマンドラインツールからデプロイ> cd <ProjectFolder> 本当はビルド成果物(js)とjadeファイルだけで十分> vmcu push hello-typescript --runtime node08 アプリ名はグローバルで一意なので# 以下プロンプトは全部デフォルトのままEnterでOK 適当に変えてください
  25. 25. (参考)プロンプト>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: OKStaging Application hello-typescript: OKStarting Application hello-typescript: OK
  26. 26. アプリにアクセスURL は <appname>.uhurucloud.comhello-typescript なら hello-typescript.uhurucloud.com
  27. 27. おつかれさまでした ここまでのサンプルは Github においています

×