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

1. SPAのためのインフラ構築ノウハウ
Vert.xとSockJSによるスケールアウトWebSocketサーバー構築
小堤 一弘
株式会社ゼノフィ
Xenophy.CO.,LTD

2. 本日のアジェンダ
自己紹介
SPAに必要なインフラとは？
WebScoketインフラとしてのVert.xとSockJS
デモ
まとめ

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. SPAに必要なインフラとは？

5. SPAに必要なインフラとは？
Webサーバー

6. SPAに必要なインフラとは？
Webサーバー
データーベースサーバー

7. SPAに必要なインフラとは？
Webサーバー
データーベースサーバー
ファイル共有サーバー

8. SPAに必要なインフラとは？
Webサーバー
データーベースサーバー
ファイル共有サーバー
ロードバランサー

9. SPAに必要なインフラとは？
Webサーバー
データーベースサーバー
ファイル共有サーバー
ロードバランサー
HA構成(ロードバランサーやデータベースサーバー) etc…

10. SPAに必要なインフラとは？
それって、いままでの普通のWebページ制作と一緒じゃん。

11. SPAに必要なインフラとは？
そうです、SPAだからといってインフラ何変わるの？って話。

12. SPAに必要なインフラとは？
やっぱり、SPAだから…

13. SPAに必要なインフラとは？
非同期通信(AJAX)

14. SPAに必要なインフラとは？
するよね!!

15. SPAに必要なインフラとは？
でも、それって別にリクエスト受けられれば、いままでかわら(ry

16. SPAに必要なインフラとは？
冗長化構成？負荷分散？

17. SPAに必要なインフラとは？
そんなのインフラ屋さんにお願いして…

18. SPAに必要なインフラとは？
フロントエンジニアは知らんよ、そんなの。

19. SPAに必要なインフラとは？
フルスタックエンジニア？なにそれ、おいしいの？

20. SPAに必要なインフラとは？
でも、フルスタックエンジニアとまでいかなくても、
全体の設計がイメージできないと
SPAアプリケーション作っていけるの？

21. SPAに必要なインフラとは？
アプリケーションできあがってから、
インフラ周りで困るとか、悲しい…

22. SPAに必要なインフラとは？
やっぱり、SPA設計したり構築する人は、インフラのことも気にしな
きゃダメじゃない？知ってて損はないよね！？

23. SPAに必要なインフラとは？
いやだから、それって別にリクエスト受けられれば、いままでかわら(ry

24. SPAに必要なインフラとは？
そうです。

25. SPAに必要なインフラとは？
単純にAJAX通信するとかだけなら、あまり変わらない。

26. SPAに必要なインフラとは？
HTML5といえば、WebSocketなんて使う場合、どうするの？

27. SPAに必要なインフラとは？
そんなのググって、socket.ioとか見つかってパクれば、
なんとか徹夜は回避でき(ry

28. SPAに必要なインフラとは？
実は、そんなわけにも行かない。

29. SPAに必要なインフラとは？
WebSocket、WebRTCなどの
コミュニケーション技術に関して欠かせないもの。

30. SPAに必要なインフラとは？
サーバー

31. SPAに必要なインフラとは？
知らなかったら開発環境すら作れないよ？

32. SPAに必要なインフラとは？
いや、だからnodeのサンプルコピってきて、
socket.io使って動かせばすぐじゃん…?

33. SPAに必要なインフラとは？
と思うじゃん？

34. SPAに必要なインフラとは？
node + socket.io

35. SPAに必要なインフラとは？
node + socket.io
確かに、ググるとWebSocketといればsocket.ioみたいな感じで、
記事一杯転がってるよね。

36. SPAに必要なインフラとは？
node + socket.io
確かに、ググるとWebSocketといればsocket.ioみたいな感じで、
記事一杯転がってるよね。
サンプルも簡単、双方向通信余裕♪

37. SPAに必要なインフラとは？
と思うじゃん？

38. SPAに必要なインフラとは？
その構成と同じ1台のsocket.ioサーバーで何人さばけんの？

39. SPAに必要なインフラとは？
スケールできるの？

40. SPAに必要なインフラとは？
できるよ!!（震え声）

41. SPAに必要なインフラとは？
RedisStore使ったりしてさ、
サイバー○ージェントさんとかよく書いてるじゃん！！

42. SPAに必要なインフラとは？
おまえ、それつくれんの？（上司）

43. SPAに必要なインフラとは？
理論的には…（震え声）

44. SPAに必要なインフラとは？
んじゃ、やって（上司）

45. SPAに必要なインフラとは？
マジンコ？

46. SPAに必要なインフラとは？
とならないためには、やっぱりフロントエンジニアといえども、
ネットワークインフラの事は、色々知っていて…

47. SPAに必要なインフラとは？
そして、何よりも触ったことがある経験値が重要。

48. SPAに必要なインフラとは？
でも、WebSocketやりたいけど、Redisの冗長化とか…監視…
nodeのインスタンスを複数立てて…
nodeのパフォーマンスどうよ…

49. SPAに必要なインフラとは？
レッツ、ググる生活開始

50. SPAに必要なインフラとは？
死にたい…

51. SPAに必要なインフラとは？
なんかいい方法ないの？
すっきり簡単なやつ!!

52. SPAに必要なインフラとは？
ということで、今日は勉強することが一杯のインフラの中でも、
WebSocketを利用するための環境に着目してみます。

53. WebScoketインフラとしてのVert.xとSockJS

54. WebScoketインフラとしてのVert.xとSockJS
Virt.xってなに？

55. WebScoketインフラとしてのVert.xとSockJS
Virt.xってなに？
SockJS

56. WebScoketインフラとしてのVert.xとSockJS
Virt.xってなに？
SockJS
SockJS サーバーを作ってみる

57. WebScoketインフラとしてのVert.xとSockJS
Virt.xってなに？
SockJS
SockJS サーバーを作ってみる
Hazelcastを利用したVert.xサーバーのクラスタリング

58. Virt.xってなに？
Vert.x is a polyglot, non-blocking, event-driven application
platform that runs on the JVM.

59. Virt.xってなに？
Vert.x は、JVM上で動作するポリグロット、ノンブロッキング、イベン
トドリブンなアプリケーションプラットフォームです。

60. Virt.xってなに？
ん？？よくわかんない…マニュアル的には…

61. ポリグロット?

62. ポリグロット?
アプリケーションをJavaScriptでも、RubyでもGroovyでもJavaで
もPythonでも記述することができます。

63. ポリグロット?
アプリケーションをJavaScriptでも、RubyでもGroovyでもJavaで
もPythonでも記述することができます。
そして、これら複数のプログラミング言語を交ぜて1つのアプリケー
ションを作ることができます。

64. シンプルな同時並行性モデル

65. シンプルな同時並行性モデル
Vert.xを使用すると、シングルスレッドとして、すべてのコードを書
くことができます。

66. シンプルな同時並行性モデル
Vert.xを使用すると、シングルスレッドとして、すべてのコードを書
くことができます。
マルチスレッド·プログラミングの多くの落とし穴から解放されます

67. シンプルな同時並行性モデル
Vert.xを使用すると、シングルスレッドとして、すべてのコードを書
くことができます。
マルチスレッド·プログラミングの多くの落とし穴から解放されます
非同期プログラミングモデルです！

68. シンプルな同時並行性モデル
Vert.xを使用すると、シングルスレッドとして、すべてのコードを書
くことができます。
マルチスレッド·プログラミングの多くの落とし穴から解放されます
非同期プログラミングモデルです！
イベントループというのがあって、Vert.xインスタンスがサーバー上
で利用可能なCPUコアにスレッドの数と一致するスレッド立てて稼
働することで、CPUコアを活かしきるよ！！

69. イベントバス

70. イベントバス
Vert.xは、アプリケーション·コンポーネントと簡単に通信すること
ができ、クライアントとサーバ側にまたがる分散イベントバス持って
います。

71. イベントバス
Vert.xは、アプリケーション·コンポーネントと簡単に通信すること
ができ、クライアントとサーバ側にまたがる分散イベントバス持って
います。
イベントバスを使って簡単に、いわゆるリアルタイムWebアプリ
ケーションを作成できるようにすることができます。

72. Virt.xってなに？
わかったようで、わからん…

73. Virt.xってなに？
このままだと、今日Vert.xの説明し始めて終わっちゃう…

74. Virt.xってなに？
つまりは、JavaScriptをはじめいろんな言語で構築できる
サーバーサイドの技術

75. Virt.xってなに？
そして、速い!!

76. Virt.xってなに？
nodeより速くて、なんかすごそうじゃん？

77. SockJS
SockJS - WebSocket emulation

78. SockJS
要するに、Socket.ioみたいにWebSocket使えない環境でもエミュレー
ションして、抽象レイヤーになってくれるよ!!

79. sockjs-client
様々なブラウザに、WebSocket
をはじめ、Streaming/Pollingで
対応している。

80. SockJS
すばらしいねっ！

81. SockJS
もちろんサーバーサイドの準備が必要な
んだけど、Vert.xは最初からSockJS
Serverを内蔵している!!

82. SockJS
すばらしいねっ！すぐ使える。

83. SockJS サーバーを作ってみる

84. SockJS サーバーを作ってみる
SockJS サーバーコード作成

85. SockJS サーバーを作ってみる
SockJS サーバーコード作成
SockJS クライアントコード作成

86. 構成図
ブラウザ
(SockJSクライアント)
ブラウザ
(SockJSクライアント)
Vert.x サーバー
(SockJSサーバー)
ブラウザ
(SockJSクライアント)

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. 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. 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. SockJS サーバーを作ってみる
SockJSサーバー起動
# vertx run app.js

91. SockJS サーバーを作ってみる
後ほどデモで動いてるところを見てもらいます。

92. WebScoketインフラとしてのVert.xとSockJS
これが動いたとしても…

93. WebScoketインフラとしてのVert.xとSockJS
さっき話してた、nodeとなんら話は変わってないじゃん。
スケールどうするのよ？とか。

94. WebScoketインフラとしてのVert.xとSockJS
なんかいい方法ないの？
すっきり簡単なやつ!!

95. WebScoketインフラとしてのVert.xとSockJS
Hazelcastがあるよ！

96. Hazelcastを利用したVert.xサーバーのクラスタリング
Vert.xに組み込まれているHazelcast、
クラスタリングは、XMLを設定するだけ！
という手軽さっ！

97. クラスタリング構成図
ブラウザ
(SockJSクライアント)
ブラウザ
(SockJSクライアント)
ブラウザ
(SockJSクライアント)
Vert.x サーバー
(SockJSサーバー)
Vert.x サーバー
(SockJSサーバー)
Vert.x サーバー
(SockJSサーバー)
ローカルスイッチ

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. クラスタ起動
vertx run app.js -cluster

100. デモ
さんのご協力で、
さくらのクラウド環境を借りて検証環境を作成しました。
表示されるIPアドレスなどは、そのうち消えます。

101. デモ
Vert.x サーバー１へ接続する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. まとめ

103. まとめ
SPAでWebSocketやWebRTCを利用しない限り、
今までのWebアプリケーションインフラと大差は
無い。

104. まとめ
SPAでWebSocketやWebRTCを利用しない限り、
今までのWebアプリケーションインフラと大差は
無い。
Webサーバーに比べて、WebSocketサーバーのス
ケールは世の中的な経験値がまだ浅い？

105. まとめ

106. まとめ
Vert.xは、Javaでサーバーサイドが記述できるた
め、エンタープライズシーンではマッチしやすい？

107. まとめ
Vert.xは、Javaでサーバーサイドが記述できるた
め、エンタープライズシーンではマッチしやすい？
Hazelcastによるイベントバススケールアウトは、
超簡単、無停止でスケールさせることも可能。

108. まとめ

109. まとめ
Vert.xは、SockJS Serverを内蔵しているので、
さっくり実装できてよい。

110. まとめ
Vert.xは、SockJS Serverを内蔵しているので、
さっくり実装できてよい。
スケールしやすいし、速いし、多言語で実装できる
し、WebSocketのインフラを自信を持って提供で
きる!!（もちろん自分で試せよ!!）

111. Vert.xとSockJSを、是非お試しください!!

112. ご清聴ありがとうございました!