0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-12-10

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.[関数コード] -「変更を保存」をクリックする

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?