AWS Media Blog の Creating a secure video-on-demand (VOD) platform using AWS の記事で紹介されていた download this detailed lab guideを参考にサーバレスなVOD配信環境を構築してみました。
サーバレスなVOD配信環境でできること
認証されたユーザーのみが動画をアップロード、処理、配信および閲覧可能なサーバレスのVODストリーミングプラットフォームです。
■動画アップロード画面(管理者権限付与ユーザのみログイン可能)
ログイン
動画アップロード
■動画配信画面（認証済ユーザのみ）
ログイン
動画一覧
動画配信
サーバレスなVOD配信環境のアーキテクチャ
■概要
■説明
DeepL翻訳
このサーバーレスVODワークフローソリューションは、
Amazon Cognito、AWS AppSync、Amazon S3、AWS Lambda、Amazon DynamoDB、AWS Secrets Manager、
AWS Elemental MediaConvert、Amazon CloudFront、AWS Amplify、AWS CloudFormation
を含む複数のAWSサービスを利用して構築されています。
このソリューションでは、CognitoはGraphQL APIへのアクセスを保護するCognito User Poolsを介してWebアプリケーションのユーザーを認証します。
APIはCognito User Pool内のグループに基づいたきめ細かなアクセスが可能です。
また、Cognitoは、コンテンツをS3にアップロードするためのアクセスのために、一時的に限定された特権を持つAWSのクレデンシャルを生成しています。
GraphQL APIを利用したAppSyncでは、クライアントアプリがサーバーからデータをフェッチ、変更、サブスクライブできるようにしています。
今回のソリューションでは、GraphQL APIを利用して動画に対してCRUD（Create/Read/Update/Delete）操作を行い、動画をS3バケットに格納しています。
このワークフローでは、2つのS3バケットを使用しています。
1つは生の動画を保存するため、もう1つは異なる出力フォーマットとビットレートの動画を保存するためです。
複数の Lambda 関数は、
MediaConvert ジョブのトリガー、
DynamoDB へのメタデータの保存、
署名付き URL トークンの作成、
MediaConvert ジョブの終了時の通知の送信
など、さまざまな目的に使用されます。
MediaConvert はアップロードされた動画を
2 Mbps
1 Mpbs
600 Kbps
400 Kbps
の HLS 形式で自動的にトランスコードします。
ビデオコンテンツは、さまざまなネットワーク帯域幅接続を持つ複数のデバイスで再生できるように、適応ビットレートのストリームとしてエンコードされます。
Secrets Managerは、CloudFrontの秘密鍵を安全に保存し、CloudFrontのURLに署名するために使用します。
CloudFrontは、実行時にアプリケーションを介してCDN Edgeのロケーションを介して、許可されたユーザーにコンテンツを安全に配信します。
その他の設定情報
・Signed Cookies/URLs
CloudFrontが各URLの有効期限、許可されたIPアドレス、FileNameを設定できるようにします。
デフォルトでは、CDNで配布されたコンテンツにはNo Readアクセスが割り当てられています。
コンテンツは、アプリが生成した適切なSigned Cookieを使用してリクエストされた場合にのみダウンロードしてアクセスすることができます。
・S3 CORSの設定
S3/CDN経由でコンテンツへのアクセスを許可するウェブサイトを設定します。S3 CORS設定の詳細については、こちらのブログ記事をご覧ください。
AmplifyとCloudFormationは、ソリューションのバックエンドに関わるリソースやサービスの迅速な展開を容易にします。
サーバレスなVOD配信環境を構築する
■公式ドキュメント
VOD-Blog-LabGuide ※Wordファイル(docx)
■前提条件
AWSアカウント
- IAMユーザでAWSマネジメントコンソールにログイン（step4以外)
- IAMユーザ名：vodaws
- IAMポリシー：AdministratorAccess
- ルートアカウントでAWSマネジメントコンソールにログイン（step4のみ)
AWSマネジメントコンソール
- 言語
- 日本語
- リージョン
- ap-northeast-1 (Tokyo)
■Step1: Setting up Development Environme
1. AWS Cloud9コンソールに移動後、【 Create environment 】を選択
※Regionが東京である事を再確認
2. Name environment の設定後、【Next step 】を選択
Name: VodAws
Description： This environment is for the AWS Cloud9 tutorial.
3. Environment setting にて t3.smallを選択後、【Next step 】を選択 ※インスタンスタイプ以外はデフォルト
4. 設定内容を確認後、【 Create environment 】を選択
5. Welcomeタブ横の(+) を選択し、別タブの新規ターミナルを表示
■Step2: Installing Packages and Configuring Environment
1. 以下のコマンドを実行してcredentialsファイルをコピー
コマンド
cp ~/.aws/credentials ~/.aws/config
2.以下のコマンドを実行してAmplify CLIをインストール
コマンド
npm install -g @aws-amplify/cli
インストール時にWARNが表示されますが今回は無視します。
3. 以下のコマンドを実行してVodAws.zipをダウンロード
コマンド
wget https://testorlando1.s3.amazonaws.com/VodAws.zip
4. 以下のコマンドを実行してVodAws.zipを解凍
コマンド
unzip VodAws.zip
5. 以下のコマンドを実行してVodAwsディレクトへ移動
コマンド
cd VodAws
5. 以下のコマンドを実行してNPMをインストール
コマンド
npm install
インストール時にWARNが表示されますが今回は無視します。
■Step3: Deploying Backend using Amplify Cli
1. 以下のコマンドを実行して~/environment/VodAwsにいることを確認
コマンド
pwd
2. 以下のコマンドを実行してAWSバックエンドのセットアップ
コマンド
amplify init
プロンプトの選択については下記のとおり。
プロジェクト名を入力
環境を入力
使用するエディタを選択
対象アプリの種類を選択
使用するJavaScriptフレームワークを選択
プロジェクト内のソースディレクトリパスの場所を指定
配布用ディレクトリパスの場所を指定
ビルドコマンドを入力
スタートコマンドを入力
AWSプロファイルを使用
defaultのAWSプロファイルを使用
上記選択後、バックグラウンドで処理が走ります。
3. 以下のコマンドを実行してプロジェクトにAPIモジュールを追加
コマンド
amplify add api
プロンプトの選択については下記のとおり。
サービスを選択
API名を入力
認証形式を選択
デフォルトの認証とセキュリティ設定利用有無を選択
サインイン手段の選択
追加設定の選択
GraphQL API追加設定の選択
既存GraphQLスキーマ利用有無の選択
ガイド付きGraphQLスキーマ作成有無の選択
最も合致する使用方法の選択
スキーマ作成を今すぐ行うかどうかの選択
上記選択後、APIモジュール追加処理。
4. 以下のコマンドを実行してschema.graphql を編集
コマンド
cat << EOF > /home/ec2-user/environment/VodAws/amplify/backend/api/vodaws/schema.graphql
type vodAsset @model (subscriptions: {level: public})
@auth(
rules: [
{allow: groups, groups:["Admin"], operations: [create, update, delete, read]},
{allow: private, operations: [read]}
]
)
{
id:ID!
title:String!
description:String!
#DO NOT EDIT
video:videoObject @connection
}
#DO NOT EDIT
type videoObject @model
@auth(
rules: [
{allow: groups, groups:["Admin"], operations: [create, update, delete, read]},
{allow: private, operations: [read]}
]
)
{
id:ID!
token: String @function(name: "VodAws-prod-tokenGen")
}
EOF
5. 以下のコマンドを実行してデプロイを実行
コマンド
amplify push
※continue?についてはYを選択
プロンプトの選択については下記のとおり。
Query/Mutationのコード生成有無
生成するコードの言語の選択
ファイル名のパターン(queries, mutations, subscriptions)の入力
全てのGraphQLの操作に対してのコード生成有無
タイプ同士で相互参照している場合のネストの最大値
上記選択後、デプロイ実行
6. ブラウザの別タブよりCloudFormationダッシュボードへ移動
CloudFormationダッシュボードへ移動
ネスト表示に切り替え
7. amplify-vodaws-prod-*のスタック名を選択後、出力に表示されている値(赤丸の個所)をメモ帳等に控える
8. amplify-vodaws-prod--authvodaws****のスタック名を選択後、出力に表示されている値(赤丸の個所)をメモ帳等に控える
■Step4: Creating CloudFront Key Pairs
DeepL翻訳
重要
IAMユーザーはCloudFrontのキーペアを作成することができません。キーペアを作成するには、ルート資格情報を使用してログインする必要があります
1. 別ブラウザを開き、ルートアカウントでAWSマネジメントコンソールにログイン
2. 画面右上のアカウント名をクリック後、【 マイセキュリティ資格情報 】を選択
3. セキュリティ認証画面の【 新しいキーペアの作成 】を選択
4. 【 プライベートキーファイルのダウンロード 】を選択してローカルにダウンロード
DeepL翻訳
重要
CloudFrontのキーペアの秘密鍵を安全な場所に保存し、希望する管理者のみが読めるようにファイルのパーミッションを設定します。
誰かがあなたの秘密鍵を取得すると、有効な署名付きURLや署名付きクッキーを生成して、あなたのコンテンツをダウンロードすることができます。
秘密鍵は二度と取得できないので、紛失したり削除したりした場合は、新たにCloudFrontの鍵ペアを作成する必要があります
5. 出力に表示されているアクセスキーID(赤丸の個所)をメモ帳等に控える（署名付きURLや署名付きCooki作成に利用）
以降はルートアカウントによる作業は発生しない為、 ルートアカウントでログインしているAWSマネジメントコンソールについてはログアウト
■Step5: Storing CloudFront Key Pairs
Step5以降はStep3にて使用したAWSマネジメントコンソール(IAMユーザログイン)を使用
1. Step3にて使用したCloud9のターミナルよりを以下のコマンドを実行してStep4の3のプライベートキーファイルをコピー
コマンド
cat /home/ec2-user/environment/privateKey.pem
※ファイルが存在しないことを確認
cat << EOF > /home/ec2-user/environment/privateKey.pem
(Step4の3のプライベートキーファイルの内容)
EOF
■Step6: Storing Private key using AWS SecretsManager
1. 以下のコマンドを実行して秘密鍵をSecretsManagerに保存後、出力に表示されている値(赤丸の個所)をメモ帳等に控える
コマンド
aws secretsmanager create-secret --name VodAws --secret-binary file://privateKey.pem
■Step 7: Verify the values of all the variables
1. 以下の変数の値を控えていることを確認
| 変数名 | 値 |
|---|---|
| pAppClientID | Step 3 の8のAppClientID |
| pAppClientIDWeb | Step 3 の8のAppClientIDWeb |
| pAuthRoleArn | Step 3 の7のAuthRoleArn |
| pIdentityPoolID | Step 3の8のIdentityPoolID |
| pPemID | Step 4 の5のアクセスID |
| pS3 | Step 3 の7のDeploymentBucketName |
| pSecretPem | Step 6 の1のName |
| pSecretPemArn | Step 6 の1のARN |
| pSourceFolder | vod-helpers (規定値) |
| pUnAuthRoleArn | Step 3 の7のUnAuthRoleArn |
| pUserPoolID | Step 3の8のUserPoolId |
| pAuthRoleName | Step 3 の7のAuthRoleName |
| penv | prod (規定値) |
| pUnAuthRoleName | Step 3 の7のUnAuthRoleName |
■Step8: Deploying CloudFormation Template
1. vod-helpers.zipをローカルにダウンロードの上、解凍（vod-helpersフォルダ）
ダウンロード先URL：https://testorlando1.s3.amazonaws.com/vod-helpers.zip
2. 別タブにてS3ダッシュボードに移動
3. amplify-vodaws-prod-***-deploymentを選択
4. 1のvod-helpersフォルダをアップロード画面にドラックアンドドロップ後、【アップロード】を選択
5. vod-helpersを選択後、【アクション】より【公開する】を選択
6. 【公開する】を選択
7. Launch with CloudFormation Console のリンクを別タブで表示
Launch with CloudFormation Console
https://console.aws.amazon.com/cloudformation/home?region=ap-northeast-1#/stacks/create/review?templateURL=https:%2F%2Fs3.amazonaws.com%2Ftestorlando1%2FParentStack.json&stackName=VodAwsStack
※引数のregionをap-northeast-1に変更しています
8. スタックのクイック作成が開いたことを確認
9. パラメータの空欄にStep 7の1で控えた値を入力
10. 機能のチェックボックスにチェック後、【 スタックの作成 】を選択
11. VodAwsStackのスタック名を選択後、出力に表示されている値(赤丸の個所)をメモ帳等に控える
12. step6の1のCloud9ターミナルに戻り、以下のコマンドを実行してsrcディレクトリに移動
コマンド
cd /home/ec2-user/environment/VodAws/src/
13. step6の1のCloud9ターミナルに戻り、以下のコマンドを実行してsrcディレクトリに移動
コマンド
cat << EOF > aws-video-exports.js
const awsvideoconfig = {
"awsInputVideo": "Step8の11のoVODInputS3の値",
"awsOutputVideo": "Step8の11のoVODOutputUrlの値"
};
export default awsvideoconfig;
EOF
13. 以下のコマンドを実行してVodAwsディレクトリに移動
コマンド
cd /home/ec2-user/environment/VodAws/
■Step9: Hosting our app on Amplify
1. 以下のコマンドを実行してプロジェクトに静的ホスティングを追加
コマンド
amplify hosting add
プロンプトの選択については下記のとおり。
実行するプラグインモジュールを選択
環境の選択
ホスティングするバケット名の確認（デフォルト）
設定確認
1. 以下のコマンドを実行して静的リソースをAmazon S3およびAmazon CloudFrontに公開
コマンド
amplify publish
※continue?についてはYを選択
2. 公開が完了するとcloudFrontのURLが表示
3. 以下のコマンドを実行してnpm serverを起動
コマンド
nmp start
起動確認ができたらContrl+Cで停止(今回はlocalhostの閲覧確認を行わない）
4. ブラウザよりcloudFrontのURLの閲覧
■Step 10: Create Users in Cognito User Pool
1. 別タブにてCognitoダッシュボードに移動
2. 【 ユーザープールの管理 】を選択
3. vodawsse**userpool を選択
4. 【 ユーザーの作成 】を選択
5. 動画公開可能のユーザ作成
今回は【Vodaws 】というユーザー名で作成
電話番号は国番号から入力 例）日本の場合(81)
6. 【 グループに追加 】を選択
7. Admin を入力後、【グループに追加】を選択
8. ブラウザより https:// cloudFrontのURL /Admin へアクセス後、ユーザー名(Vodaws)および仮パスワードを入力の上、パスワード変更を実施
9. ログイン後、画像アップロード確認(mp4)
画像アップロード確認後、ログアウト
10. Step10の4の画面に戻り、動画閲覧専用のユーザ作成
今回は【guest】というユーザー名で作成
電話番号は国番号から入力 例）日本の場合(81)
11. ブラウザより https:// cloudFrontのURL / へアクセス後、ユーザー名(guest)および仮パスワードを入力の上、パスワード変更を実施
12. ログイン後、Vodawsユーザーがアップロードしたsampleが表示されていることを確認
13. sampleを選択して動画が閲覧できることを確認
