変換したコンテンツをS3経由で配信する

最後のステップでは、配信するための CloudFront(CDN)を設定して視聴確認を行います arch5-4


■ CloudFront を設定する

  • CloudFrontのページへアクセス
  • Create Distribution を選択後、Web の「Get Started」を選択

screenshot5-4-1

  • 「Origin Domain Name」には作成した S3 バケット handson-archive-{自分の名前} を選択する

screenshot5-4-2

  • 「Restrict Bucket Access」を「YES」にして、その他の項目を以下のように設定する
    • Origin Access Identity: 「Create a New Identity」
    • Grant Read Permissions on Bucket: 「Yes, Update Bucket Policy」

S3 へのアクセスを「CloudFront からのみ」許可する設定を行っています。 直接 S3 にアクセスがあっても拒否することができるため、より高いセキュリティの設定となります

  • 「Origin Request Policy」を Managed-CORS-S3Origin に設定する

screenshot5-4-3

  • 最後に「Create Distribution」を選択

作成した Distribution の Status が「Deployed」になったら作成完了です

Deployed になるまで 5 分程かかります。Deploy が速くなりました。


■ S3 の CORS 設定をする

Web ブラウザのプレイヤーで再生させた時に、どのドメインでの再生を許可するかを指定しています 今回の設定では「*」としているため、どのドメインのページであっても再生可能と設定しています

  • S3 のコンソール画面にアクセス
  • バケットの名前をクリック
  • 「アクセス許可」のタブを選択
  • 画面を下にスクロールして「Cross-Origin Resource Sharing (CORS)」の編集をクリック
  • 以下のテキストを貼り付けて保存する
[
    {
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ]
    }
]

■ 視聴確認

CloudFront の作成した Distribution の Status が「Deployed」になったか確認しましょう

screenshot5-4-4

Deployed となっていたら、視聴可能な状態になっているので、ブラウザで hls.js のリファレンスプレイヤーページを開きます

  • 再生確認ページへアクセスして 動画の URL を入力して動画再生を確認する
再生確認ページ

動画の URL は「 https://{CloudFrontのDomain Name}/sample.m3u8 」となります {CloudFront の Domain Name} は CloudFront の Status を確認したページでみることができます


動画を視聴することができたら、このシナリオは終了となります。
もし余力があれば、オプションとして次の「自動動画変換」をやってみましょう!