AWS CDKでCloudFront Functionを使ったリダイレクト環境を構築する

$ npm install -g aws-cdk

# バージョンの確認
$ cdk --version
2.58.1 (build 3d8df57)

$ cdk bootstrap aws://AWS_ACCOUNT_ID/AWS_REGION --profile PROFILE_NAME

 ⏳  Bootstrapping environment aws://123456789012/ap-northeast-1...
Trusted accounts for deployment: (none)
Trusted accounts for lookup: (none)
Using default execution policy of 'arn:aws:iam::aws:policy/AdministratorAccess'. Pass '--cloudformation-execution-policies' to customize.
CDKToolkit: creating CloudFormation changeset...
 ✅  Environment aws://123456789012/ap-northeast-1 bootstrapped.

$ mkdir example && cd $_
$ cdk init app --language typescript

Applying project template app for typescript
# Welcome to your CDK TypeScript project

This is a blank project for CDK development with TypeScript.

The `cdk.json` file tells the CDK Toolkit how to execute your app.

## Useful commands

* `npm run build`   compile typescript to js
* `npm run watch`   watch for changes and compile
* `npm run test`    perform the jest unit tests
* `cdk deploy`      deploy this stack to your default AWS account/region
* `cdk diff`        compare deployed stack with current state
* `cdk synth`       emits the synthesized CloudFormation template

Executing npm install...
✅ All done!

.
├── README.md
├── bin
│   └── example.ts # CDKアプリのエントリーポイント。lib/example-stack.tsのインスタンスを生成する。
├── cdk.json # ビルド設定や環境変数を定義する
├── jest.config.js
├── lib
│   └── example-stack.ts # CloudFormationスタックを定義する。
├── node_modules
│   └── ...
├── package-lock.json
├── package.json
├── test
│   └── example.test.ts
└── tsconfig.json

import * as cdk from "aws-cdk-lib";
import {
  aws_s3 as s3,
  aws_s3_deployment as s3deploy,
  aws_cloudfront as cf,
  aws_cloudfront_origins as cfo,
  aws_iam as iam,
} from "aws-cdk-lib";

import { Construct } from "constructs";

// アカウント名やリージョンは、AWS プロファイルから設定される
const { CDK_DEFAULT_ACCOUNT, CDK_DEFAULT_REGION } = process.env;
const prefix = `example-${CDK_DEFAULT_REGION}-${CDK_DEFAULT_ACCOUNT}`;

export class ExampleStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // S3 バケットを作成する
    // パブリックアクセスをすべてブロックする
    const bucket = new s3.Bucket(this, "S3Bucket", {
      bucketName: `${prefix}-bucket`,
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      versioned: false,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
    });

    // オリジンアクセスアイデンティティを作成する
    const identity = new cf.OriginAccessIdentity(this, "OriginAccessIdentity", {
      comment: `${bucket.bucketName} access identity`,
    });

    // オリジンアクセスアイデンティティに S3 のアクセスを許可する IAM を設定する
    const bucketPolicyStatement = new iam.PolicyStatement({
      actions: ["s3:GetObject"],
      effect: iam.Effect.ALLOW,
      principals: [identity.grantPrincipal],
      resources: [`${bucket.bucketArn}/*`],
    });
    bucket.addToResourcePolicy(bucketPolicyStatement);

    // CloudFront Function で動かす、リダイレクトスクリプトを設定する
    const cfFunction = new cf.Function(this, "CloudFrontFunction", {
      code: cf.FunctionCode.fromFile({
        filePath: "assets/redirect.js",
      }),
    });

    // CloudFront のディストリビューションを作成する
    const distribution = new cf.Distribution(this, "CloudFrontDistribution", {
      comment: "cloudfront distribution",
      defaultRootObject: "index.html",
      defaultBehavior: {
        allowedMethods: cf.AllowedMethods.ALLOW_GET_HEAD,
        cachedMethods: cf.CachedMethods.CACHE_GET_HEAD,
        cachePolicy: cf.CachePolicy.CACHING_OPTIMIZED,
        viewerProtocolPolicy: cf.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        origin: new cfo.S3Origin(bucket, {
          originAccessIdentity: identity,
        }),
        functionAssociations: [
          {
            function: cfFunction,
            eventType: cf.FunctionEventType.VIEWER_REQUEST,
          },
        ],
      },
      priceClass: cf.PriceClass.PRICE_CLASS_100,
    });

    // S3 バケットに index.html を置く
    new s3deploy.BucketDeployment(this, "BucketDeployment", {
      sources: [
        s3deploy.Source.data(
          "/index.html",
          "<html><body><h1>Hello World</h1></body></html>"
        ),
      ],
      destinationBucket: bucket,
      distribution: distribution,
      distributionPaths: ["/*"],
    });
  }
}

$ mkdir assets
$ touch assets/redirect.js

function handler(event) {
  var newUrl = `https://new.example.com`;

  var response = {
    statusCode: 302,
    statusDescription: "Found",
    headers: { location: { value: newUrl } },
  };

  return response;
}

$ cdk deploy --profile PROFILE_NAME

ExampleStack: building assets...

...
[100%] success: Published randomvalue:current_account-current_region

...

  Deployment time: ...

Stack ARN:
arn:aws:cloudformation:ap-northeast-1:123456789012:stack/ExampleStack/12345678-1234-1234-1234-123456789012

  Total time: ...

aws cloudfront list-distributions --profile PROFILE_NAME | jq '.DistributionList.Items[].DomainName'
"foo.cloudfront.net"

$ curl -I https://foo.cloudfront.net

HTTP/2 302
server: CloudFront
...
content-length: 0
location: https://new.example.com
x-cache: FunctionGeneratedResponse from cloudfront
via: 1.1 example-example.cloudfront.net (CloudFront)
...

$ cdk destroy example --profile PROFILE_NAME