エンジニア向けライブ配信サービスの技術構成
はじめに
StackLiveというエンジニア向けライブ配信サービスを作りました。技術記事の解説や、作業風景の配信をしながらエンジニア同士でコミュニケーションがとれるサービスです。
投げ銭機能で対価を得ることも可能となります！
今回はStackLiveを支える技術について解説していこうと思います。
フロントエンド
React
フロントエンドにはReactを使っています。ライブ配信サービスなので、検索エンジンからの流入はあまり想定していない為、SPAで構築しています。今後は学習コストと比較してTypeScriptの導入も検討しています。
Tailwind css
cssのフレームワークには人気のTailwindを使用しています。クラス名を考えなくて良い点や、再利用しやすい観点からとても重宝しています。
インフラ
Amplify
サーバーレスでサイトを作りたかったので、評価の高いAmplifyを使いました。
AppSync
amplify add apicliで簡単に導入できるGraphQL APIです。接続先にDynamoDBやLambdaを指定して操作する事ができてとても便利です。WebSocketを使用したリアルタイムの通信も簡単に実装してくれるのでおすすめです。
Cognito
amplify add authcliで導入できる、ユーザーのサインアップ/サインインを追加できるサービスです。基本的にCognitoにユーザーの認証周りの管理を任せてます。
※デフォルトだと認証メールを一日に50件しか送れません。Amazon SES経由でのメール送信に切り替えると無制限になるのでリリースする際には変更しておきましょう。
DynamoDB
Appsyncを使ってDynamoDBにデータを挿入したり、編集したりすることができます。これまではMySQLを触る機会が多かったので初めてのNoSQLで当初は設計にすごく悩みました。
また、後述するのですがDynamnoDBは検索機能やページングなどが厄介です。このサービスではAmazon Elasticsearchを導入して検索機能は補っています。
Amazon Elasticsearch
上記で記述しましたが、DynamoDBで検索機能を実装するととても難しいです。というか僕の技術力ではできませんでした。そこで検索エンジンとして有名なElasticsearchと合わせて実装することにしました。具体的には以下のような構成です。
DynamoDB StreamとはAPIを使ってDynamoDBテーブルのデータに変更が発生された瞬間、この変更事項をイベントストリームの形で処理できる機能です。イベントが発火されるとElasticsearch内のデータにも同じように変更してくれます。
アーキテクチャ
StackLiveを支える全体の技術構成は以下のようになっています。
配信周りの技術
Amazon Interactive Video Service(IVS)を検討していた
当初配信周りはIVSという低レイテンシーで簡単にセットアップしてくれるサービスで構築しようと考えていました。ただIVSだと配信する為にサードパーティーが必要になりUX的に良くないなと考えやめました。またStackLiveはエンジニア向けなので画面共有が主になるので顔などを映す必要はないなと思ったのも理由の1つです。
clubhouseでも使用しているAgoraを導入
結論からこのサービスではAgoraを導入しています。導入した理由としてはZoomやMeetなどのようにブラウザで手軽に画面共有ができて低レイテンシーであるためです。
具体的には以下のような構成になっています。
トークン生成などはLambda内で処理しています。具体的なAgoraの使い方などはまた今度記事にしたいと思います。
視聴者数はLambdaの定期実行機能を使って、1分間に1回AgoraのAPIを叩き視聴者数を取得しDBを更新しています。
今後の機能追加予定
- レター機能
- 有料配信
- アーカイブ
- 予約配信
今は完全に個人開発ですが、今後は信頼できる仲間と組織っぽくしていけたらと思っています。
まとめ
今回実装した方法の中でかなり非効率なものもあると思ってます。効率的な方法を知っている方がいらっしゃいましたら、是非ご教授お願いいたします。
なぜこのサービスを作ったのかなどはQiitaの記事に書いてます。ご興味ある方は一度覗いてみてください。
Discussion