狠狠撸

The master plan of
scaling a web application
Yusuke Wada a.k.a yusukebe
2013/10/26
Fukuoka Perl Workshop #24

1

本日の使用フォント
やさしさゴシック
http://www.fontna.com/blog/379/

2

Japan Perl Association

の

講師派遣制度を利用させて来ました

3

自己紹介

?
? (株)ワディット代表取締役
(株)オモロキ取締役兼最高技術責任者
?
? Webアプリケーションデベロッパー
物書きも少々…
?
? 独身…
和田裕介 1981年12月23日生

4

本題の前に

YAPC::Asia 2013レポート的な何か

9

YAPC::Aasia 2013 in Tokyo
9月19,20,21日
慶應義塾日吉キャンパス内協生館

10

概要

?

エンジニアのエンジニアによるエンジニア
のためのお祭り

?
? 同時4トラックが走る

トータル1,131人の参加者

11

30days Albumより

http://30d.jp/yapcasia/6

12

以上

YAPC::Asia 2013

ありがとう！

21

本日の題材
「最近なに開発してるか」

23

ボケて

? 国内最大級のお笑いWebサービス...らしい！
3秒で笑えるがコンセプト
?
オモロキがコアとなって開発?運営
?

25

参考データ

?
? 月間お題投稿数3万件
月間ボケ投稿数120万件
?
? モバイルアプリは200万インストール
合計ボケ投稿数1,100万ボケ
?
ほげほげページビュー

27

各種デバイス展開

?
? スマホ向けWeb
iOSアプリ
?
? Androidアプリ
PC向けWeb

28

外部サービスとの連携

? Yahoo! JAPAN
百度 hao123
?
? PlayNow
goo
?
? Gunosy
etc.
?

ボケてセレクト
29

コラボ?スペシャルアカウント

?
? 企業さんがお題を提供
ユーザーがボケる
?
? バナー/告知ページ
二次利用なども
?
島耕作でボケれる！

30

ボケて自体の説明終わり

31

Bokete versions

? Alpha - リリース前の試験版
Beta
- 2008年8月リリース
?
? Gamma - 2009年5月リリース
Delta - 2012年7月リリース
?
? Epsilon - 次期バージョン
33

全ての開発?運用を一人で担当
＊モバイルアプリを除く

34

人的リソースは増やさない

35

便利な外部サービスでスケール

? Amazon Web Services

RDS, ElastiCache, SES ...
?
? Managedなミドルウェアを選択
GitHubプライベートレポジトリ
?
? Travis CI

Uptimer

?
などなど...
?
36

ただ、正直しんどい...

37

パートナー開発体制
ケースによって座組を変える

? コア = オモロキ
アプリ= オモロキ+ハロ＋ブレイブソフト
?
? コラボ= オモロキ+ハロ+キャッチボール
...
?
39

割り切った分業化を提案

? API Version 2を作成
ほぼ全機能をWeb APIで提供
?
? モバイルアプリだけではなくWebでも利用
Webのフロント部分を誰かに移譲
?
? 言語はなんでもよい！
40

Web API v2

?
? 既存の仕様を利用する
JSON-RPC 2.0
?
? OAuth 2.0
API = Web でネットワークレイテンシ
?
? 割りきって無視をする
コアのロジックを全て実装し提供

41

JSON-RPC
# POST to SERVER

!
{‘jsonrpc’: ‘2.0’, ‘method’: ‘/boke/recent’, ‘params’: {‘limit’: 10}, ‘id’: 1}

!
!
# Response BODY
{‘jsonrpc’: ‘2.0’, ‘result’: { entries = […] }, ‘id’: 1}

シンプルなフォーマット
POSTでリクエスト
もちろんJSONフォーマット
42

APIの実装

? 旧APIと同居させる
認証認可のためのパス
?
? 情報操作のためのパス
v1
アプリ

OAuth
v2
JSON-RPC
44

方針

? 既存WAFは使わない = 素Plackアプリ
OAuth::Lite2 + JSON::RPCを利用
?
./lib/Bokete/WebAPIv2
## Dispatcher.pm
## OAuth/
$?? ## Controller/
$?? $?? ## OAuth.pm
$?? $?? ## Root.pm
$?? ## Controller.pm
$?? ## DataHandler.pm
$?? ## Dispatcher.pm
## RPC/
## Dispatcher.pm
## Filter.pm
## Handler/
$?? ## Boke.pm
$?? ## Root.pm
## Handler.pm
## Router.pm

45

OAuth::Lite2

?
? mixiでの利用実績あり？
継承して中身を実装する
?
? OAuth::Lite2::Server::DataHandler
code認証、password認証などに対応
?
Provider実装も含まれている

46

# In your controller

!
use Plack::Middleware::Auth::OAuth2::ProtectedResurce;

!
my $middleware =
Plack::Middleware::Auth::OAuth2::ProtectedResource-new(
data_handler = 'Bokete::WebAPIv2::OAuth::DataHandler',
app = sub {},
);
$middleware-call($self-request-env);

!
if(my $user_id = $self-req-env-{REMOTE_USER}) {
my $user = $self-model('User')-find({ id = $user_id });
$self-stash-{user} = $user;
}else{
$self-stash-{user} = undef;
}

47

JSON::RPC

?
? ルータにRouter::Simpleを利用している
まかまかさん=牧さん

my $router = Router::Simple;
$router-connect( 'get_info' = {
handler = 'Hoge::Handler::Root',
action = 'get_info'
});
my $dispatch = JSON::RPC::Dispatch-new( router = $router );
...;
sub psgi_app {
$dispatch-handle_psgi($env);
}

48

ほぼAPI側のフレームワークは完成！

50

誰かにWebのフロントを

担当してもらおう！

51

俺「フロントの言語は何でもいいよ」

53

やまぴー「Perlでやります！」

54

ってことでやまぴーと一緒に

? Boketeのシステム部分をはじめて分業
? マネージメントツールをGitHubに寄せる
? レポジトリ
? イシュー管理
? ドキュメント管理
? 積極的に対面して一緒に作業する
? フロントはMojoliciousで実装する
56

Bokete::Front::*

? やまぴーが使いやすいフレームワーク作成
# presudo code
!

get '/boke/recent' = sub {
my $self = shift;
my $result = $self-call_api({
method = '/boke/recent',
params = { limit = 10 }
});
$self-stash-{entries} = $result-{entries};
$self-render();
};
57

提供するライブラリなど

? Mojoliciousに特化したセッション管理
認証とAPIのコールをラップするUA
?
? CSRF対策
アプリのフレームワーク
?
作法をつくる
58

例えばセッション管理
my $session;

!
...;

!
$self-hook(
around_dispatch = sub {
my ( $next, $c ) =@_;
$session = Bokete::Session-new( request = $c-req );
$next-();
$session-finalize( response = $c-res );
}
);

!
...;

!
$self-helper(
bokete_session = sub { return $session }
);
59

特化したUserAgent
my $ua = Bokete::Front::UserAgent-new(
client_id = ‘xxxxxx’,
client_secret = ‘xxxxxx’,
access_token_uri = ‘xxxxxx’,
rpc_endpoint_uri = ‘xxxxxx’
);

!
my $token = $ua-get_token({
username = ‘xxxxxx’,
password = ‘xxxxxx’
});

!
# OAuthヘッダを設定しつつJSON-RPCをコールする
my $result = $ua-call({
access_token = $token-access_token,
method = ‘hello’,
params = { message = ‘foo’ }
});
60

今回の構造化のメリット

?
? 分業しやすい、開発者の冗長化
役割としてのフォーカスが明確になる
?
? フロントエンドはやまぴー
ロジックとフレームワークづくりに集中
?
? 他のことに手を付けられる！
テスタビリティが上がる

61

今後やりたいこと

?
? 死活監視?リソース監視?チューニング
開発?CI環境の整備
?
? コンテンツデータの解析
新機能の実験
?
? Growth Hacks的なこと
インフラ周りの強化

62

今やってるWebアプリの構造化

? HTTPレベルで一つのアプリを切り離す
APIサーバ
?
? OAuth認証
JSON-RPCによる情報操作API
?
? 分業出来てフォーカスが絞れる
絶賛開発中
?
? ウマくいけばやれることが広がる！
64

おわり

質問等どーぞー

65

狠狠撸

The master plan ofscaling a web application

More Related Content

The master plan ofscaling a web application

狠狠撸

The master plan of scaling a web application

More Related Content

The master plan of scaling a web application

The master plan ofscaling a web application

The master plan ofscaling a web application