はじめに

久しぶりにAWSCDKを使って、静的アセットのデプロイを行っていたところ、OAI(Origin Access Identify)がLegacy扱いとなっていたため、OAC(Origin Access Control)に変更したときの備忘録です。

OAIを使った時のCDK

// s3
const s3 = new cdk.aws_s3.Bucket(this, 'bucket-id', {
    websiteIndexDocument: 'index.html',
    publicReadAccess: true
})

// OAI
const originAccessIdentity = new cdk.aws_cloudfront.OriginAccessIdentity(this, 'OriginAccessIdentity')

// cloudfront(distribution)
const distribution = new cdk.aws_cloudfront.Distribution(this, 'distribution-id', {
    defaultRootObject: 'index.html',
    defaultBehavior: {
        origin: new cdk.aws_cloudfront_origins.S3Origin(s3, { originAccessIdentity })
    },
})

const bucketPolicyStatement = new cdk.aws_iam.PolicyStatement({
    actions: ['s3:GetObject'],
    effect: cdk.aws_iam.Effect.ALLOW,
    principals: [
        new cdk.aws_iam.CanonicalUserPrincipal(originAccessIdentity.cloudFrontOriginAccessIdentityS3CanonicalUserId)
    ],
    resources: [`${s3.bucketArn}/*`]
})

s3.addToResourcePolicy(bucketPolicyStatement)

new cdk.aws_s3_deployment.BucketDeployment(this, 'CDKReactDeployPractice', {
    sources: [cdk.aws_s3_deployment.Source.asset('<appPath>')],
    destinationBucket: s3,
    distribution,
    distributionPaths: ['/*']
})

OACに変更する

// s3
const s3 = new cdk.aws_s3.Bucket(this, 'bucket-id', {
    websiteIndexDocument: 'index.html',
    blockPublicAccess: cdk.aws_s3.BlockPublicAccess.BLOCK_ALL
})

// OAC
const cfnOriginAccessControl = new cdk.aws_cloudfront.CfnOriginAccessControl(this, 'OriginAccessControl', {
    originAccessControlConfig: {
        name: 'OriginAccessControlForContentsBucket',
        originAccessControlOriginType: 's3',
        signingBehavior: 'always',
        signingProtocol: 'sigv4',
        description: 'Access Control',
    },
});

// cloudfront(distribution)
const distribution = new cdk.aws_cloudfront.Distribution(this, 'distribution-id', {
    defaultRootObject: 'index.html',
    defaultBehavior: {
        origin: new cdk.aws_cloudfront_origins.S3Origin(s3)
    },
})

const bucketPolicyStatement = new cdk.aws_iam.PolicyStatement({
    actions: ['s3:GetObject'],
    effect: cdk.aws_iam.Effect.ALLOW,
    principals: [
        new cdk.aws_iam.ServicePrincipal('cloudfront.amazonaws.com')
    ],
    resources: [`${s3.bucketArn}/*`]
})
bucketPolicyStatement.addCondition('StringEquals', {
    'AWS:SourceArn': `arn:aws:cloudfront::${cdk.Stack.of(this).account}:distribution/${distribution.distributionId}`
})

s3.addToResourcePolicy(bucketPolicyStatement)

const cfnDistribution = distribution.node.defaultChild as cdk.aws_cloudfront.CfnDistribution
cfnDistribution.addPropertyOverride('DistributionConfig.Origins.0.OriginAccessControlId', cfnOriginAccessControl.getAtt('Id'))
cfnDistribution.addPropertyOverride('DistributionConfig.Origins.0.DomainName', s3.bucketRegionalDomainName)
cfnDistribution.addOverride('Properties.DistributionConfig.Origins.0.S3OriginConfig.OriginAccessIdentity', "")
cfnDistribution.addPropertyDeletionOverride('DistributionConfig.Origins.0.CustomOriginConfig')

new cdk.aws_s3_deployment.BucketDeployment(this, 'CDKReactDeployPractice', {
    sources: [cdk.aws_s3_deployment.Source.asset('<appPath>')],
    destinationBucket: s3,
    distribution,
    distributionPaths: ['/*']
})

OACの作成

L2 Constructではまだ用意されていないので、L1 Constructを使って定義します。

const cfnOriginAccessControl = new cdk.aws_cloudfront.CfnOriginAccessControl(this, 'OriginAccessControl', {
    originAccessControlConfig: {
        name: 'OriginAccessControlForContentsBucket',
        originAccessControlOriginType: 's3',
        signingBehavior: 'always',
        signingProtocol: 'sigv4',
        description: 'Access Control',
    },
});

principalの設定

S3ポリシーのprincipalはOACではサービスを対象とします。

principals: [
-    new cdk.aws_iam.CanonicalUserPrincipal(originAccessIdentity.cloudFrontOriginAccessIdentityS3CanonicalUserId)
+    new cdk.aws_iam.ServicePrincipal('cloudfront.amazonaws.com')
],

AWS:SourceArnの設定

CloudFrontのArnからのアクセスに対応するよう設定を追加します。

+ bucketPolicyStatement.addCondition('StringEquals', {
+     'AWS:SourceArn': `arn:aws:cloudfront::${cdk.Stack.of(this).account}:distribution/${distribution.distributionId}`
+ })

CloudFrontのオリジン設定を変更

OAIを使うときの設定がデフォルトで行われるため、OACに適応したテンプレートに上書きします。

const cfnDistribution = distribution.node.defaultChild as cdk.aws_cloudfront.CfnDistribution
// OACのidを指定する
cfnDistribution.addPropertyOverride('DistributionConfig.Origins.0.OriginAccessControlId', cfnOriginAccessControl.getAtt('Id'))
// デフォルトではs3のWebsiteURLが設定されてエラーとなるため、S3のドメイン名を設定する
cfnDistribution.addPropertyOverride('DistributionConfig.Origins.0.DomainName', s3.bucketRegionalDomainName)
// OAIの設定は不要のため、空文字で上書き
cfnDistribution.addOverride('Properties.DistributionConfig.Origins.0.S3OriginConfig.OriginAccessIdentity', "")
// OACではCustomOriginConfigは不要
cfnDistribution.addPropertyDeletionOverride('DistributionConfig.Origins.0.CustomOriginConfig')

S3のドメイン名はs3.bucketDomainNameでも良いが、CloudFrontに反映されるまで時間を要するため、理由がない限りはリージョンを含めたドメイン名を設定するのがよいかと。

トラブルシューティング

OACに変更する際に発生したエラーと解消方法を以下に記載しておきますので、参考になれば幸いです。

The origin type and OAC origin type differ

OACで設定するS3Originの値はWebsiteURLではなく、バケットのドメイン名を設定する必要があります。デフォルトではOAIを使った設定でテンプレートが作成されるので、上書きする必要があります。

cfnDistribution.addPropertyOverride('DistributionConfig.Origins.0.DomainName', s3.bucketRegionalDomainName)

Exactly one of CustomOriginConfig and S3OriginConfig must be specified

S3OriginConfigとCustomOriginConfigはOACにおいて不要なので、上書き及び削除の対応が必要になります。

cfnDistribution.addOverride('Properties.DistributionConfig.Origins.0.S3OriginConfig.OriginAccessIdentity', "")
cfnDistribution.addPropertyDeletionOverride('DistributionConfig.Origins.0.CustomOriginConfig')

おわりに

OACがL2 Constructで設定できるようになると、この辺の対応は不要になるかなと。

世界中の天才が作ってくれています。感謝感謝。
CDKでどのようにテンプレートが作られているか、深く知ることができたので自分にとっては大きな収穫でした。
S3+CloudFrontでOACを使った構成を考えている方の参考になれば幸いです。

Discussion