SPAのためのインフラ構築ノウハウ Vert.xとSockJSによるスケールアウトWebSocketサーバー構築

株式会社ゼノフィ Xenophy.CO.,LTD

小堤　一弘

本日のアジェンダ

自己紹介

SPAに必要なインフラとは？

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

デモ

まとめ

自己紹介

こつつみ 　 かずひろ

小堤　一弘 株式会社ゼノフィ 代表取締役 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 実践開発ガイド (監修)

SPAに必要なインフラとは？

SPAに必要なインフラとは？

Webサーバー

SPAに必要なインフラとは？

Webサーバー

データーベースサーバー

SPAに必要なインフラとは？

Webサーバー

データーベースサーバー

ファイル共有サーバー

SPAに必要なインフラとは？

Webサーバー

データーベースサーバー

ファイル共有サーバー

ロードバランサー

SPAに必要なインフラとは？

Webサーバー

データーベースサーバー

ファイル共有サーバー

ロードバランサー

HA構成(ロードバランサーやデータベースサーバー) etc…

SPAに必要なインフラとは？

それって、いままでの普通のWebページ制作と一緒じゃん。

SPAに必要なインフラとは？

そうです、SPAだからといってインフラ何変わるの？って話。

SPAに必要なインフラとは？

やっぱり、SPAだから…

SPAに必要なインフラとは？

非同期通信(AJAX)

SPAに必要なインフラとは？

するよね!!

SPAに必要なインフラとは？

でも、それって別にリクエスト受けられれば、いままでかわら(ry

SPAに必要なインフラとは？

冗長化構成？負荷分散？

SPAに必要なインフラとは？

そんなのインフラ屋さんにお願いして…

SPAに必要なインフラとは？

フロントエンジニアは知らんよ、そんなの。

SPAに必要なインフラとは？

フルスタックエンジニア？なにそれ、おいしいの？

SPAに必要なインフラとは？

でも、フルスタックエンジニアとまでいかなくても、

全体の設計がイメージできないと

SPAアプリケーション作っていけるの？

SPAに必要なインフラとは？

アプリケーションできあがってから、

インフラ周りで困るとか、悲しい…

SPAに必要なインフラとは？

やっぱり、SPA設計したり構築する人は、インフラのことも気にしな

きゃダメじゃない？知ってて損はないよね！？

SPAに必要なインフラとは？

いやだから、それって別にリクエスト受けられれば、いままでかわら(ry

SPAに必要なインフラとは？

そうです。

SPAに必要なインフラとは？

単純にAJAX通信するとかだけなら、あまり変わらない。

SPAに必要なインフラとは？

HTML5といえば、WebSocketなんて使う場合、どうするの？

SPAに必要なインフラとは？

そんなのググって、socket.ioとか見つかってパクれば、

なんとか徹夜は回避でき(ry

SPAに必要なインフラとは？

実は、そんなわけにも行かない。

SPAに必要なインフラとは？

WebSocket、WebRTCなどの

コミュニケーション技術に関して欠かせないもの。

SPAに必要なインフラとは？

サーバー

SPAに必要なインフラとは？

知らなかったら開発環境すら作れないよ？

SPAに必要なインフラとは？

いや、だからnodeのサンプルコピってきて、

socket.io使って動かせばすぐじゃん…?

SPAに必要なインフラとは？

と思うじゃん？

SPAに必要なインフラとは？

node + socket.io

SPAに必要なインフラとは？

node + socket.io

確かに、ググるとWebSocketといればsocket.ioみたいな感じで、

記事一杯転がってるよね。

SPAに必要なインフラとは？

node + socket.io

確かに、ググるとWebSocketといればsocket.ioみたいな感じで、

記事一杯転がってるよね。

サンプルも簡単、双方向通信余裕♪

SPAに必要なインフラとは？

と思うじゃん？

SPAに必要なインフラとは？

その構成と同じ1台のsocket.ioサーバーで何人さばけんの？

SPAに必要なインフラとは？

スケールできるの？

SPAに必要なインフラとは？

できるよ!!（震え声）

SPAに必要なインフラとは？

RedisStore使ったりしてさ、

サイバー○ージェントさんとかよく書いてるじゃん！！

SPAに必要なインフラとは？

おまえ、それつくれんの？（上司）

SPAに必要なインフラとは？

理論的には…（震え声）

SPAに必要なインフラとは？

んじゃ、やって（上司）

SPAに必要なインフラとは？

マジンコ？

SPAに必要なインフラとは？

とならないためには、やっぱりフロントエンジニアといえども、

ネットワークインフラの事は、色々知っていて…

SPAに必要なインフラとは？

そして、何よりも触ったことがある経験値が重要。

SPAに必要なインフラとは？

でも、WebSocketやりたいけど、Redisの冗長化とか…監視…

nodeのインスタンスを複数立てて…

nodeのパフォーマンスどうよ…

SPAに必要なインフラとは？

レッツ、ググる生活開始

SPAに必要なインフラとは？

死にたい…

SPAに必要なインフラとは？

なんかいい方法ないの？

すっきり簡単なやつ!!

SPAに必要なインフラとは？

ということで、今日は勉強することが一杯のインフラの中でも、

WebSocketを利用するための環境に着目してみます。

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

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

Virt.xってなに？

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

Virt.xってなに？

SockJS

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

Virt.xってなに？

SockJS

SockJS サーバーを作ってみる

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

Virt.xってなに？

SockJS

SockJS サーバーを作ってみる

Hazelcastを利用したVert.xサーバーのクラスタリング

Virt.xってなに？

Vert.x is a polyglot, non-blocking, event-driven application

platform that runs on the JVM.

Virt.xってなに？

Vert.x は、JVM上で動作するポリグロット、ノンブロッキング、イベン

トドリブンなアプリケーションプラットフォームです。

Virt.xってなに？

ん？？よくわかんない…マニュアル的には…

ポリグロット?

ポリグロット?

アプリケーションをJavaScriptでも、RubyでもGroovyでもJavaで

もPythonでも記述することができます。

ポリグロット?

アプリケーションをJavaScriptでも、RubyでもGroovyでもJavaで

もPythonでも記述することができます。

そして、これら複数のプログラミング言語を交ぜて1つのアプリケー

ションを作ることができます。

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

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

Vert.xを使用すると、シングルスレッドとして、すべてのコードを書

くことができます。

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

Vert.xを使用すると、シングルスレッドとして、すべてのコードを書

くことができます。

マルチスレッド·プログラミングの多くの落とし穴から解放されます

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

Vert.xを使用すると、シングルスレッドとして、すべてのコードを書

くことができます。

マルチスレッド·プログラミングの多くの落とし穴から解放されます

非同期プログラミングモデルです！

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

Vert.xを使用すると、シングルスレッドとして、すべてのコードを書

くことができます。

マルチスレッド·プログラミングの多くの落とし穴から解放されます

非同期プログラミングモデルです！

イベントループというのがあって、Vert.xインスタンスがサーバー上

で利用可能なCPUコアにスレッドの数と一致するスレッド立てて稼

働することで、CPUコアを活かしきるよ！！

イベントバス

イベントバス

Vert.xは、アプリケーション·コンポーネントと簡単に通信すること

ができ、クライアントとサーバ側にまたがる分散イベントバス持って

います。

イベントバス

Vert.xは、アプリケーション·コンポーネントと簡単に通信すること

ができ、クライアントとサーバ側にまたがる分散イベントバス持って

います。

イベントバスを使って簡単に、いわゆるリアルタイムWebアプリ

ケーションを作成できるようにすることができます。

Virt.xってなに？

わかったようで、わからん…

Virt.xってなに？

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

Virt.xってなに？

つまりは、JavaScriptをはじめいろんな言語で構築できる

サーバーサイドの技術

Virt.xってなに？

そして、速い!!

Virt.xってなに？

nodeより速くて、なんかすごそうじゃん？

SockJS

SockJS - WebSocket emulation

SockJS

要するに、Socket.ioみたいにWebSocket使えない環境でもエミュレー

ションして、抽象レイヤーになってくれるよ!!

sockjs-client

様々なブラウザに、WebSocket

をはじめ、Streaming/Pollingで

対応している。

SockJS

すばらしいねっ！

SockJS

もちろんサーバーサイドの準備が必要な

んだけど、Vert.xは最初からSockJS

Serverを内蔵している!!

SockJS

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

SockJS サーバーを作ってみる

SockJS サーバーを作ってみる

SockJS サーバーコード作成

SockJS サーバーを作ってみる

SockJS サーバーコード作成

SockJS クライアントコード作成

構成図

Vert.x サーバー (SockJSサーバー)

ブラウザ (SockJSクライアント)

ブラウザ (SockJSクライアント)

ブラウザ (SockJSクライアント)

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

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);

これだけ!

セキュリティ設定

サーバー生成

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>

SockJS サーバーを作ってみる

SockJSサーバー起動 # vertx run app.js

SockJS サーバーを作ってみる

後ほどデモで動いてるところを見てもらいます。

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

これが動いたとしても…

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

さっき話してた、nodeとなんら話は変わってないじゃん。

スケールどうするのよ？とか。

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

なんかいい方法ないの？

すっきり簡単なやつ!!

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

Hazelcastがあるよ！

Hazelcastを利用したVert.xサーバーのクラスタリング

Vert.xに組み込まれているHazelcast、

クラスタリングは、XMLを設定するだけ！

という手軽さっ！

クラスタリング構成図

Vert.x サーバー (SockJSサーバー)

Vert.x サーバー (SockJSサーバー)

Vert.x サーバー (SockJSサーバー)

ローカルスイッチ

ブラウザ (SockJSクライアント)

ブラウザ (SockJSクライアント)

ブラウザ (SockJSクライアント)

/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

クラスタ起動

vertx run app.js -cluster

デモ

　　　　　　　　　さんのご協力で、

さくらのクラウド環境を借りて検証環境を作成しました。

表示されるIPアドレスなどは、そのうち消えます。

デモ

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

みんなで、つないでみよう!!

つながんなかったりしたら、すまん！！

当日のデモ中のみ有効

自粛

まとめ

まとめ

SPAでWebSocketやWebRTCを利用しない限り、

今までのWebアプリケーションインフラと大差は

無い。

まとめ

SPAでWebSocketやWebRTCを利用しない限り、

今までのWebアプリケーションインフラと大差は

無い。

Webサーバーに比べて、WebSocketサーバーのス

ケールは世の中的な経験値がまだ浅い？

まとめ

まとめ

Vert.xは、Javaでサーバーサイドが記述できるた

め、エンタープライズシーンではマッチしやすい？

まとめ

Vert.xは、Javaでサーバーサイドが記述できるた

め、エンタープライズシーンではマッチしやすい？

Hazelcastによるイベントバススケールアウトは、

超簡単、無停止でスケールさせることも可能。

まとめ

まとめ

Vert.xは、SockJS Serverを内蔵しているので、

さっくり実装できてよい。

まとめ

Vert.xは、SockJS Serverを内蔵しているので、

さっくり実装できてよい。

スケールしやすいし、速いし、多言語で実装できる

し、WebSocketのインフラを自信を持って提供で

きる!!（もちろん自分で試せよ!!）

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

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