How to set custom Origin Name in AWS CDK for CloudFront

Question

I'm seaching a way to customize the Origin Name (TargetOriginId) of CloudFront Distributions in AWS CDK. This is my existing code:

const backendCloudfront = new cloudfront.CloudFrontWebDistribution(this, 'BackendCF', {
  originConfigs: [
    {
      s3OriginSource: {
        s3BucketSource: s3Bucket,
        originAccessIdentity: oai,
      },
      behaviors: [{isDefaultBehavior: true}, { pathPattern: '/*', allowedMethods: cloudfront.CloudFrontAllowedMethods.GET_HEAD }],
    },
  ],
});

This is the generated ExampleStack.template.json:

"BackendCFCFDistribution7FE8ADFE": {
   "Type": "AWS::CloudFront::Distribution",
   "Properties": {
    "DistributionConfig": {
     "CacheBehaviors": [
      {
       "AllowedMethods": [
        "GET",
        "HEAD"
       ],
       "CachedMethods": [
        "GET",
        "HEAD"
       ],
       "Compress": true,
       "ForwardedValues": {
        "Cookies": {
         "Forward": "none"
        },
        "QueryString": false
       },
       "PathPattern": "/*",
       "TargetOriginId": "origin1",
       "ViewerProtocolPolicy": "redirect-to-https"
      }
     ],
[...]

I'm talking about this line of code of the generated json:

"TargetOriginId": "origin1",

How to change the Origin Name of this permanently, without touching the auto-generated json?

Screenshot of the AWS Console referring to Origin Name

Answer 1

I haven't found any indication in the CDK documentation to support changing the TargetOriginId, but the great thing about CDK is there are L1 constructs to support cases such as these. There is still a way to achieve what you want, it is just not as pretty as the L2 construct CloudFrontWebDistribution. Mind you under the hood L2 constructs are all made up of L1 constructs. This seems like a good open source contribution use case ;)

    const s3Bucket = new Bucket(this, "my-bucket");
    const oai = new OriginAccessIdentity(this, "my-oia");

    // Define the CloudFront distribution with CfnDistribution instead
    const backendCloudfront = new CfnDistribution(this, "BackendCF", {
      distributionConfig: {
        enabled: true,
        origins: [
          {
            domainName: s3Bucket.bucketDomainName,
            id: "myTargetName",
            s3OriginConfig: {
              originAccessIdentity: oai.originAccessIdentityId,
            },
          },
        ],
        defaultCacheBehavior: {
          targetOriginId: "myTargetName", // Referencing the origin by its ID above
          viewerProtocolPolicy: "allow-all",
          // Further configuration as needed
        },
        // Additional configuration: cache behaviors, comment, custom error responses, etc.
      },
    });

Then once you run cdk synth the generated CloudFront Distribution will have the proper TargetOriginId name (I'll provide the image of the template.json which the code snippet generated)