Add possibility to replace CloudFront functions in static-website and single-page-app constructs

Start from the Use-case

I want to override generated CloudFormation functions for static-website and single-page-app constructs and add custom code, like Basic Auth, custom headers and so on.

Example Config

For that purpose I create two files: cloudfrontRequestFunctions.js and cloudfrontResponseFunctions.js and reference them under resources in our serverless.ts:

    resources: {
        Resources: {
            defaultRequestFunction: {
                Type: "AWS::CloudFront::Function",
                Properties: {
                    AutoPublish: true,
                    FunctionCode: "${file(./cf_default/cloudfrontRequestFunctions.js)}",
                    FunctionConfig: {
                        Comment: "Request handler for ${sls:stage} environment",
                        Runtime: "cloudfront-js-1.0",
                    },
                    Name: "${self:service}-${sls:stage}-request",
                },
            },
            defaultResponseFunction: {
                Type: "AWS::CloudFront::Function",
                Properties: {
                    AutoPublish: true,
                    FunctionCode: "${file(./cf_default/cloudfrontResponseFunctions.js)}",
                    FunctionConfig: {
                        Comment: "Response handler for ${sls:stage} environment",
                        Runtime: "cloudfront-js-1.0",
                    },
                    Name: "${self:service}-${sls:stage}-response",
                },
            },
        },

And I use the extensions feature of constructs to override the functions:

    constructs: {
        build_public: {
            type: "single-page-app",
            path: "app/dist",

            extensions: {
                distribution: {
                    Properties: {
                        DistributionConfig: {
                            DefaultCacheBehavior: {
                                FunctionAssociations: [
                                    {
                                        EventType: "viewer-request",
                                        FunctionARN: {
                                            "Fn::GetAtt": ["defaultRequestFunction", "FunctionARN"],
                                        },
                                    },
                                    {
                                        EventType: "viewer-response",
                                        FunctionARN: {
                                            "Fn::GetAtt": ["defaultResponseFunction", "FunctionARN"],
                                        },
                                    },
                                ],
                            },
                        },
                    }
                }
            }
        }
    },

This works just fine, but the original CloudFront Functions from Lift still exist in the CloudFormation distribution and are created as well.

It results in a issue, that every distribution creates 4 CloudFront functions, and only 2 of them are used. We are extensively using temporary environments for each Merge Request and already reached the AWS CloudFront Function Limit.

Implementation Idea

The feature request is to extend current extensions block of static-website and single-page-app to include CloudFront Fucntions as well:

    constructs: {
        build_public: {
            type: "single-page-app",
            path: "app/dist",

            extensions: {
                function: {
                    request: AWS::CloudFront::Function,
                    response: AWS::CloudFront::Function,
                }
            }
        }
    },

Possible workaround currently ma be going over resources - extensions, but for that a CloudFormation name of a generated CloudFront Function needs to be known, which is hard, since it includes hash in the name. Example:

resources: {
    extensions: {
        buildpublicResponseFunctionHASH1234: {
                Properties: {
                    AutoPublish: true,
                    FunctionCode: "${file(./cf_default/cloudfrontRequestFunctions.js)}",
                    FunctionConfig: {
                        Comment: "Request handler for ${sls:stage} environment",
                        Runtime: "cloudfront-js-1.0",
                    },
                    Name: "${self:service}-${sls:stage}-request",
                },
            buildpublicRequestFunctionHASH5678: {
                Properties: {
                    AutoPublish: true,
                    FunctionCode: "${file(./cf_default/cloudfrontResponseFunctions.js)}",
                    FunctionConfig: {
                        Comment: "Response handler for ${sls:stage} environment",
                        Runtime: "cloudfront-js-1.0",
                    },
                    Name: "${self:service}-${sls:stage}-response",
                },
            },
        },
    },
},

getlift / lift