Spa のための web サーバ構築ノウハウ

5,521 views
5,212 views

Published on

RIAに代わる技術、実用的SPA(Single-page Application)
第7回 エンタープライズ×HTML5ナイトセミナー presented by html5jエンタープライズ部

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

No Downloads
Views
Total views
5,521
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
42
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Spa のための web サーバ構築ノウハウ

  1. 1. SPAのためのインフラ構築ノウハウ Vert.xとSockJSによるスケールアウトWebSocketサーバー構築 小堤 一弘 株式会社ゼノフィ Xenophy.CO.,LTD
  2. 2. 本日のアジェンダ 自己紹介 SPAに必要なインフラとは? WebScoketインフラとしてのVert.xとSockJS デモ まとめ
  3. 3. 自己紹介 こつつみ   かずひろ 小堤 一弘 株式会社ゼノフィ 代表取締役 Sencha 公式トレーニング認定トレーナー Japan Sencha User Group 主宰 html5jエンタープライズ部 ! Twitter @kotsutsumi ! Facebook https://www.facebook.com/kotsutsumi Books Ext JS Data-Driven Application Design Sencha Ext JS 4 実践開発ガイド Sencha Ext JS 4 実践開発ガイド 2 Sencha Touch 2 実践開発ガイド (監修)
  4. 4. SPAに必要なインフラとは?
  5. 5. SPAに必要なインフラとは? Webサーバー
  6. 6. SPAに必要なインフラとは? Webサーバー データーベースサーバー
  7. 7. SPAに必要なインフラとは? Webサーバー データーベースサーバー ファイル共有サーバー
  8. 8. SPAに必要なインフラとは? Webサーバー データーベースサーバー ファイル共有サーバー ロードバランサー
  9. 9. SPAに必要なインフラとは? Webサーバー データーベースサーバー ファイル共有サーバー ロードバランサー HA構成(ロードバランサーやデータベースサーバー) etc…
  10. 10. SPAに必要なインフラとは? それって、いままでの普通のWebページ制作と一緒じゃん。
  11. 11. SPAに必要なインフラとは? そうです、SPAだからといってインフラ何変わるの?って話。
  12. 12. SPAに必要なインフラとは? やっぱり、SPAだから…
  13. 13. SPAに必要なインフラとは? 非同期通信(AJAX)
  14. 14. SPAに必要なインフラとは? するよね!!
  15. 15. SPAに必要なインフラとは? でも、それって別にリクエスト受けられれば、いままでかわら(ry
  16. 16. SPAに必要なインフラとは? 冗長化構成?負荷分散?
  17. 17. SPAに必要なインフラとは? そんなのインフラ屋さんにお願いして…
  18. 18. SPAに必要なインフラとは? フロントエンジニアは知らんよ、そんなの。
  19. 19. SPAに必要なインフラとは? フルスタックエンジニア?なにそれ、おいしいの?
  20. 20. SPAに必要なインフラとは? でも、フルスタックエンジニアとまでいかなくても、 全体の設計がイメージできないと SPAアプリケーション作っていけるの?
  21. 21. SPAに必要なインフラとは? アプリケーションできあがってから、 インフラ周りで困るとか、悲しい…
  22. 22. SPAに必要なインフラとは? やっぱり、SPA設計したり構築する人は、インフラのことも気にしな きゃダメじゃない?知ってて損はないよね!?
  23. 23. SPAに必要なインフラとは? いやだから、それって別にリクエスト受けられれば、いままでかわら(ry
  24. 24. SPAに必要なインフラとは? そうです。
  25. 25. SPAに必要なインフラとは? 単純にAJAX通信するとかだけなら、あまり変わらない。
  26. 26. SPAに必要なインフラとは? HTML5といえば、WebSocketなんて使う場合、どうするの?
  27. 27. SPAに必要なインフラとは? そんなのググって、socket.ioとか見つかってパクれば、 なんとか徹夜は回避でき(ry
  28. 28. SPAに必要なインフラとは? 実は、そんなわけにも行かない。
  29. 29. SPAに必要なインフラとは? WebSocket、WebRTCなどの コミュニケーション技術に関して欠かせないもの。
  30. 30. SPAに必要なインフラとは? サーバー
  31. 31. SPAに必要なインフラとは? 知らなかったら開発環境すら作れないよ?
  32. 32. SPAに必要なインフラとは? いや、だからnodeのサンプルコピってきて、 socket.io使って動かせばすぐじゃん…?
  33. 33. SPAに必要なインフラとは? と思うじゃん?
  34. 34. SPAに必要なインフラとは? node + socket.io
  35. 35. SPAに必要なインフラとは? node + socket.io 確かに、ググるとWebSocketといればsocket.ioみたいな感じで、 記事一杯転がってるよね。
  36. 36. SPAに必要なインフラとは? node + socket.io 確かに、ググるとWebSocketといればsocket.ioみたいな感じで、 記事一杯転がってるよね。 サンプルも簡単、双方向通信余裕♪
  37. 37. SPAに必要なインフラとは? と思うじゃん?
  38. 38. SPAに必要なインフラとは? その構成と同じ1台のsocket.ioサーバーで何人さばけんの?
  39. 39. SPAに必要なインフラとは? スケールできるの?
  40. 40. SPAに必要なインフラとは? できるよ!!(震え声)
  41. 41. SPAに必要なインフラとは? RedisStore使ったりしてさ、 サイバー○ージェントさんとかよく書いてるじゃん!!
  42. 42. SPAに必要なインフラとは? おまえ、それつくれんの?(上司)
  43. 43. SPAに必要なインフラとは? 理論的には…(震え声)
  44. 44. SPAに必要なインフラとは? んじゃ、やって(上司)
  45. 45. SPAに必要なインフラとは? マジンコ?
  46. 46. SPAに必要なインフラとは? とならないためには、やっぱりフロントエンジニアといえども、 ネットワークインフラの事は、色々知っていて…
  47. 47. SPAに必要なインフラとは? そして、何よりも触ったことがある経験値が重要。
  48. 48. SPAに必要なインフラとは? でも、WebSocketやりたいけど、Redisの冗長化とか…監視… nodeのインスタンスを複数立てて… nodeのパフォーマンスどうよ…
  49. 49. SPAに必要なインフラとは? レッツ、ググる生活開始
  50. 50. SPAに必要なインフラとは? 死にたい…
  51. 51. SPAに必要なインフラとは? なんかいい方法ないの? すっきり簡単なやつ!!
  52. 52. SPAに必要なインフラとは? ということで、今日は勉強することが一杯のインフラの中でも、 WebSocketを利用するための環境に着目してみます。
  53. 53. WebScoketインフラとしてのVert.xとSockJS
  54. 54. WebScoketインフラとしてのVert.xとSockJS Virt.xってなに?
  55. 55. WebScoketインフラとしてのVert.xとSockJS Virt.xってなに? SockJS
  56. 56. WebScoketインフラとしてのVert.xとSockJS Virt.xってなに? SockJS SockJS サーバーを作ってみる
  57. 57. WebScoketインフラとしてのVert.xとSockJS Virt.xってなに? SockJS SockJS サーバーを作ってみる Hazelcastを利用したVert.xサーバーのクラスタリング
  58. 58. Virt.xってなに? Vert.x is a polyglot, non-blocking, event-driven application platform that runs on the JVM.
  59. 59. Virt.xってなに? Vert.x は、JVM上で動作するポリグロット、ノンブロッキング、イベン トドリブンなアプリケーションプラットフォームです。
  60. 60. Virt.xってなに? ん??よくわかんない…マニュアル的には…
  61. 61. ポリグロット?
  62. 62. ポリグロット? アプリケーションをJavaScriptでも、RubyでもGroovyでもJavaで もPythonでも記述することができます。
  63. 63. ポリグロット? アプリケーションをJavaScriptでも、RubyでもGroovyでもJavaで もPythonでも記述することができます。 そして、これら複数のプログラミング言語を交ぜて1つのアプリケー ションを作ることができます。
  64. 64. シンプルな同時並行性モデル
  65. 65. シンプルな同時並行性モデル Vert.xを使用すると、シングルスレッドとして、すべてのコードを書 くことができます。
  66. 66. シンプルな同時並行性モデル Vert.xを使用すると、シングルスレッドとして、すべてのコードを書 くことができます。 マルチスレッド·プログラミングの多くの落とし穴から解放されます
  67. 67. シンプルな同時並行性モデル Vert.xを使用すると、シングルスレッドとして、すべてのコードを書 くことができます。 マルチスレッド·プログラミングの多くの落とし穴から解放されます 非同期プログラミングモデルです!
  68. 68. シンプルな同時並行性モデル Vert.xを使用すると、シングルスレッドとして、すべてのコードを書 くことができます。 マルチスレッド·プログラミングの多くの落とし穴から解放されます 非同期プログラミングモデルです! イベントループというのがあって、Vert.xインスタンスがサーバー上 で利用可能なCPUコアにスレッドの数と一致するスレッド立てて稼 働することで、CPUコアを活かしきるよ!!
  69. 69. イベントバス
  70. 70. イベントバス Vert.xは、アプリケーション·コンポーネントと簡単に通信すること ができ、クライアントとサーバ側にまたがる分散イベントバス持って います。
  71. 71. イベントバス Vert.xは、アプリケーション·コンポーネントと簡単に通信すること ができ、クライアントとサーバ側にまたがる分散イベントバス持って います。 イベントバスを使って簡単に、いわゆるリアルタイムWebアプリ ケーションを作成できるようにすることができます。
  72. 72. Virt.xってなに? わかったようで、わからん…
  73. 73. Virt.xってなに? このままだと、今日Vert.xの説明し始めて終わっちゃう…
  74. 74. Virt.xってなに? つまりは、JavaScriptをはじめいろんな言語で構築できる サーバーサイドの技術
  75. 75. Virt.xってなに? そして、速い!!
  76. 76. Virt.xってなに? nodeより速くて、なんかすごそうじゃん?
  77. 77. SockJS SockJS - WebSocket emulation
  78. 78. SockJS 要するに、Socket.ioみたいにWebSocket使えない環境でもエミュレー ションして、抽象レイヤーになってくれるよ!!
  79. 79. sockjs-client 様々なブラウザに、WebSocket をはじめ、Streaming/Pollingで 対応している。
  80. 80. SockJS すばらしいねっ!
  81. 81. SockJS もちろんサーバーサイドの準備が必要な んだけど、Vert.xは最初からSockJS Serverを内蔵している!!
  82. 82. SockJS すばらしいねっ!すぐ使える。
  83. 83. SockJS サーバーを作ってみる
  84. 84. SockJS サーバーを作ってみる SockJS サーバーコード作成
  85. 85. SockJS サーバーを作ってみる SockJS サーバーコード作成 SockJS クライアントコード作成
  86. 86. 構成図 ブラウザ (SockJSクライアント) ブラウザ (SockJSクライアント) Vert.x サーバー (SockJSサーバー) ブラウザ (SockJSクライアント)
  87. 87. Vert.xの設置 yumコマンドを使ってJDKをインストール # yum -y install java-1.7.0-openjdk-devel; vert.xインストール(/rootにインストールする前提、どこでもよい) # wget "http://dl.bintray.com/vertx/downloads/vert.x-2.1M2.tar.gz" -O vert.x-2.1M2.tar.gz; # tar xvzf vert.x-2.1M2.tar.gz; パスを通す # vi .bash_profile PATH=“$PATH”:/root/vert.x-2.1M2/bin # source .bash_profile バージョン確認 # vertx version
  88. 88. SockJS サーバーコード作成 var vertx = require('vertx'); var server = vertx.createHttpServer(); var sockJSServer = vertx.createSockJSServer(server); サーバー生成 ! sockJSServer.bridge({prefix : '/eventbus'}, [{ address : 'demo.orderMgr' }], [{ address : 'demo.orderMgr' }] ); セキュリティ設定 ! server.listen(8080); これだけ!
  89. 89. SockJS クライアントコード作成 <html> <head> </head> <body> <script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script> <script src='vertxbus-2.1.js'></script> ! <script> ! var eb = new vertx.EventBus('http://133.242.50.31:8080/eventbus'); ! eb.onopen = function() { ! console.log('open'); ! eb.registerHandler('demo.orderMgr', function(message) { ! console.log('received a message: ' + JSON.stringify(message)); ! }); ! } ! eb.onmessage = function(e) { console.log('message', e.data); }; ! eb.onclose = function() { console.log('close'); }; ! function ebSend() { var v = document.getElementById("form1").value; eb.publish('demo.orderMgr', v); } ! </script> <input id="form1" type="text" /> <input type="button" onclick="ebSend();" value="Send Message" /> </body> </html>
  90. 90. SockJS サーバーを作ってみる SockJSサーバー起動 # vertx run app.js
  91. 91. SockJS サーバーを作ってみる 後ほどデモで動いてるところを見てもらいます。
  92. 92. WebScoketインフラとしてのVert.xとSockJS これが動いたとしても…
  93. 93. WebScoketインフラとしてのVert.xとSockJS さっき話してた、nodeとなんら話は変わってないじゃん。 スケールどうするのよ?とか。
  94. 94. WebScoketインフラとしてのVert.xとSockJS なんかいい方法ないの? すっきり簡単なやつ!!
  95. 95. WebScoketインフラとしてのVert.xとSockJS Hazelcastがあるよ!
  96. 96. Hazelcastを利用したVert.xサーバーのクラスタリング Vert.xに組み込まれているHazelcast、 クラスタリングは、XMLを設定するだけ! という手軽さっ!
  97. 97. クラスタリング構成図 ブラウザ (SockJSクライアント) ブラウザ (SockJSクライアント) ブラウザ (SockJSクライアント) Vert.x サーバー (SockJSサーバー) Vert.x サーバー (SockJSサーバー) Vert.x サーバー (SockJSサーバー) ローカルスイッチ
  98. 98. /root/vert.x-2.1M2/conf/cluster.xmlを編集 <hazelcast xsi:schemaLocation="http://www.hazelcast.com/schema/config hazelcast-basic.xsd" xmlns="http://www.hazelcast.com/schema/config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <properties> <property name="hazelcast.mancenter.enabled">false</property> <property name="hazelcast.memcache.enabled">false</property> <property name="hazelcast.rest.enabled">false</property> <property name="hazelcast.wait.seconds.before.join">0</property> <property name="hazelcast.logging.type">jdk</property> </properties> <group> <name>dev</name> <password>dev-pass</password> </group> <network> <port auto-increment="true">5701</port> <join> <multicast enabled="false"> <multicast-group>224.2.2.3</multicast-group> <multicast-port>54327</multicast-port> </multicast> <tcp-ip enabled="true"> <interface>192.168.0.2</interface> <interface>192.168.0.3</interface> <interface>192.168.0.4</interface> </tcp-ip> <aws enabled=“false"> … クラスタリングしたいサーバーを 追加すればOK
  99. 99. クラスタ起動 vertx run app.js -cluster
  100. 100. デモ          さんのご協力で、 さくらのクラウド環境を借りて検証環境を作成しました。 表示されるIPアドレスなどは、そのうち消えます。
  101. 101. デモ Vert.x サーバー1へ接続するHTML http://133.242.50.31/server1.html みんなで、つないで みよう!! Vert.x サーバー2へ接続するHTML 自粛 http://133.242.50.31/server2.html つながんなかったりし たら、すまん!! Vert.x サーバー3へ接続するHTML http://133.242.50.31/server3.html 当日のデモ中のみ有効
  102. 102. まとめ
  103. 103. まとめ SPAでWebSocketやWebRTCを利用しない限り、 今までのWebアプリケーションインフラと大差は 無い。
  104. 104. まとめ SPAでWebSocketやWebRTCを利用しない限り、 今までのWebアプリケーションインフラと大差は 無い。 Webサーバーに比べて、WebSocketサーバーのス ケールは世の中的な経験値がまだ浅い?
  105. 105. まとめ
  106. 106. まとめ Vert.xは、Javaでサーバーサイドが記述できるた め、エンタープライズシーンではマッチしやすい?
  107. 107. まとめ Vert.xは、Javaでサーバーサイドが記述できるた め、エンタープライズシーンではマッチしやすい? Hazelcastによるイベントバススケールアウトは、 超簡単、無停止でスケールさせることも可能。
  108. 108. まとめ
  109. 109. まとめ Vert.xは、SockJS Serverを内蔵しているので、 さっくり実装できてよい。
  110. 110. まとめ Vert.xは、SockJS Serverを内蔵しているので、 さっくり実装できてよい。 スケールしやすいし、速いし、多言語で実装できる し、WebSocketのインフラを自信を持って提供で きる!!(もちろん自分で試せよ!!)
  111. 111. Vert.xとSockJSを、是非お試しください!!
  112. 112. ご清聴ありがとうございました!

×