配信システムをFlashからWebRTCにリプレイスしている話

Transcript

1. © DMM.com CONFIDENTIAL © DMM.com 配信システムをFlashから WebRTCにリプレイスしている DMM Meetup in 金沢 EC&デジタルコンテンツ本部　香林辰哉 2019/12/12 話
2. © DMM.com 自己紹介 • 香林 辰哉（こうりん たつや） • 2012年4月入社 • ライブ配信システムの開発、保守 ( Flash / Javascript ) • 2018年からリプレイス案件に参加 スノーボードの時期が来た 2
3. © DMM.com • 1対多で映像を視聴するサービス • チャット機能 • 1対1でのビデオチャット機能も搭載 ライブ配信システム 3 • 遅延が品質に大きく影響する
4. © DMM.com 2020年問題 4 • Adobe Flashが2020年末ブラウザサポート終了 • Flashにかわるシステムの構築が急務 • 段階的に終了に向けて進んでいる • 配信：WebRTC • フロント：HTML5 + Javascript
5. © DMM.com WebRTC 5 • Web Real-Time Communication • ブラウザ上でビデオチャットが出来る技術 • 各種ブラウザが徐々に対応してきた • 遅延が1秒未満
6. © DMM.com デモ 6 受信 送信
7. © DMM.com 基盤リプレイスは大変…！ 7 • 約3年にわたる大規模プロジェクト • プロジェクトを成功させるための工夫 • 開発手法 • 技術
8. © DMM.com 開発の 8 話
9. © DMM.com スクラム開発 9 • 開発 → テストを細かく回す • 1週間スプリントで都度軌道修正 • 業務を分担して対応 • フロントエンド開発メンバー • バックエンド開発メンバー
10. © DMM.com • スクラムイベントは変則的 • チーム間の連携も都度行う LeSS（Large-Scale Scrum） 10 • 六本木と金沢でそれぞれチームを編成 • 複数のプロダクトを並行で作っていける • 六本木とは常時映像共有 • チーム間の代表者が集まるイベントも
11. © DMM.com 開発の様子 11
12. © DMM.com スクラムイベントの様子 12
13. © DMM.com 技術的な 13 話
14. © DMM.com フロントエンド 14 • 言語：TypeScript & ES2015+ • FW：React + Redux • テスト：Jest + Enzyme • フォーマッタ：ESLint + Prettier • UI：Storybook、Atomic Design
15. © DMM.com Storybook 15
16. © DMM.com • APIサーバ：PHP + Laravel • DB、Webサーバは既存のものを利用 バックエンド 16 • AWS上で構築 • EC2 / ECS / S3 / ElastiCache / Lambda Elasticsearch Service / Cloud Front Route 53 / VPC / API Gateway
17. © DMM.com 今後の 17 話
18. © DMM.com • 来年度もリプレイス作業は続く 今後の予定 18 • 年明け以降のリリースに向けて最終調整中！ • β版としてFlash版と並行稼動 • スマホ対応 • 正式リリース etc...