AWS CDK v2でS3 CloudFrontを使った静的ホスティングにBasic認証をかける

前回作成したAWSでの静的サイトホスティング(S3、CloudFront)にCloudFront Functionを利用したBasic認証をCDKで作成します。

前回作成したサービス構成図

AWS diagram

Basic認証用の関数の作成

jsファイルを作成していきます。この関数はクラスメソッド様の記事を利用しています。(CloudFront FunctionsでBasic認証のパスワードをかける )

authStringはuser:passの文字列をbase64エンコードしています。

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

  // echo -n user:pass | base64
  var authString = "Basic dXNlcjpwYXNz";

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

  return request;
}

CDKの作成

CloudFront Functionの作成

上記で作成したjsファイルを指定しています。(CloudFront Function CDK)

const cloudfrontFunction = new cloudfront.Function(
    this,
    "CloudFrontFunction",
    {
    code: cloudfront.FunctionCode.fromFile({
        filePath: "./functions/cloudfront-basic-auth.js",
    }),
    runtime: cloudfront.FunctionRuntime.JS_2_0,
    }
);

CloudFront ディストリビューションの作成

functionAssociationsでCloudFront Functionとイベントタイプを指定しています。

const distribution = new cloudfront.Distribution(
    this,
    "S3CloudfrontStaticWebsiteDistribution",
    {
    defaultBehavior: {
        origin: new origins.S3Origin(bucket),
        functionAssociations: [
            {
                function: cloudfrontFunction,
                eventType: cloudfront.FunctionEventType.VIEWER_REQUEST,
            },
        ],
    },
    defaultRootObject: "index.html",
    }
);

デプロイ

  1. CDKの作成ができたので、AWSにデプロイします。
cdk deploy
  1. CloudFrontにアクセスし、Basic認証が表示されることを確認します。
    xxxxxxxxxxxxxx.cloudfront.net

cloudfront


ソースコード

aws-cdk-s3-cloudfront (Github)

参考サイト