【Vue.js+AWSサーバレス】効率と性能を考慮した動画配信プラットフォームの構築
Vue.js+AWSサーバレス動画配信システム概要
効率と性能を考慮したVue.JsとAWSサーバレスで構築した動画プラットフォームの事例を紹介します。
本システムではライブ動画とアーカイブ動画を会員限定に配信します。配信者は配信プラットフォームとしても簡単に配信ができ、最高音質のハイレゾでのライブ配信も行えます。このプラットフォームでは会員管理と課金が可能で会員限定でのライブ、アーカイブ配信と視聴ができます。
フロントエンドはVue.jsを使ってモダンなUIを実現しました。
バックエンドはAWS サーバレス、LambdaやAPIGatewayで可用性、拡張性、運用性、効率性を重視したアーキテクチャを実現しました。今回は技術観点での紹介となります。
動画配信プラットフォームの主な機能
まずは動画配信プラットフォームの機能を紹介します。
- 有料LIVE配信、有料アーカイブチケット
- チャットや投げ銭機能、会員のみ視聴可能コンテンツを提供
- サイト内でコミュニケーションが取れるSNS機能
- 4K放送
- ハイレゾの高音質での配信
- 会場電子チケット、サブスクリプションの販売
現在も運用を継続していて機能拡張をする予定です。
フロントエンドは効率性を重視したモダンなUI
フロントエンドは最近エンジニア界隈で評価の高いVue.jsで開発しました。2020年Vue.Js3.0が最新版としてリリースされています。
Vue.jsはWEBアプリケーションのフロントエンドを開発するためのJavaScriptのフレームワークです。近年、習得のしやすさで急速に普及しています。GitHubでもReactやAngulerを抑えて人気NO.１となっています。
Vue.jsはユーザーインターフェースを構築するためのプログレッシブフレームワークとされています。段階的に発生するアプリケーションの要求変化に対し、サポートツールで課題解決できるという特徴を持ちます。具体的には公式、非公式のサードパーティのライブラリやツールを組み合わせてフロントエンドだけでなく高機能なアプリケーションの開発をしていきます。つまり小さく初めて徐々にライブラリやツールで機能を拡張していけるという特徴があります。技術者観点で言うとHTML、JavaScript、CSSの基礎知識があれば、<script>タグでVue.jsのファイルを読み込むだけで使え、利用者を選ばない初心者にも優しいフレームワークになっています。つまり習得時間が短くて済むところが人気の理由です。弊社はベトナムで開発していますが、日本人エンジニア向けにも公式ドキュメントが日本語化されていて日本人コミュニティも活性化しているようです。
バックエンドはLaravel（PHP）、AWSサーバレスで構築
バックエンドはAWSサーバレス構成で構築しました。旧システムはオーソドックスなEC2をベースにした構成でした。以下ポイントを解説します。
AWS CloudFrontでリーテンシーを抑える
今回はページの読み込み速度を上げるためにCDNとしてAWS CloudFrontを配置し、さらにLambdaとNext.jsで画像の読み込み速度を最適化しました。
AWS CloudFrontは、コンテンツを迅速に配信するためのAmazonが提供するコンテンツネットワークデリバリー（CDN）です。将来的に全世界配信をする場合にはそれぞれの地域のエッジロケーションと言われる最寄の拠点から対応することができます。
AWS Lambda(ラムダ)とはサーバレスのFaaS(Function as a Service)です。つまり機能のみを提供します。Lambdaの機能は何かというと、クラウド上にプログラムを置くことができ、発生ベースでプログラムを起動します。AWSがミドルウェアやサーバーを用意するのでユーザーは起動した分だけ課金が発生する仕組みです。
会員管理とデータベース
会員管理にはAWS Auroraデータベースを選択しました。
Auroraとは、MySQLとPostgreSQLなどのエンタープライズデータベースの特徴をもちあわせ、さらに性能を向上させたマネージドデータベースです。AWS RDSと比べてもコストも安く、高性能や高可用性が求められる商用にも活用可能です。
会員管理にはサブスクリプション機能があります。Stripeを使いサブスクリプションの決済をします。会員情報の更新をバッチ処理（EC2）で行っています。
Stripeとは、グローバル展開を考えたときに選択肢の有力候補になります。世界中で幅広く利用され、クレジットカードや銀行との接続からブラウザによる決済フローまで対応するオンライン決済システムです。サポートされている通貨と支払い方法は135種類以上あるといわれます。
セキュリテイ対策、AWS WAF、Shield
セキュリティー対策として、プライベートサブネットにはBastionサーバーを設置してセキュリティーを強化しました。Bastionホストにはセキュリティグループで特定のIPとハッシュキーがないとアクセスできません。
またユーザーからのアクセス監視、制御としてAWS WAFとAWS Shieldで設定しています。
AWS WAFとは、Amazonが提供するWebアプリケーションファイヤーウォールです。ソフトウェア、ハードウェアの通信を、フィルター、監視、ブロックします。SQL インジェクション、クロスサイトスクリプティング、アプリケーションの脆弱性を悪用した攻撃の遮断、 DDoS 対策、不正なボットによるアクセスの遮断などがあります。AWSのマネージドルールにより導入は容易です。
AWS WAFはアプリケーション層の防御をする役割に対して、AWS Shieldはネットワークおよびトランスポートレイヤーの DDoS 攻撃を防御します。
AWS WAFとShieldはCloudFrontと併用することでさらに効果が高まります。
AWS AuroraをマルチAZ配置
可用性の観点ではAWS AuroraはマルチAZ配置をしています。バックアップは２時間ごとに取得して７日間保持します。DynamoDB も同様に２時間ごとのバックアップと７日間の保持をしています。S3も同様に毎日バックアップを取得しています。
DynamoDBとは、
モニタリングはAWS Cloud WatchとCloud Watch log、Cloud Watch Eventを利用し、指標を設定し運営者へAWS SNSで通知します。
AWS CloudWatchとは、AWS リソースとアプリケーションをリアルタイムでモニタリングします。
メトリクスを設定でき、さまざまなログを追跡することができます。一部機能は無料で利用できます。
AWS ALBでオートスケーリング設定
拡張性、柔軟性を重視したバックエンドはALBとECSを使いオートスケーリング設定をして可用性も高めています。
AWS ALBとは、AWSが提供する負荷分散サービスELB（Elastic Load Balancing）の一つです。L7のHTTP/HTTPS プロトコル対応を強化した汎用型ロードバランサーです。URLごとにサーバーに対するリクエストを振り分ける設定が可能で、AWSではWebアプリケーションの負荷分散に最も利用されています。
Appsync、Lambdaでチャット機能作成
フロントエンドではチャットの処理としてAppsync、GraphQL、Labmda、DynamoDBを使いました。
こちらは、他のプロジェクトでも採用しています。
Amazon DynamoDBは、完全マネージド型で運用管理がいらないNoSQLデータベースサービスとなります。
AWS AppSync は、GraphQLのフルマネージドサービスです。オンラインでもオフラインでもデータを同期できます。複数でのメッセージ管理も可能です。今回はLambdaとDynamoDBの組み合わせでチャットシステムを構築しました。
APIGatewayで大量アクセスにも対応
メール配信ではAPIGatewayで拡張性と可用性を担保して大量アクセスにも対応しています。SQSとSNS及びSESを利用しました。
API Gatewayは、完全マネージド型サービスで、規模を問わずに簡単にAPIの作成、保守、監視、保護が可能です。本システムはメール機能などの独立性を保ちAPIゲートウェイ、SQS、SNS、SESで疎結合化をして設計しています。
配信システムはAdmintTVを利用
配信システムは、何社かのサービスを検討した結果、弊社との取引もあるデジタルクルーズ社の動画配信システムプラットフォームのadmintTVを選択しました。AdmintTVは常に世界標準の最新機能を搭載した動画配信システムでありながら、業界平均よりも低価格、DRM（デジタル著作権管理）もしっかりしていたことが選択の決め手となりました。一部VIMEO、YOUTUBEとも連携しています。
なお利用ソフトウェアは以下を使いました。
- バックエンド：Docker v20.10.12
- フロントエンド： AWS amplify, SAM
- DevOps:CICD: Gitlab
- インフラ構築： terraform v1.0.3
動画配信プラットフォームのインフラアーキテクチャ図
各環境設定
開発環境、検証環境、本番環境を用意しました。
AWSの見積もり
見積もりのプロセスとして受注前の段階でクラウドサーバー費用の概算見積もりを提出します。なぜ概算かというと非機能要件が確定していないことが多く、アクセス数やセキュリティ要件などが曖昧なためです。精度の高いサーバーコストの見積もりはAWS Pricing Calculatorを利用して本番稼働前には提出します。しかしAWSの場合、原則従量課金ですので変動することと、運用しながら最適化をしていくことをお伝えしています。本サービスも半年間運用後一部EC2インスタンスを１年間のリザーブドインスタンス契約に変更し３０％のコストダウンを提案し実現しました。
AWS公式の見積ツールが、「AWS Pricing Calculator」です。以前は、「簡易見積ツール」も存在していましたが、現在は統合されています。
開発プロセス
本件は旧サービス（動画配信システム）が存在していました。新サービスへのリニューアルということでプロジェクトがスタートしました。
まずはプロジェクトキックオフ会議を開催し以下の業務定義や範囲を合意します。
- サービス・システム概要
- 業務範囲
- 機能要件
・機能要件一覧
・非機能要件一覧
・環境要件
- スケジュール
- 予算（見積書の確認）
- 品質基準の確認
- 体制
- コミュニケーション
- 納品・検収・品質
- プロジェクトリスク管理
その他要件定義は弊社の方でサポートしました。
とくにサードパーティの動画配信サービスの選定は弊社の方で比較、調査をして選定には時間を要しました。
ベトナムで開発するために業務フロー図を作成して、業務視点と開発仕様のギャップをなくす作業を実施しました。弊社で手がけるすべてのプロジェクトはこの業務フローやユーザーフロー図を必ず作成します。フロー図はお客様で用意のない場合は弊社で用意も可能ですし、作り方をお伝えしています。ちなみにすべてコミュニケーションは日本語で実施します。
詳細スケジュールはWBSに落としてブリッジSEが進行を管理します。毎週定例会議で進捗確認を行います。
外部設計書の作成とXDでのUIデザインは弊社で行いました。Vue.JSでコーディングするのでそちらも意識してデザインしています。管理画面はLaravelテンプレートを使いました。
また全てのプロセスを弊社側が完了した後に、クライアントに必ず承認してもらいます。
その後、コーディングルールにのとって、プログラマーがコーディングを行います。
あらかじめ仕様書から作成したテストシナリオをもとに単体テスト、結合テストを実施します。
最後にUAT（受入テスト）をクライアントに実施してもらい本件を検収していただきました。
UATには、弊社の品質基準をクリアしてからお渡ししております。
本件は運用保守前提ですので現在も運営や改修を実施しています。
まとめ
今回は動画配信プラットフォームをVue.JSとAWSサーバレスで構築しました。本件は現在も運営と保守をしています。追加開発のしやすさや、サーバーサイドの運用性を重視した設計となりました。
無料相談お問い合わせ