水曜どうでしょうエアキャラバンin 赤平2020
10/3(土)・4(日)の２日間で開催された「水曜どうでしょうエアキャラバンin 赤平2020」のオンラインイベント会場として、動画を見ながらお買い物ができるライブコマースシステムの開発を行いました。
アーキテクチャ
全体のアーキテクチャは以下の通りです。
それぞれの役割について簡単にご紹介いたします。
?サーバサイドやネットワークの技術者が不在なので、昨年に引き続きSaaSとマネージド・サービスをフル活用してのサーバレス構成で構築を行いました。
[(https://sodane.hokkaido.jp/photo/20201006/46889f0480d59cb6a827a688b7eb9688d88ba2dd.jpeg)
映像配信部分 AWS側へのアップロードにAWS Elemental のアプライアンスである「AWS Elemental MediaLink」を使用しました。AWS MediaLiveのInputとしてコンソールから直接管理が可能な上、同一のハードウェアを用いることでMediaPackage側でのフェイルオーバーもシームレスに行われることを確認しています。 MediaLinkはMediaLiveの入力として繋がります。MediaLinkを用いたときはMediaLive側はSINGLE_PIPELINEしか設定できないため、2つのMediaLiveを使用してそれぞれMediaPackageに入力しました。 MediaPackageではMediaLiveからHLSで受けたものをHLSとMPEG-DASHにパッケージしCloudFrontのオリジンとして機能します。 また、MediaPackageではネクストスケープ社の「Multi DRM Kit」を用いてDRMを用いたコンテンツ管理を行いました。 MediaPackageで作成したHLSとMPEG-DASHのエンドポイントそれぞれをCloudFrontを設定しCDNを用いた動画配信を実現しました。 また、2020年のアップデートで追加された新機能を使って、MediaPackageのCDN認証を使ってアクセスをCloudFront経由のみに限定し、MediaPakageへの直接のアクセスを制限しました。 フロントエンドに置いて動画プレイヤーとして「THEO Player」を使用しました。プレイヤー側の昨日で再生できるドメインも限定しており、よりセキュアな配信を実現しました。 MediaPackageで暗号化された動画をプレイヤー側の再生ボタンが押されるタイミングでproxyとして設定したLambdaがMulit DRM Kit に確認を行い、復号化することでセキュアな動画配信を実現しました。 動画プレイヤー側では再生ボタンなどのスキンの変更、イベントを使った再生数の確認なども実施いたしました。 年のためのアーカイブはMediaLiveから分岐してS3に保存することで対応しました。 コマース部分shopify のBuy Button を埋め込むことでコマース部分の構築を行いました。 すべてコレクションとして埋め込むことで、現場での商品入れ替えなどをほぼCMS完結で行うことができました。 shopifyのBuy Button をそのまま埋め込むとiframeの中に生成されてしまうため、外からCSSなどで直接制御するのが難しかったですが、vue-awesome-swiper を使って多くの商品を表示できるようにしました。 コマース部分の表示に関してはPCとモバイルで完全に別のものを作成し、ユーザエージェントで表示訳を行いました。 決済もshopify paymentを使用しました。JCB決済への対応が10/1に発表されましたが、対応が間に合わなかったため、外部サービス連携でJCB決済を実現しました。 本当は決済をすべてStripeにまとめたかったのですが、時間切れでした。 一部食品も扱っていましたが、軽減税率に関しても簡単に適用することができました。 ログイン部分で「Auth0」を使用しました。今回は活用は限定的で、利用規約への同意としての役割がほとんどです。 Pick Up! 商品のリアルタイム更新 イベントの進行に合わせて、関連する商品を一番上に追加で表示するための仕組みを構築しました。 動画配信中にリロードによる更新は動画が切れてしまうため、可能な限り避けたいというのが理由です。また、演出として動画プレイヤーの外まで使う。ということを試してみたかった。という思いもありました。 リアルタイム更新ではAppSyncのsubscriptionを用いて実現しました。 フロントではGraphQLのqueryを用いて、DynamoDBに格納したフラグを確認し、初期表示を行います。 コンソールからAppSyncでGraphQLのmutationを実行し、リゾルバとして直接Lambdaを動かしてDynamonoの値を書き換えます。 このmutationの結果をsubscriptionで受けて、Nuxtのディレクテブである
全体のコンサルを「Serverless Operations」?さんにお願いしました。 aws側だけでなく、フロントエンドも含めた全体のアドバイスを頂き、技術検討にかかる時間をかなり圧縮することができました。 堀家さん、キムさん、本当にありがとうございました！
awsのアカウントは「クラスメソッド」さんのMembers アカウントになっているため、上限緩和申請など大変お世話になりました。 ?昨年の、水曜どうでしょう祭での有料ライブ配信でのやりとりのアーカイブも振り返りながら実装を進めることができ、スムーズな構築を行うことができました 特にMedia系で相談にのっていただいた清水さん、本当にありがとうございました！
感想
今回の開発を迎えるにあたって、社内では暫定ではありますが、開発チームが立ち上がりました。みんなあっというまにプラクティショナーに合格。さらに開発言語をゼロから覚えるところからでしたが、苦労しながらも、しっかり作り込んで、無事にエアキャラバンを終えることができました。
開発チーム一同、参加者のみなさんが楽しいでいるツイートを見て本当に報われました。ありがとうございます。
また、社外の皆様にも本当にお世話になりました。
ここまでの技術開発やプロジェクトマネジメントをなんとかやってこれたのは、JAWS-UGやserverless meetup、JBUGなどをはじめ、この１年で参加・登壇させて頂いた様々なイベントでコミュニティのみなさんから多くのことを学ばせて頂いたおかげです。今回協力頂いた、Serverless Operationsさんとの出会いも福岡でのserverlessDays Fukuoka 2019でした。
１つのアウトプットから多くのインプットを得ることができ、それを更に社内に還元することができたことで本当に大きな変化が起きました。
イベントだけでなく、Developers.IO を初め、QiitaやSlideShare、SpealerDeckなど、いろんな技術者の型のアウトプットの寄せ集めで実現したと言ってもいいくらい、これでもかと活用させていただきました。
これら我々を育ててくれた技術者コミュニティに対してできる最大の恩返しはアウトプットすることだと思いますので、今回の件も含めて引き続き共有できていければと思いますので、引き続きよろしくお願いいたします。
