WebRTC開発者向けプラットフォーム SkyWayの裏側

WebRTC開発者向けプラットフォーム SkyWayの裏側

1. 1. SkyWayの裏裏側 NTTコミュニケーションズ 仲裕介@Tukimikage WebRTC開発者向けプラットフォーム h"ps://joind.in/15332
2. 2. ⾃自⼰己紹介 仲裕介（なかゆうすけ）@Tukimikage 所属：NTTコミュニケーションズ 　技術開発部 仕事： •  SkyWayの開発・運⽤用・サポート 　https://skyway.io –  仕事でコード書き始めて３年年位 •  HTML5  Experts.jp副編集⻑⾧長 　https://html5experts.jp/ コミュニティ活動： •  FuelPHP&CodeIgniterユーザの集い  主催 　https://atnd.org/events/70728 •  WebRTC  Meetup  Tokyo  主催 　https://atnd.org/events/70807
3. 3. 技術開発部（R&D）                     技術開発部とは？ Webコアテクノ ロジーユニット   ○○ユニット   ○○ユニット   ○○ユニット   各ユニットはユニットリーダーの裁量でかなりのことができる
4. 4. Webコアテクノロジーユニット     企業内スタートアップみたいなチーム h*ps://www.flickr.com/photos/heisenbergmedia/8409313926
5. 5. SkyWayってご存じですか？ WebRTC開発者向けプラットフォームSkyWay •  WebRTCを活用したアプリケー ションを開発することが出来る   •  2013/12/5サービス提供開始   •  トライアルサービス   •  無料です  
6. 6. •  SkyWayの裏裏側 –  ダメなところも良良い所もさらけ出す感じで –  皆さんの開発に少しでも役⽴立立つように •  ⼤大企業でスタートアップみたいなことやる のも悪く無いよ –  とはいえ、具体的な時間の関係で割愛 –  詳しくは同僚僚の資料料をご覧ください •  http://www.slideshare.net/td-‐‑‒nttcom/ss-‐‑‒51109460 今⽇日のセッションで伝えたいこと
7. 7. 本題の前にお付き合い下さい
8. 8. WebRTCとはなにか？ 従来のWeb WebRTC カメラやマイク を利用可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント間 の通信 リクエストとレ スポンスの繰 り返し カメラやマイク の利用不可 サーバ サーバ ブラウザだけでプラグインのインストール無しに、Web会議や ボイスチャット、テキストチャット、ファイル転送、電話など との連携が実現できる。
9. 9. WebRTCとはなにか？ 技術的には２つの側⾯面がある。 1.  ⾳音声、映像、データのリアルタイム・コミュニケーション のオープン標準 l  従来のサービス(WebEx、Skype等)は互換性がなく、独⾃自技術を含む。WebRTCは 相互接続が保証され、ライセンス使⽤用料料が不不要。 2.  ブラウザにかぎらず様々なデバイスで利利⽤用できる l  例例えば、オープンソースのC++のコードを利利⽤用しコンパイルすれば、ネイティブア プリにWebRTC機能を組み込むこともできる。
10. 10. •  WebRTC利利⽤用アプリを開発するためのPF SkyWayとはなにか？ 開発に必要なモノを提供   　・シグナリングAPI   　・STUN/TURN  API   　・JavaScript  SDK   　・iOS/Android  SDK   　・サンプルアプリ、拡張ライブラリ   　・日本語ドキュメント   　・開発者向けダッシュボード  
11. 11. •  WebRTCによるP2P通信を⾏行行うための各種APIを提供 SkyWayとはなにか？ STUN   API Signaling   API STUN   API ライブラリ ライブラリ APIとライブ   ラリが複雑な   処理を担う TURN   API
12. 12. •  開発者向けにはダッシュボードを提供 SkyWayとはなにか？ 開発に必要なモノを提供   　・APIキーの管理   　・利用状況の把握   　・今後も機能拡張予定   　・FuelPHP製
13. 13. SkyWayの裏裏側 （やっと本題、前置き⻑⾧長くてすみません）
14. 14. h*ps://ja.wikipedia.org/wiki/%E5%BC%93%E8% 開発の歴史を時系列で紹介
15. 15. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP１） プロジェクト 立ちあげ サービスリ リース！
16. 16. •  2013年年はじめプロジェクト開始 –  WebRTCはネットワークのレイヤからアプリケー ションレイヤまで幅広技術が必要とされる •  通信プロトコルはIETF、APIはW3Cで標準化 –  通信キャリアの強みを活かせる！ –  Web開発者にはハードルが⾼高い技術なので、そこを カバーするプラットフォームを作ろう！ SkyWayの開発の歴史（STEP１）
17. 17. •  ６⽉月ぐらいから開発に着⼿手 –  開発に関わったエンジニア２名（私含む）＋外注 SkyWayの開発の歴史（STEP１）
18. 18. •  ⾃自社クラウド基盤を利利⽤用（使い放題ｗ） SkyWayの開発の歴史（STEP１）
19. 19. •  サーバ構成 –  Cloudn •  FLAT  Type •  DNS –  Signaling •  Erlangで開発（時⾬雨堂） –  ユーザ管理理 •  Usergrid –  ダッシュボード •  運⽤用者向けの暫定版 SkyWayの開発の歴史（STEP１） Front Signaring/ STUN Springboard Internal  Dashboad SMTP STUN シグナリング FLAT KVS (Usergrid) CloudnDNS
20. 20. •  JavaScript  SDKはOSSをForkして公開 SkyWayの開発の歴史（STEP１）
21. 21. •  Webサイトはgh-‐‑‒pagesで公開（モダンな感じを出したかった・・） SkyWayの開発の歴史（STEP１） スクリーンショットは最近のもの
22. 22. 2013年年12⽉月5⽇日リリース！
23. 23. •  今は懐かしいおもひで・・・ –  マネジメント •  エンジニア不不⾜足！ •  タスク管理理はRedmine、コード管理理はGithub・・・チケットはどちら で管理理すれば？ –  クラウド構築 •  クラウド環境構築は全て⼿手作業（あと何回同じことやれば・・・・） •  すごく⻑⾧長い構築⼿手順書をちまちま書いた（もう⼆二度度と⾒見見ないパター ン） –  社内政治 •  オープンソース公開なんて前例例がないからすぐには無理理だ（は？） –  サービス開始後 •  開発者管理理は運⽤用者が⼿手動（メールとエクセルを駆使！） •  メール⾃自動送信マクロとか作ったよ（僕マクロ得意！） SkyWayの開発の歴史（STEP１）
24. 24. SkyWayの開発の歴史（STEP１） つかれた・・・
25. 25. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP2） 自動化時代の 幕開け 開発者向け ダッシュボード 公開
26. 26. •  インフラ構築⾃自動化時代の幕開け –  マネジメント •  デキるエンジニアが１名加わった！ •  開発チームの雰囲気が変わる！ –  クラウド構築 •  CloudnはFLAT→VPC（Virtual  Private  Cloudn）へ SkyWayの開発の歴史（STEP2）
27. 27. •  サーバは  　VPCタイプへ SkyWayの開発の歴史（STEP2） Front RDB Signaring/ STUN Springboard/Zabbix Front Back MT AP/Dashboard STUN シグナリング VPC(j1b) SMTP KVS (Usergrid) CloudnDNS
28. 28. •  インフラ構築⾃自動化時代の幕開け –  CI環境構築 •  サーバのプロビジョニングはChefで⾃自動化  　（アプリデプロイはexpectで・・・） •  ローカル検証環境はVagrantで構築 •  GitHub  Enterprise導⼊入（⾼高いけど導⼊入する価値あり） •  Jenkins導⼊入（定番やな） •  slack（話題のChatOpsだ！とはいってもまだ通知系のみ） –  開発者向けDashBoardの公開へ •  運⽤用を楽にする＆開発者の利利便便性を⾼高める SkyWayの開発の歴史（STEP2）
29. 29. SkyWayの開発の歴史（STEP2） Provision サーバ 開発マシン Pull  /  Push 運⽤用監視PM系 Pull  Request   Builder (PRトリガ) 障害通知 メール 送信擬似 通知 CI環境 Dev（ローカル開発環境） Stage(本番擬似環境) Production  (本番環境) Test  (インテグレーション)
30. 30. •  開発者向けDashBoard –  バックエンドApp •  フレームワーク –  FuelPHP  v1.7系（PHP5-‐‑‒FPM上で動作） –  データベース •  MySQL（新しいユーザはこちら） •  Usergridはまだ健在（前からのユーザはこちら） –  フロントエンドApp •  SPA（シングルページアプリケーション） •  MV○○なフレームワークは⾃自前で構築 •  Viewはjquery+JsRender •  altJSはTypeScript（オススメ！） •  CSSはScss •  タスクランナーはgrunt SkyWayの開発の歴史（STEP2）
31. 31. •  FuelPHPとは？ –  PHP製WebAPフレームワーク –  1系はPHP5.3.3以上  （2系はデルデル詐欺かもｗ） –  MITライセンス –  ⽇日本語ドキュメントや書籍多数 –  機能 •  HMVC （Hierarchical  Model  View  Controller） •  RestAPI⽤用コントローラー •  ORM •  DB  Migration •  各種脆弱性対策 •  テンプレートエンジン •  Composer対応 •  独⾃自パッケージ管理理 •  oilコマンドによるスキャフォールディング •  コマンドラインでのタスク実⾏行行機能 •  PHPUnitを統合 SkyWayの開発の歴史（STEP2）
32. 32. •  FuelPHP実装 –  ユーザ認証 •  ormauthを利利⽤用 –  ORMでデータベースアクセスするので親和性がいい –  かなりのテーブルが初期作成されるけど殆ど使わない –  ID  or  メールアドレス/パスワードではなく、メールア ドレス/パスワードでログイン出来るように運⽤用対処 •  ソーシャルログイン連携 –  Opauthを利利⽤用する予定（まだ実装できてない・・・） SkyWayの開発の歴史（STEP2）
33. 33. •  FuelPHP実装 –  コンフィグ管理理 •  Appに関するコンフィグは１つにまとめる –  config.phpのAutoloadでカスタムコンフィグを指定 •  ４つの環境でコンフィグ管理理 –  development  :  ローカル開発環境 –  test  ：  インテグレーション環境 –  stage    ： 　本番擬似環境 –  production  ： 　本番環境 SkyWayの開発の歴史（STEP2）
34. 34. •  FuelPHP実装 –  ルーティング •  コント­−ローラー名を隠す •  RestAPIのルーティングもスマートに SkyWayの開発の歴史（STEP2）  ’xxxxxxxxx'  =>  'main/xxxxxxxxxx', ’xxxxxx/正規表現'  =>    array(                  array('GET',  new  Route(’xxxxxx/index/$1')),                  array('POST',  new  Route('xxxxxx/index/$1')),                  array('PUT',  new  Route('xxxxxx/index/$1')),                  array('DELETE',  new  Route('xxxxxx/index/$1')),          ),
35. 35. •  FuelPHP実装例例 –  テスティング •  ユニットテストはPHPUnit –  テストグループを細かく切切ってデバッグしやすく –  例例外発⽣生すると⼤大変だけどね・・・ •  機能テスト（コント­−ローラーのテスト）はPHPUnit+Goutte –  SPAの遷移以外はGoutteでスクレイピングしてテスト –  RestAPIもGoutteでテスト SkyWayの開発の歴史（STEP2）
36. 36. •  FuelPHP実装例例 –  Oilタスク •  運⽤用者向け機能はOilタスクで実装 –  DBの移⾏行行ツールとか –  Authパッケージのディフォルトユーザ削除⽤用とか・・ SkyWayの開発の歴史（STEP2）
37. 37. •  FuelPHP実装例例 –  SPA(シングルページアプリケーション) •  サーバサイドレンダリングからクライアントサイドレンダ リングへ •  様々なフロントエンドフレームワークの登場でクライアン トがリッチに •  タスクランナーやビルドツールなどの台頭 •  設計など課題も多い –  SPAを構築するときに知っておいた⽅方がいい7つの課題 　 　 http://blog.mitsuruog.info/2014/01/spa7.html SkyWayの開発の歴史（STEP2）
38. 38. •  FuelPHP実装例例 –  SPAとの連携を⾏行行う上での決め頃 •  SPAとそれ以外の棲み分け –  今はログイン後前で分けている •  プロジェクト上のFuelPHPとSPAの同居⽅方法 •  レンダリングの棲み分け •  テストの棲み分け SkyWayの開発の歴史（STEP2）
39. 39. •  FuelPHP実装例例 –  プロジェクト上のFuelPHPとSPAの同居⽅方法 •  開発⽤用ファイルは  /scripts  へ設置し開発 •  コンパイル時に  　  public/assets/(css  or  js)/src  に出⼒力力 •  ビルド時にminify、結合、  　public/assets/(css  or  js)/dist  に出⼒力力 •  ドキュメントルートは  public/  に設定 SkyWayの開発の歴史（STEP2）
40. 40. •  FuelPHP実装例例 –  レンダリングのすみ分け •  FuelPHPのViewファイルでHTMLをレンダリング •  jsTemplate部分をjs側でDom⽣生成 SkyWayの開発の歴史（STEP2） home copyright alert jsTemplate loadfiles s i d e m e n u activationalert  default
41. 41. •  FuelPHP実装例例 –  テストの棲み分け •  サーバとクライアントのテストの役割 –  サーバサイド »  ユニットテスト：Modelの実装を担保 »  機能テスト：Controllerの実装を担保 –  クライアントサイド（まだ規模が⼩小さいため⼀一部しかやってない・・） »  ユニットテスト：functionの実装を担保 •  スタブ、ドライバを⽤用意する必要あり »  UIテスト：SPAに関係するUIの動きを担保 •  seleniumとか使うと幸せに SkyWayの開発の歴史（STEP2）
42. 42. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP3/4） 自動化を更に 加速   TURNサー バ公開！ iOS/Android   SDK公開 他
43. 43. •  ⾃自動化を更更に加速 –  CI環境変更更 •  CloudnのAPIを叩いてVM等作成プロビジョニング⾃自動化 –  Cloud  Formationぽいやつを開発 •  ChefからAnsibleへ –  Chefは柔軟で複雑な処理理がかけるが学習コスト⾼高い –  SkyWayはシンプルな構成なのでAnsibleを選択 –  アプリはAnsibleでブルーグリーデプロイ •  インフラテスト –  ServerSpec導⼊入 –  チケット管理理 •  huboard導⼊入 SkyWayの開発の歴史（STEP3/4）
44. 44. •  過去の遺産の整理理と新機能追加などなど・・・ –  データベースの統合 •  Usergridを完全にMySQLに巻き取り •  移⾏行行ツールはFuelPHPのoilで作成 –  TURNサービスを開始 •  TURNサーバをErlangで開発 •  現在は  rfc5766-‐‑‒turn-‐‑‒server  を利利⽤用 •  認証管理理にRedisを導⼊入 –  ⾳音声認識識（Speech  to  Text）機能追加 •  詳しくは省省略略 •  Redis  Sentinelの導⼊入（TURNのRedisとは別） •  Luaの利利⽤用 –  iOS/Android  SDK等の公開 •  エンジニア２名増員！ •  利利⽤用者増加傾向 SkyWayの開発の歴史（STEP3/4）
45. 45. SkyWayの開発の歴史（STEP３） 開発マシン Pull  /  Push 運⽤用監視PM系 Pull  Request   Builder (PRトリガ) 障害通知 内製 Cloud Formation   ぽいやつ メール 送信擬似 通知 CI環境 Dev（ローカル開発環境） Stage(本番擬似環境) Production  (本番環境) Test  (インテグレーション)
46. 46. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP5） システム冗長化   ログ収集解析  
47. 47. •  システム冗⻑⾧長化（doing） –  Consul  ClusterとCloudnのマルチリージョンで冗⻑⾧長化 •  今は１系のみです •  １０⽉月中には移⾏行行予定 –  Redis⼀一本化 •  TURNの認証もSentinel側に集約 –  CI環境変更更 •  jenkinsからdrone.ioへ •  drone.ioはコンテナベースでCIできる •  マイクロサービスアーキテクチャ SkyWayの開発の歴史（STEP5）
48. 48. •  Log収集解析機能（doing） –  各サーバのLogをfluentdで収集 –  解析してサービス、サポート品質向上につなげる予定 •  新機能も開発中（ひみつだけどね） SkyWayの開発の歴史（STEP5）
49. 49. •  Golang採⽤用（doing） –  Cloudnプロビジョニングツールの⼀一部をGolangに… •  １バイナリで動くので楽ちん •  ツール開発相性いい！ SkyWayの開発の歴史（STEP5）
50. 50. Front   (ACT) Signaling   (ACT/SBY)   Redis  x  3   j1a Springboard   AP/Dashboard STUN&TURN以外（LBA） Redis  x  2   (ACT/SBY)   Front   (ACT) PeerSV   (ACT/SBY)   Redis  x  3   j1b AP/Dashboard Redis  x  2   (ACT/SBY)   TURN   TURN   Cloudn   RDB/ACT   (FLAT上) Cloudn   RDB/SBY   (FLAT上) Log   (ACT) Log   (ACT) SpeechRec   (ACT)   Springboard   Zabbix   音声 Consul  SV   x2   Consul  SV   x1   STUN&TURN STUN&TURN Consul  Cluster Cloudn ObjectStorage doing（設計中のドキュメントからの抜粋） 開発中なので変更更になる可能性があります
51. 51. これからもSkyWayは進化します （ながくてすみません・・・もう終わりますから）
52. 52. •  私の組織の話 •  WebRTCとはなにか？ •  SkyWayとはなにか？ •  SkyWayの裏裏側 –  開発の歴史を時系列列で紹介 まとめ
53. 53. ご清聴ありがとうございました