署名付きCookieでクローズドな動画配信2019年01月31日ツイートデータスタジアムエンジニアの片岡です。サッカーに関するサービスの開発を担当しています。スポーツ界では近年データと動画を絡めたサービスへの需要が多く、私自身も動画システムの開発に多く携わっています。今回、AWSを使ってシステムの利用ユーザーに限定して公開する、クローズドな映像配信の設定で試行錯誤したので記事に残します。全体図まずは全体図です。S3に再生したい動画(HLS形式。Frontで配信するのですが、全世界に公開するのではなく、認証されたユーザーにのみ公開するようにします。Frontには署名付きURLと署名付きCookieという2種類のアクセス制御方式があります。HLS形式で署名付きURLを採用する場合、m3u8内の各tsにも署名パラメータを付与する必要があり面倒なため、Cookieを使う方法を採用します。Frontを同ドメイン(***.mydomain.com)にする必要があるので、CNAMEを設定します。Manager)を使用してhttps化を行います。Front側をbbb.mydomain.comとします。以下の手順で設定していきます。S3バケット作成・ファイル準備・CORS設定まずはバケットを作成し、hlsフォルダを作成してその中にHLSファイル(m3u8とts)をアップロードします。次にAWSコンソール上でバケットを開いた状態でアクセス権限タブのCORS設定で、以下を入力して保存します。http://aaa.mydomain.com:8000はローカルPCでの開発用です。xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><corsrule><allowedorigin>https://aaa.mydomain.com</allowedorigin><allowedorigin>http://aaa.mydomain.com:8000</allowedorigin><allowedmethod>GET</allowedmethod><allowedmethod>HEAD</allowedmethod><maxageseconds>3000</maxageseconds><allowedheader>*</allowedheader></corsrule></corsconfiguration>バケットポリシーは後で設定します。Distributionを押して、Distribution作成に入ります。Distributionを押してDistributionを作成します。IdentityのIDをコピーします。S3バケットの目的のバケットを開き、アクセス権限のバケットポリシーで以下を入力して保存します。{}の部分は書き換えてください。Frontに割り当てるCNAMEをお名前.comやRoute53で設定します。Name(d**********.cloudfront.net)を以下のように設定します。Frontの対象Distributionを開き、GeneralタブでEditを押します。ACMを押すと、証明書のリクエスト画面が開きます。この時、右上のリージョン表示がバージニア北部になっていることを確認します。Frontでは使えない)ドメイン名にbbb.mydomain.comを入力して次へボタンを押します。検証方法の選択画面でDNSの検証を選択して確認ボタンを押し、さらに確定とリクエストボタンを押します。次の画面でドメインの左側にある▶をクリックするとDNS検証のためにmydomain.comのCNAMEに設定すべき内容が表示されます。これをお名前.com等で設定し、しばらく待つと、ACMの画面で証明書の状況欄が発行済みとなります。AWS側がドメイン所有権を確認する検証用なので、発行済になった後はCNAMEは削除してOKです。FrontのDistributionを開き、GeneralタブでEditを押します。Editボタンを押して保存します。Frontの署名をするためには、専用キーペアの作成が必要です。AWSコンソールにrootアカウントでログインし、右上のユーザー名をクリック、セキュリティ認証情報を押します。(rootでないとできません)ここで警告が出ますが×で閉じます。Frontのキーペアの中の新しいキーペアの作成を押すとキーペアが作成され、プライベートキーファイルのダウンロードボタンを押してキーをダウンロードします。次にアプリケーションの作成に入ります。Laravel5.7を使いますが、他の言語・フレームワークでも考え方は同じです。composerでLaravelアプリケーションを作成した後からの説明になります。SDKをインストール(ダウンロード)します。Front用プライベートキーファイルの配置プロジェクトルートのstorage/appに先ほどダウンロードしたプライベートキーファイルを置きます。Controller作成ブラウザからアクセスする画面用のControllerを作成します。※SPAで作成したい場合はAPIとして作成してください。Frontの署名付きCookieを作成します。Cookieは以下3つを作成します。CloudFront-PolicyCloudFront-SignatureCloudFront-Key-Pair-IDCookieのDomainを、mydomain.comにするのがポイントです。Frontで受け取るものなので、暗号化しないようにする必要があります。trueとすることで、クロスドメインでCookieを送信することができます。(aaa.mydomain.comで開いたページからjavascriptでbbb.mydomain.comにCookie送信)動作確認ローカルPCで確認ローカルPC上でアプリケーションを動作させて確認する際はhostsに以下を記載しておきます。serveを実行してLaravelのWebサーバを起動し、ブラウザでhttp://aaa.mydomain.com:8000/play_videoにアクセスします。動画が再生されれば成功です!AWSで確認EC2にアプリを構築し、ALBを設定します。ALBにはCNAMEでaaa.mydomain.comを割り当てます。後はローカルと考え方は同じです。(hostsから先程の設定を削除して確認)直接再生不可の確認https://bbb.mydomain.com/hls/index.m3u8を直接開いてもエラーになり再生はできません。Playerで確認します。ChromeやIEでは元々直接再生には対応していません。)エンジニア募集中!データスタジアムでは一緒に働いていただけるエンジニアを募集しています。野球、サッカー、バスケなどスポーツが好きな方であれば、とても面白い仕事ができる会社です。興味を持たれた方はぜひこちらをご覧ください。