知識・ノウハウの体系化・...知識・ノウハウの体系化・ 情報通信 共有化の研究 ライフデザイン学部 …経営コミュニケーション学科/オントロジー、ナレッジマネジメント、情報システム
Spa のための web サーバ構築ノウハウ
-
Upload
kazuhiro-kotsutsumi -
Category
Technology
-
view
2.824 -
download
4
description
Transcript of Spa のための web サーバ構築ノウハウ
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 サーバー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
みんなで、つないでみよう!!
つながんなかったりしたら、すまん!!
当日のデモ中のみ有効
自粛
まとめ
まとめ
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を、是非お試しください!!
ご清聴ありがとうございました!