WebRTC開発者向けプラットフォーム SkyWayの裏側
16 likes28,239 views
PHPカンファレンス2015の講演資料です。 SkyWayのインフラ回りをざっくりまとめた資料です。 FuelPHPの話が含まれます。 SkyWayは無料ですがプラットフォームはしっかり作りこんでますので、ぜひご利用下さい。
WebRTC開発者向けプラットフォーム SkyWayの裏側
- 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. 技術開発部（R&D） 技術開発部とは？ Webコアテクノ ロジーユニット ○○ユニット ○○ユニット ○○ユニット 各ユニットはユニットリーダーの裁量でかなりのことができる
- 5. SkyWayってご存じですか？ WebRTC開発者向けプラットフォームSkyWay • WebRTCを活用したアプリケー ションを開発することが出来る • 2013/12/5サービス提供開始 • トライアルサービス • 無料です
- 6. • SkyWayの裏裏側 – ダメなところも良良い所もさらけ出す感じで – 皆さんの開発に少しでも役⽴立立つように • ⼤大企業でスタートアップみたいなことやる のも悪く無いよ – とはいえ、具体的な時間の関係で割愛 – 詳しくは同僚僚の資料料をご覧ください • http://www.slideshare.net/td-‐‑‒nttcom/ss-‐‑‒51109460 今⽇日のセッションで伝えたいこと
- 9. WebRTCとはなにか？ 技術的には２つの側⾯面がある。 1. ⾳音声、映像、データのリアルタイム・コミュニケーション のオープン標準 l 従来のサービス(WebEx、Skype等)は互換性がなく、独⾃自技術を含む。WebRTCは 相互接続が保証され、ライセンス使⽤用料料が不不要。 2. ブラウザにかぎらず様々なデバイスで利利⽤用できる l 例例えば、オープンソースのC++のコードを利利⽤用しコンパイルすれば、ネイティブア プリにWebRTC機能を組み込むこともできる。
- 10. • WebRTC利利⽤用アプリを開発するためのPF SkyWayとはなにか？ 開発に必要なモノを提供 ・シグナリングAPI ・STUN/TURN API ・JavaScript SDK ・iOS/Android SDK ・サンプルアプリ、拡張ライブラリ ・日本語ドキュメント ・開発者向けダッシュボード
- 11. • WebRTCによるP2P通信を⾏行行うための各種APIを提供 SkyWayとはなにか？ STUN API Signaling API STUN API ライブラリ ライブラリ APIとライブ ラリが複雑な 処理を担う TURN API
- 12. • 開発者向けにはダッシュボードを提供 SkyWayとはなにか？ 開発に必要なモノを提供 ・APIキーの管理 ・利用状況の把握 ・今後も機能拡張予定 ・FuelPHP製
- 15. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP１） プロジェクト 立ちあげ サービスリ リース！
- 16. • 2013年年はじめプロジェクト開始 – WebRTCはネットワークのレイヤからアプリケー ションレイヤまで幅広技術が必要とされる • 通信プロトコルはIETF、APIはW3Cで標準化 – 通信キャリアの強みを活かせる！ – Web開発者にはハードルが⾼高い技術なので、そこを カバーするプラットフォームを作ろう！ SkyWayの開発の歴史（STEP１）
- 19. • サーバ構成 – Cloudn • FLAT Type • DNS – Signaling • Erlangで開発（時⾬雨堂） – ユーザ管理理 • Usergrid – ダッシュボード • 運⽤用者向けの暫定版 SkyWayの開発の歴史（STEP１） Front Signaring/ STUN Springboard Internal Dashboad SMTP STUN シグナリング FLAT KVS (Usergrid) CloudnDNS
- 23. • 今は懐かしいおもひで・・・ – マネジメント • エンジニア不不⾜足！ • タスク管理理はRedmine、コード管理理はGithub・・・チケットはどちら で管理理すれば？ – クラウド構築 • クラウド環境構築は全て⼿手作業（あと何回同じことやれば・・・・） • すごく⻑⾧長い構築⼿手順書をちまちま書いた（もう⼆二度度と⾒見見ないパター ン） – 社内政治 • オープンソース公開なんて前例例がないからすぐには無理理だ（は？） – サービス開始後 • 開発者管理理は運⽤用者が⼿手動（メールとエクセルを駆使！） • メール⾃自動送信マクロとか作ったよ（僕マクロ得意！） SkyWayの開発の歴史（STEP１）
- 25. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP2） 自動化時代の 幕開け 開発者向け ダッシュボード 公開
- 26. • インフラ構築⾃自動化時代の幕開け – マネジメント • デキるエンジニアが１名加わった！ • 開発チームの雰囲気が変わる！ – クラウド構築 • CloudnはFLAT→VPC（Virtual Private Cloudn）へ SkyWayの開発の歴史（STEP2）
- 28. • インフラ構築⾃自動化時代の幕開け – CI環境構築 • サーバのプロビジョニングはChefで⾃自動化 （アプリデプロイはexpectで・・・） • ローカル検証環境はVagrantで構築 • GitHub Enterprise導⼊入（⾼高いけど導⼊入する価値あり） • Jenkins導⼊入（定番やな） • slack（話題のChatOpsだ！とはいってもまだ通知系のみ） – 開発者向けDashBoardの公開へ • 運⽤用を楽にする＆開発者の利利便便性を⾼高める SkyWayの開発の歴史（STEP2）
- 29. SkyWayの開発の歴史（STEP2） Provision サーバ 開発マシン Pull / Push 運⽤用監視PM系 Pull Request Builder (PRトリガ) 障害通知 メール 送信擬似 通知 CI環境 Dev（ローカル開発環境） Stage(本番擬似環境) Production (本番環境) Test (インテグレーション)
- 30. • 開発者向けDashBoard – バックエンドApp • フレームワーク – FuelPHP v1.7系（PHP5-‐‑‒FPM上で動作） – データベース • MySQL（新しいユーザはこちら） • Usergridはまだ健在（前からのユーザはこちら） – フロントエンドApp • SPA（シングルページアプリケーション） • MV○○なフレームワークは⾃自前で構築 • Viewはjquery+JsRender • altJSはTypeScript（オススメ！） • CSSはScss • タスクランナーはgrunt SkyWayの開発の歴史（STEP2）
- 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. • FuelPHP実装 – ユーザ認証 • ormauthを利利⽤用 – ORMでデータベースアクセスするので親和性がいい – かなりのテーブルが初期作成されるけど殆ど使わない – ID or メールアドレス/パスワードではなく、メールア ドレス/パスワードでログイン出来るように運⽤用対処 • ソーシャルログイン連携 – Opauthを利利⽤用する予定（まだ実装できてない・・・） SkyWayの開発の歴史（STEP2）
- 33. • FuelPHP実装 – コンフィグ管理理 • Appに関するコンフィグは１つにまとめる – config.phpのAutoloadでカスタムコンフィグを指定 • ４つの環境でコンフィグ管理理 – development : ローカル開発環境 – test ： インテグレーション環境 – stage ： 本番擬似環境 – production ： 本番環境 SkyWayの開発の歴史（STEP2）
- 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. • FuelPHP実装例例 – テスティング • ユニットテストはPHPUnit – テストグループを細かく切切ってデバッグしやすく – 例例外発⽣生すると⼤大変だけどね・・・ • 機能テスト（コント−ローラーのテスト）はPHPUnit+Goutte – SPAの遷移以外はGoutteでスクレイピングしてテスト – RestAPIもGoutteでテスト SkyWayの開発の歴史（STEP2）
- 36. • FuelPHP実装例例 – Oilタスク • 運⽤用者向け機能はOilタスクで実装 – DBの移⾏行行ツールとか – Authパッケージのディフォルトユーザ削除⽤用とか・・ SkyWayの開発の歴史（STEP2）
- 37. • FuelPHP実装例例 – SPA(シングルページアプリケーション) • サーバサイドレンダリングからクライアントサイドレンダ リングへ • 様々なフロントエンドフレームワークの登場でクライアン トがリッチに • タスクランナーやビルドツールなどの台頭 • 設計など課題も多い – SPAを構築するときに知っておいた⽅方がいい7つの課題 http://blog.mitsuruog.info/2014/01/spa7.html SkyWayの開発の歴史（STEP2）
- 38. • FuelPHP実装例例 – SPAとの連携を⾏行行う上での決め頃 • SPAとそれ以外の棲み分け – 今はログイン後前で分けている • プロジェクト上のFuelPHPとSPAの同居⽅方法 • レンダリングの棲み分け • テストの棲み分け SkyWayの開発の歴史（STEP2）
- 39. • FuelPHP実装例例 – プロジェクト上のFuelPHPとSPAの同居⽅方法 • 開発⽤用ファイルは /scripts へ設置し開発 • コンパイル時に public/assets/(css or js)/src に出⼒力力 • ビルド時にminify、結合、 public/assets/(css or js)/dist に出⼒力力 • ドキュメントルートは public/ に設定 SkyWayの開発の歴史（STEP2）
- 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. • FuelPHP実装例例 – テストの棲み分け • サーバとクライアントのテストの役割 – サーバサイド » ユニットテスト：Modelの実装を担保 » 機能テスト：Controllerの実装を担保 – クライアントサイド（まだ規模が⼩小さいため⼀一部しかやってない・・） » ユニットテスト：functionの実装を担保 • スタブ、ドライバを⽤用意する必要あり » UIテスト：SPAに関係するUIの動きを担保 • seleniumとか使うと幸せに SkyWayの開発の歴史（STEP2）
- 42. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP3/4） 自動化を更に 加速 TURNサー バ公開！ iOS/Android SDK公開 他
- 43. • ⾃自動化を更更に加速 – CI環境変更更 • CloudnのAPIを叩いてVM等作成プロビジョニング⾃自動化 – Cloud Formationぽいやつを開発 • ChefからAnsibleへ – Chefは柔軟で複雑な処理理がかけるが学習コスト⾼高い – SkyWayはシンプルな構成なのでAnsibleを選択 – アプリはAnsibleでブルーグリーデプロイ • インフラテスト – ServerSpec導⼊入 – チケット管理理 • huboard導⼊入 SkyWayの開発の歴史（STEP3/4）
- 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. SkyWayの開発の歴史（STEP３） 開発マシン Pull / Push 運⽤用監視PM系 Pull Request Builder (PRトリガ) 障害通知 内製 Cloud Formation ぽいやつ メール 送信擬似 通知 CI環境 Dev（ローカル開発環境） Stage(本番擬似環境) Production (本番環境) Test (インテグレーション)
- 46. 2013/04 2013/12 2014/06 2014/10 2015/01 2015/07 2015/10 SkyWayの開発の歴史（STEP5） システム冗長化 ログ収集解析
- 47. • システム冗⻑⾧長化（doing） – Consul ClusterとCloudnのマルチリージョンで冗⻑⾧長化 • 今は１系のみです • １０⽉月中には移⾏行行予定 – Redis⼀一本化 • TURNの認証もSentinel側に集約 – CI環境変更更 • jenkinsからdrone.ioへ • drone.ioはコンテナベースでCIできる • マイクロサービスアーキテクチャ SkyWayの開発の歴史（STEP5）
- 48. • Log収集解析機能（doing） – 各サーバのLogをfluentdで収集 – 解析してサービス、サポート品質向上につなげる予定 • 新機能も開発中（ひみつだけどね） SkyWayの開発の歴史（STEP5）
- 49. • Golang採⽤用（doing） – Cloudnプロビジョニングツールの⼀一部をGolangに… • １バイナリで動くので楽ちん • ツール開発相性いい！ SkyWayの開発の歴史（STEP5）
- 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（設計中のドキュメントからの抜粋） 開発中なので変更更になる可能性があります
- 52. • 私の組織の話 • WebRTCとはなにか？ • SkyWayとはなにか？ • SkyWayの裏裏側 – 開発の歴史を時系列列で紹介 まとめ
- 53. ご清聴ありがとうございました