feat(aws-cloudfront, nextjs-component): support setting WAF web ACL id

packages/serverless-components/aws-cloudfront/__tests__/general-options.test.js

@@ -176,4 +176,71 @@ describe("General options propagation", () => {
       })
     );
   });
+
+  it("create distribution with web ACL id and update it", async () => {
+    // Create
+    await component.default({
+      webACLId:
+        "arn:aws:wafv2:us-east-1:123456789012:global/webacl/ExampleWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a",
+      origins
+    });
+
+    expect(mockCreateDistribution).toBeCalledWith(
+      expect.objectContaining({
+        DistributionConfig: expect.objectContaining({
+          WebACLId:
+            "arn:aws:wafv2:us-east-1:123456789012:global/webacl/ExampleWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a"
+        })
+      })
+    );
+
+    // Update
+    await component.default({
+      webACLId:
+        "arn:aws:wafv2:us-east-1:123456789012:global/webacl/UpdatedWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a",
+      origins
+    });
+
+    expect(mockUpdateDistribution).toBeCalledWith(
+      expect.objectContaining({
+        DistributionConfig: expect.objectContaining({
+          WebACLId:
+            "arn:aws:wafv2:us-east-1:123456789012:global/webacl/UpdatedWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a"
+        })
+      })
+    );
+  });
+
+  it("create distribution with web ACL id and delete it", async () => {
+    // Create
+    await component.default({
+      webACLId:
+        "arn:aws:wafv2:us-east-1:123456789012:global/webacl/ExampleWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a",
+      origins
+    });
+
+    expect(mockCreateDistribution).toBeCalledWith(
+      expect.objectContaining({
+        DistributionConfig: expect.objectContaining({
+          WebACLId:
+            "arn:aws:wafv2:us-east-1:123456789012:global/webacl/ExampleWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a"
+        })
+      })
+    );
+
+    // Delete
+    // Per AWS, providing an empty ACLId will remove the WAF association: https://docs.aws.amazon.com/waf/latest/APIReference/API_DisassociateWebACL.html
+    await component.default({
+      webACLId: "",
+      origins
+    });
+
+    expect(mockUpdateDistribution).toBeCalledWith(
+      expect.objectContaining({
+        DistributionConfig: expect.objectContaining({
+          WebACLId: ""
+        })
+      })
+    );
+  });
 });

packages/serverless-components/aws-cloudfront/lib/index.js

@@ -91,6 +91,11 @@ const createCloudFrontDistribution = async (cf, s3, inputs) => {
   const CustomErrorResponses = getCustomErrorResponses(inputs.errorPages);
   distributionConfig.CustomErrorResponses = CustomErrorResponses;
 
+  // Set WAF web ACL id if defined
+  if (inputs.webACLId !== undefined && inputs.webACLId !== null) {
+    distributionConfig.WebACLId = inputs.webACLId;
+  }
+
   const res = await cf.createDistribution(params).promise();
 
   return {
@@ -136,6 +141,11 @@ const updateCloudFrontDistribution = async (cf, s3, distributionId, inputs) => {
     };
   }
 
+  // When updating, don't override any existing webACLId if not set in inputs
+  if (inputs.webACLId !== undefined && inputs.webACLId !== null) {
+    params.DistributionConfig.WebACLId = inputs.webACLId;
+  }
+
   let s3CanonicalUserId;
   let originAccessIdentityId;
 

packages/serverless-components/aws-cloudfront/serverless.js

@@ -59,7 +59,8 @@ class CloudFront extends Component {
         !equals(this.state.comment, inputs.comment) ||
         !equals(this.state.aliases, inputs.aliases) ||
         !equals(this.state.priceClass, inputs.priceClass) ||
-        !equals(this.state.errorPages, inputs.errorPages)
+        !equals(this.state.errorPages, inputs.errorPages) ||
+        !equals(this.state.webACLId, inputs.webACLId)
       ) {
         this.context.debug(
           `Updating CloudFront distribution of ID ${this.state.id}.`

packages/serverless-components/nextjs-component/__tests__/custom-inputs.test.ts

@@ -1075,5 +1075,14 @@ describe("Custom inputs", () => {
         }
       });
     });
+
+    it("sets web ACL id for AWS WAF", async () => {
+      await createNextComponent().default({
+        cloudfront: {
+          webACLId:
+            "arn:aws:wafv2:us-east-1:123456789012:global/webacl/ExampleWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a"
+        }
+      });
+    });
   });
 });

packages/serverless-components/nextjs-component/src/component.ts

@@ -239,6 +239,7 @@ class NextjsComponent extends Component {
       errorPages: cloudFrontErrorPagesInputs,
       distributionId: cloudFrontDistributionId = null,
       comment: cloudFrontComment,
+      webACLId: cloudFrontWebACLId,
       ...cloudFrontOtherInputs
     } = inputs.cloudfront || {};
 
@@ -587,7 +588,8 @@ class NextjsComponent extends Component {
       ...(cloudFrontErrorPagesInputs && {
         errorPages: cloudFrontErrorPagesInputs
       }),
-      comment: cloudFrontComment
+      comment: cloudFrontComment,
+      webACLId: cloudFrontWebACLId
     });
 
     let appUrl = cloudFrontOutputs.url;