AWS CDK v2.124.0 で CloudFront KeyValueStore の Functions への関連付けがサポートされました

npm i aws-cdk@latest aws-cdk-lib@latest

import cf from 'cloudfront';

const kvsId = 'KVS_ID';

const kvsHandle = cf.kvs(kvsId);

async function handler(event) {
  const request = event.request;
  const headers = request.headers;

  if (
    typeof headers.authorization === 'undefined' ||
    typeof headers.authorization.value === 'undefined'
  ) {
    return response401;
  }

  const encoded = headers.authorization.value.split(' ')[1];
  const decoded = Buffer.from(encoded, 'base64').toString();
  const userRequest = decoded.split(':')[0];
  const passRequest = decoded.split(':')[1];

  const exist = await kvsHandle.exists(userRequest);
  if (!exist) {
    return response401;
  }

  const passStore = await kvsHandle.get(userRequest);
  if (passStore !== passRequest) {
    return response401;
  }

  return request;
}

const response401 = {
  statusCode: 401,
  statusDescription: 'Unauthorized',
  headers: { 'www-authenticate': { value: 'Basic' } },
};

import {
  aws_cloudfront,
  aws_s3,
  aws_s3_deployment,
  aws_cloudfront_origins,
  Stack,
  RemovalPolicy,
  Duration,
  CfnOutput,
} from 'aws-cdk-lib';
import { Construct } from 'constructs';
import fs from 'fs';

// CloudFront Function のベーシック認証のコードを読み込む
const basicAuthScript = fs
  .readFileSync('src/cloudfront-function/basic-auth/index.js', {
    encoding: 'utf-8',
  })
  .replace(/\n/g, '');

export class CdkSampleStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    // S3 バケットの作成
    const websiteBucket = new aws_s3.Bucket(this, 'WebsiteBucket', {
      removalPolicy: RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });

    // CloudFront から S3 バケットへのアクセスを許可するために、
    // Origin Access Identity を作成し、S3 バケットのアクセスポリシーに追加する
    const originAccessIdentity = new aws_cloudfront.OriginAccessIdentity(
      this,
      'OriginAccessIdentity'
    );
    websiteBucket.grantRead(originAccessIdentity);

    // CloudFront KeyValueStore の作成
    const keyValueStore = new aws_cloudfront.KeyValueStore(
      this,
      'KeyValueStore'
    );

    // CloudFront Function の作成
    const cloudFrontFunction = new aws_cloudfront.Function(
      this,
      'AddSecurityHeadersToTheResponseFunction',
      {
        runtime: aws_cloudfront.FunctionRuntime.JS_2_0, // JavaScript runtime 2.0 を指定
        keyValueStore, // CloudFront Function と KeyValueStore の関連付け
        // CloudFront Function のコードをインライン指定
        code: aws_cloudfront.FunctionCode.fromInline(
          basicAuthScript.replace('KVS_ID', keyValueStore.keyValueStoreId)
        ),
      }
    );

    // CloudFront Destribution を作成
    const distribution = new aws_cloudfront.Distribution(this, 'Distribution', {
      defaultRootObject: 'index.html',
      errorResponses: [
        {
          ttl: Duration.minutes(5),
          httpStatus: 403,
          responseHttpStatus: 403,
          responsePagePath: '/error.html',
        },
        {
          ttl: Duration.minutes(5),
          httpStatus: 404,
          responseHttpStatus: 404,
          responsePagePath: '/error.html',
        },
      ],
      defaultBehavior: {
        viewerProtocolPolicy:
          aws_cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        origin: new aws_cloudfront_origins.S3Origin(websiteBucket, {
          originAccessIdentity,
        }),
        // CloudFront Function と Distribution の関連付け
        functionAssociations: [
          {
            function: cloudFrontFunction,
            eventType: aws_cloudfront.FunctionEventType.VIEWER_REQUEST,
          },
        ],
      },
    });

    // CloudFront Distribution のドメイン名を出力
    new CfnOutput(this, 'DistributionUrl', {
      value: `https://${distribution.distributionDomainName}`,
    });

    // S3 バケットへのコンテンツのデプロイ、CloudFront Distribution のキャッシュ削除
    new aws_s3_deployment.BucketDeployment(this, 'WebsiteDeploy', {
      distribution,
      destinationBucket: websiteBucket,
      distributionPaths: ['/*'],
      sources: [
        aws_s3_deployment.Source.data(
          '/index.html',
          '<html><body><h1>Hello, World!</h1></body></html>'
        ),
        aws_s3_deployment.Source.data(
          '/error.html',
          '<html><body><h1>Error!!!</h1></body></html>'
        ),
        aws_s3_deployment.Source.data('/favicon.ico', ''),
      ],
    });
  }
}

export class CdkSampleStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    // S3 バケットの作成
    // 省略

    // CloudFront から S3 バケットへのアクセスを許可するために、
    // Origin Access Identity を作成し、S3 バケットのアクセスポリシーに追加する
    // 省略

    // CloudFront KeyValueStore の作成
    // 省略

    // CloudFront Function の作成
    const cloudFrontFunction = new aws_cloudfront.Function(
      this,
      'AddSecurityHeadersToTheResponseFunction',
      {
        code: aws_cloudfront.FunctionCode
          .fromInline(`import cf from 'cloudfront';

const kvsId = '${keyValueStore.keyValueStoreId}';

const kvsHandle = cf.kvs(kvsId);

async function handler(event) {
  const request = event.request;
  const headers = request.headers;

  if (
    typeof headers.authorization === 'undefined' ||
    typeof headers.authorization.value === 'undefined'
  ) {
    return response401;
  }

  const encoded = headers.authorization.value.split(' ')[1];
  const decoded = Buffer.from(encoded, 'base64').toString();
  const userRequest = decoded.split(':')[0];
  const passRequest = decoded.split(':')[1];

  // KVS にユーザー名のキーが存在するかチェック
  const exist = await kvsHandle.exists(userRequest);
  if (!exist) {
    return response401;
  }

  // ユーザー名に対応するパスワードを KVS から取得し、リクエストのパスワードと一致するかチェック
  const passStore = await kvsHandle.get(userRequest);
  if (passStore !== passRequest) {
    return response401;
  }

  return request;
}

const response401 = {
  statusCode: 401,
  statusDescription: 'Unauthorized',
  headers: { 'www-authenticate': { value: 'Basic' } },
};`),
        // JavaScript runtime 2.0 を指定
        runtime: aws_cloudfront.FunctionRuntime.JS_2_0,
        keyValueStore,
      }
    );

    // CloudFront Destribution を作成
    // 省略

    // CloudFront Distribution のドメイン名を出力
    // 省略

    // S3 バケットへのコンテンツのデプロイ、CloudFront Distribution のキャッシュ削除
    // 省略
  }
}