[AWS CDK] CloudFront Origin Access Identity を使用した S3 Bucket へのアクセス制限の動作を確認してみた

import * as cdk from "@aws-cdk/core";
import * as cloudfront from "@aws-cdk/aws-cloudfront";
import * as s3 from "@aws-cdk/aws-s3";
import * as s3deploy from "@aws-cdk/aws-s3-deployment";
import * as iam from "@aws-cdk/aws-iam";

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

    const accountId = cdk.Stack.of(this).account;

    // 1. OriginとなるS3 Bucket作成
    const websiteBucket = new s3.Bucket(this, "WebsiteBucket", {
      bucketName: `sample-app-${accountId}`,
      websiteErrorDocument: "index.html",
      websiteIndexDocument: "index.html",
    });

    // 2. Origin Access Identity作成
    const websiteIdentity = new cloudfront.OriginAccessIdentity(
      this,
      "WebsiteIdentity",
      {
        comment: `website-identity`,
      }
    );

    // 3. Origin Access Identityからのアクセスのみ許可するBucket Policyを作成
    const webSiteBucketPolicyStatement = new iam.PolicyStatement({
      actions: ["s3:GetObject"],
      effect: iam.Effect.ALLOW,
      principals: [
        new iam.CanonicalUserPrincipal(
          websiteIdentity.cloudFrontOriginAccessIdentityS3CanonicalUserId
        ),
      ],
      resources: [`${websiteBucket.bucketArn}/*`],
    });

    // 4. Bucket PolicyをS3 Bucketに適用
    websiteBucket.addToResourcePolicy(webSiteBucketPolicyStatement);

    // 5. CloudFront Distributionを作成
    const websiteDistribution = new cloudfront.CloudFrontWebDistribution(
      this,
      "WebsiteDistribution",
      {
        comment: `website-distribution`,
        errorConfigurations: [
          {
            errorCachingMinTtl: 300,
            errorCode: 403,
            responseCode: 200,
            responsePagePath: "/index.html",
          },
          {
            errorCachingMinTtl: 300,
            errorCode: 404,
            responseCode: 200,
            responsePagePath: "/index.html",
          },
        ],
        originConfigs: [
          {
            // 6. DistributionにOrigin情報（S3 Bucket、Origin Access Identity）を設定
            s3OriginSource: {
              s3BucketSource: websiteBucket,
              originAccessIdentity: websiteIdentity,
            },
            behaviors: [
              {
                isDefaultBehavior: true,
              },
            ],
          },
        ],
        priceClass: cloudfront.PriceClass.PRICE_CLASS_ALL,
      }
    );

    new s3deploy.BucketDeployment(this, "WebsiteDeploy", {
      sources: [s3deploy.Source.asset("./web/build")],
      destinationBucket: websiteBucket,
      distribution: websiteDistribution,
      distributionPaths: ["/*"],
    });
  }
}

    const websiteBucket = new s3.Bucket(this, "WebsiteBucket", {
      bucketName: `sample-app-${accountId}`,
      websiteErrorDocument: "index.html",
      websiteIndexDocument: "index.html",
      publicReadAccess: true,
    });

    const webSiteBucketPolicyStatement = new iam.PolicyStatement({
      actions: ["s3:GetObject"],
      effect: iam.Effect.ALLOW,
      principals: [new iam.AnyPrincipal()],
      resources: [`${websiteBucket.bucketArn}/*`],
    });