hls를 위한 cloudfront + signed cookie + lambda@edge

이 글을 쓰는 목적?
hls를 처음 접하고 구현하는데 삽질을 많이 해서, 다른 이들은 그 과정을 거치지 않게 하고 함이다.

해당글을 참고해서 진행을 했는데,,, 빠진 부분이 있어서, 고생을 좀 했다.
초보자들도 그냥 설정을 따라서 그대로 세팅하면 되도록 작성하겠다.

---

 

영상 컨텐츠 서비스를 hls로 운영하기 위한 작업을 했다.

 

hls란?
Http Live Streaming

 

기존 서비스는 영상을 재생 하려면 .mp4 파일을 통으로 다운로드해서 재생을 했다면,

hls를 적용시키면 영상 파일을 1~2분 단위로 .ts 확장자로 쪼개어 저장하고, .m3u8에 메타데이터를 기록해서, 순차적으로 다운로드 받으면서 재생된다.

실시간 서비스에 주로 이용된다.

 

지금 당장 실시간 서비스를 하려는게 목적은 아니다.

보안 차원에서 진행하게 되었다.

 

자 그럼 구축을 한번 해보자.

 

---

 

1. 동영상 파일 쪼개기

해당 사이트에서 .mp4 파일을 .m3u8로 변환 시킬 수 있다.
https://www.mp4.to/m3u8/?lang=ko

MP4.to - MP4 변환기

또는 ffmpeg을 써서 직접 변환도 가능하다.

 

변환을 완료하면 다음과 같은 파일목록을 갖게 된다.

 

.m3u8의 내용은 아래와 같다.

.ts 파일들의 목록을 가지고 있다.

 

 

---

 

2. S3 버킷 생성 및 레퍼지토리에 업로드

버킷 권한(permissions)은 아래와 같다.

 

나는 test라는 폴더를 만들고, 거기에 업로드 했다.

 

버킷 정책(policy)은 이후에 언급하겠다. 일단 비어두자.

 

---

 

3. Cloudfront 생성

이 글을 참고하자

https://bekusib.tistory.com/779

aws cloudfront를 이용해서 s3에 있는 나의 컨텐츠 보호하기(feat. signed url)

 

다시 간략하게 설명을 하자면,

   1. key groups과 public keys를 만든다.

   2. Distributions을 만든다.

   3. origin / behaviors를 세팅한다.

결과물 >>
- Public key

 

 

- Key groups

 

 

- Distributions

 

- Distributions > Origin

- Origin access control

S3 bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": [
                "s3:ListBucketMultipartUploads",
                "s3:GetBucketLocation",
                "s3:ListBucket"
            ],
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}

 

- Distributions > Behaviors

.ts 파일 접근용 기본 Default(*) behaviors와 .m3u8 파일을 접근할때 사용할 behaviors를 추가적으로 만들어 준다.

이유는, hls 플레이어 재생시 제일 먼저 .m3u8의 파일을 가져오는데 이때 lambda@edge를 이용해 Response Header에 sigend cookie를 반환시키기 때문이다. (구체적인 플로우 설명은 뒤에 하겠다.)

 

- Distributions > Behaviors > Default(*)

 

- Distributions > Behaviors > /*/*.m3u8

 

- Policies > Response headers > hls-cookie-cors

 

 

---

 

자 이제 기본적인 Cloudfront 세팅은 끝났다!

이제 cloudfront 도메인 주소를 통해 s3 origin에 접근 할 수 있다.

하지만, /*/*.m3u8은 public으로 접근 가능하지만(Behavior설정 참고),

Default(*)는 에세스 제한이 있다. signed url 또는 signed cookie를 통해 접근을 할 수 있다.

 

.m3u8을 public으로 접근 가능하게 한 이유는, HLS로 영상을 재생할 경우 .m3u8의.ts 파일 리스트를 얻어와야 되기 때문이다.

hls.js를 사용하면 플레이어(<video />)에서 자동으로 .ts 파일을 불러와 재생이 된다.

이떄 .ts 파일은 signed cookie를 이용해서 가져올 수 있다.

 

여기서, .ts파일이 복수개가 있는데, 그때마다 signed cookie를 만들어서 요청하는건 번거롭지 않을 수 없다.

그래서 폴더를 signed 처리해서 그 폴더 안의 모든 파일들은 같은 signed cookie로 접근 하게 할 수 있다.

(이 방법은 lambda@edge를 작성할떄 설명하겠다.)

 

 

자 그럼 이제 코드짜러 가보자.

---

 

4. hls.js를 사용한 React 웹페이지

hls.js를 사용해서 재생시키는 코드 예이다.

config 설정이 가장 중요한 포인트다.

withCredentilas를 true로 설정해줘야 쿠키 처리 하는게 먹힌다.

 

코드를 한마디로 요약하면 <video src="*.m3u8" />이다.

// main.tsx
import React, { useRef } from "react";
import { render } from "react-dom";
import "./index.css";
import Hls from "hls.js";


const config = {
  xhrSetup: function (xhr: any, url: any) {
    xhr.withCredentials = true; // do send cookies
    url = url + "?t=" + new Date().getTime();
    xhr.open("GET", url, true);
  },
};

function App() {
  const [hls, setHls] = React.useState(new Hls(config));
  const videoEl = React.useRef(null);

  React.useEffect(() => {
    const video = videoEl.current;

    const videoUrl =
      "https://d***********s.cloudfront.net/test/testvideo-2.m3u8";
    const timestampedUrl = `${videoUrl}?t=${new Date().getTime()}`;

    if (video) {
      if (Hls.isSupported()) {
        console.log("hls is supported!");
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, () => {
          hls.loadSource(
            videoUrl
          );
        });
      } else {
        console.log("hls is not supported!");
      }
    }

    return () => {
      if (hls) {
        hls.destroy();
      }
      setHls(new Hls());
    };
  });

  return (
    <div className="App">
      <video ref={videoEl} controls>
      </video>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(
  <CookiesProvider>
    <App />
  </CookiesProvider>,
  rootElement
);

 

---

 

5. Lambda@edge 추가

먼저 기본 Lambda 함수는 모든 리전에서 생성 및 사용 가능하다.

하지만 Lambda@dege는 us-east-1에서만 가능하다.

그래서 해당 리전에서 함수를 만들어야 한다.

 

나의 경우 node.js 18.x 기반으로 코드를 작성했다.

5-1. index.mjs에 복붙.

'use strict';
import { getSignedCookies, getSignedUrl } from "@aws-sdk/cloudfront-signer";
import * as fs from 'fs';

export const handler = async (event, context, callback) => {
  // Get Datas
    const response = event.Records[0].cf.response;
    const request = event.Records[0].cf.request;

    const keyPairId = "K***********";
    const privateKey = fs.readFileSync('./private-key.pem', {encoding:'utf8', flag:'r'});

     
    const policy = {
        Statement: [
            {
                Resource: 'https://d**********s.cloudfront.net/*',
                Condition: {
                  DateLessThan: {
                    'AWS:EpochTime':
                      Math.floor(new Date().getTime() / 1000) + 60 * 60 * 10,
                  },
                },
            },
        ],
    };
    
    const payload = {
      url: 'https://d**********s.cloudfront.net/*',
      keyPairId,
      privateKey,
      policy: JSON.stringify(policy)
    }
    const cookie = getSignedCookies(
      payload
    );
    response.headers['set-cookie'] = [
        {
            key: 'Set-Cookie',
            value: `CloudFront-Key-Pair-Id=${cookie['CloudFront-Key-Pair-Id']}; httpOnly; secure; SameSite=None`
        },
        {
            key: 'Set-Cookie',
            value: `CloudFront-Policy=${cookie['CloudFront-Policy']}; httpOnly; secure; SameSite=None`
        },
        {
            key: 'Set-Cookie',
            value: `CloudFront-Signature=${cookie['CloudFront-Signature']}; httpOnly; secure; SameSite=None`
        }
    ]
    callback(null, response);
};

 

5-2. private-key.pem 추가

 

5-3. test JSON

{
  "Records": [
    {
      "cf": {
        "config": {
          "distributionDomainName": "your-cloudfront-domain.cloudfront.net",
          "distributionId": "EXAMPLE12345"
        },
        "request": {
          "uri": "/path/to/your/test.m3u8",
          "method": "GET",
          "headers": {
            "host": [
              {
                "key": "Host",
                "value": "your-cloudfront-domain.cloudfront.net"
              }
            ]
          }
        },
        "response": {
          "status": "200",
          "statusDescription": "OK",
          "headers": {
            "content-type": [
              {
                "key": "Content-Type",
                "value": "application/vnd.apple.mpegurl"
              }
            ]
          },
          "body": "#EXTM3U\n#EXT-X-VERSION:3\n#EXT-X-TARGETDURATION:10\n#EXT-X-MEDIA-SEQUENCE:0\n#EXTINF:10.010000,\ntestvideo-20.ts\n#EXTINF:10.010000,\ntestvideo-21.ts\n#EXTINF:10.010000,\ntestvideo-22.ts\n#EXTINF:10.010000,\ntestvideo-23.ts\n#EXTINF:10.010000,\ntestvideo-24.ts\n#EXTINF:10.010000,\ntestvideo-25.ts\n#EXTINF:10.010000,\ntestvideo-26.ts\n#EXTINF:10.010000,\ntestvideo-27.ts\n#EXTINF:10.010000,\ntestvideo-28.ts\n#EXTINF:10.010000,\ntestvideo-29.ts\n#EXTINF:10.010000,\ntestvideo-210.ts\n#EXTINF:10.010000,\ntestvideo-211.ts\n#EXTINF:10.010000,\ntestvideo-212.ts\n#EXTINF:10.010000,\ntestvideo-213.ts\n#EXTINF:10.010000,\ntestvideo-214.ts\n#EXTINF:10.010000,\ntestvideo-215.ts\n#EXTINF:10.010000,\ntestvideo-216.ts\n#EXTINF:10.010000,\ntestvideo-217.ts\n#EXTINF:4.838167,\ntestvideo-218.ts\n#EXT-X-ENDLIST"
        }
      }
    }
  ]
}

 

테스트 결과

 

5-4. 다음으로 labmda@edge 사용에 앞서 permissions 세팅을 해준다.

 

아래와 같이 JSON을 덮어씌어주자.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": [
                    "edgelambda.amazonaws.com",
                    "lambda.amazonaws.com"
                ]
            },
            "Action": "sts:AssumeRole"
        }
    ]
}

 

 

5-5. 이제 Cloudfront에 Trigger 추가를 하자.

 

 

---

 

이제 cloudfront를 통해 .m3u8 파일을 요청하게 되면, viewer response에서 작성한 lambda 함수가 실행된다.

 

 

여기서 CloudFront event에 대해 조금 더 알아보자.

아래 그림과 같이 총 4개의 이벤트로 이루어져 있다.

우리는 요청 후 반환되는 가장 마지막 단계인 viwer response에서 람다 함수를 실행시켜서 사용자(브라우저)가 Response Header의 Set-Cookie를 통해 sigend cookie를 받을 수 있게 한다.

---

 

6. 실행(테스트)

 

6-1. 크롬

 

문제 없다면 브라우저 쿠키에 자동으로 추가 된다.

 

 

6-2. 사파리

사파리의 경우 크롬(크롬계열)과 다르게 한가지 설정을 바꿔줘야한다.

기본적인 브라우저 정책이라, 직접 바꿔주는 방법 외에 해결 방법을 찾지 못했다.

 

 

---

 

이상으로 글을 마친다.