The master plan of scaling a web application

  • 4,716 views
Uploaded on

Yusuke Wada a.k.a yusukebe …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,716
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
6
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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