[AWS] CloudFront + S3 構成の環境を構築する | CloudFront FunctionsでBasic認証をかける

CloudFrontディストリビューションを作成する

1. https://console.aws.amazon.com/cloudfront/v3/home で CloudFront コンソールを開きます。

2. 「ディストリビューションを作成」をクリックする

3. オリジンドメイン名にS3バケットを設定する(オリジンパス、名前は自動で入力される)

4. S3 バケットアクセスを選択する

はい、OAI を使用します (バケットは CloudFront のみへのアクセスとなるように制限できます)

5.オリジンアクセスアイデンティティを作成する

「新しいOAIを作成」をクリックする

6.「ディストリビューションを作成」をクリックする

CloudFrontからS3へのアクセス権限を設定する

1. Amazon S3 > [プロジェクト名]へアクセス
2. 「アクセス許可」タブを選択
3. 「バケットポリシー」へ下記のポリシーを追加する

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "${CloudFront Origin Access Identity Key}"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "${S3のリソース}"
        }
    ]
}

CloudFront FunctionsでBasic認証のパスワードをかける

CloudFront Functionsとは

CloudFront Functions(CF2)はLambda@Edgeより手前で、シンプルな処理をより高速に、素早く、安価に実行できるサービスです。
CloudFront Functionsを使うことでこれまでLambda@Edgeで実行していたシンプルな処理をよりユーザーに近いEdge Locationで実行しつつ、高速に処理を行う事ができます

最大実行時間1ms未満というところが特徴です。
また現時点で JavaScript runtime 環境は ECMAScript (ES) バージョン 5.1 に準拠している。（また、ES バージョン 6 ～ 9 の一部の機能をサポートしており、ES 仕様に含まれない非標準メソッドも提供している）
Lambda@Edgeとの比較など下記参考：
https://dev.classmethod.jp/articles/amazon-cloudfront-functions-release/

JavaScript runtime 環境について参考: https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/functions-javascript-runtime-features.html

1. AWS CloudShellでecho -n "${ID}:${PASS}" | base64 を実行する
   ※先にBasic認証のID、PASSをbase64でエンコードしておく
   ※CloudFront Functionsには1ms 以内に処理を返さないといけない誓約があるため

2. https://console.aws.amazon.com/cloudfront/v3/home で CloudFront コンソールを開きます。

3. 左メニューの「関数」をクリックする

4. 「関数を作成」をクリックする

5. [関数を作成] - 名前を入力する

6. [関数を作成] - 説明を入力する

7. [関数コード] - 関数タブを選択する

8. [関数コード] - Basic認証判定の関数を実装する

function handler(event) {
  var request = event.request;
  var headers = request.headers;

  // echo -n user:pass | base64
  var authString = "Basic ${base64でエンコードされたIDとPASS}";

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}

参考： https://dev.classmethod.jp/articles/apply-basic-authentication-password-with-cloudfront-functions/

9.[関数コード] -「変更を保存」をクリックする