skip to Main Content

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

2

Answers


  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)

    enter image description here

    Login or Signup to reply.
  2. You can use the S3Origin or HttpOrigin constructor in aws-cdk-lib/aws-cloudfront-origins to set up the originId (unique origin name) – and then add it in your CF distribution config as an origin of 1/more behaviors:

    const myOrigin = new S3Origin(bucketName, {
          originId: normalizedId,
          originPath: originPath,
          originAccessIdentity: ...,
          customHeaders: {
            ...
          },
        ...
        });
      }
    

    or

    const myOrigin = new HttpOrigin(domainName, {
              originId: normalizedId,
              originPath: originPath,
              customHeaders: {
                ...
              },
            ...
            });
          }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search