Yusuke Wada a.k.a yusukebe 2013/10/26 Fukuoka Perl Workshop #24

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

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

3. Japan Perl Association
の
講師派遣制度を利用させて来ました
3

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

5. どこから来たの？
5

6. 6

7. すみかは？
7

8. 8

9. 本題の前に
YAPC::Asia 2013レポート的な何か
9

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

11. 概要
•
エンジニアのエンジニアによるエンジニア
のためのお祭り
•
• 同時4トラックが走る
トータル1,131人の参加者
11

12. 30days Albumより
http://30d.jp/yapcasia/6
12

13. 前夜祭 LTソン::Tiny
13

14. お祭り雰囲気
14

15. トーク
15

16. Perl入学式
16

17. Lightning Talks
17

18. オーディエンス
18

19. Hub
19

20. 引退
20

21. 以上
YAPC::Asia 2013
ありがとう！
21

22. さて…
22

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

24. 24

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

26. こういうの
26

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

28. 各種デバイス展開
•
• スマホ向けWeb
iOSアプリ
•
• Androidアプリ
PC向けWeb
28

29. 外部サービスとの連携
• Yahoo! JAPAN
百度 hao123
•
• PlayNow
goo
•
• Gunosy
etc.
•
ボケてセレクト
29

30. コラボ・スペシャルアカウント
•
• 企業さんがお題を提供
ユーザーがボケる
•
• バナー/告知ページ
二次利用なども
•
島耕作でボケれる！
30

31. ボケて自体の説明終わり
31

32. 開発の話
32

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

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

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

36. 便利な外部サービスでスケール
• Amazon Web Services
RDS, ElastiCache, SES ...
•
• Managedなミドルウェアを選択
GitHubプライベートレポジトリ
•
• Travis CI
Uptimer
•
などなど...
•
36

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

38. オモロキ
38

39. パートナー開発体制
ケースによって座組を変える
• コア = オモロキ
アプリ= オモロキ+ハロ＋ブレイブソフト
•
• コラボ= オモロキ+ハロ+キャッチボール
...
•
39

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

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

42. 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

43. 43

44. APIの実装
• 旧APIと同居させる
認証認可のためのパス
•
• 情報操作のためのパス
v1
アプリ
OAuth
v2
JSON-RPC
44

45. 方針
• 既存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

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

47. # 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

48. 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

49. API Playground
49

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

51. 誰かにWebのフロントを
担当してもらおう！
51

52. やまぴー
52

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

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

55. 俺「！！！」
55

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

57. 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

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

59. 例えばセッション管理
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

60. 特化した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. 今回の構造化のメリット
•
• 分業しやすい、開発者の冗長化
役割としてのフォーカスが明確になる
•
• フロントエンドはやまぴー
ロジックとフレームワークづくりに集中
•
• 他のことに手を付けられる！
テスタビリティが上がる
61

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

63. まとめ
63

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

65. おわり
質問等どーぞー
65