fix(nextjs-component, cloudfront): wait for distribution to be ready before creating invalidations (#1281)

Author: dphang

README.md

@@ -244,6 +244,7 @@ myNextApplication:
         minimumProtocolVersion: "TLSv1.2_2019" # can be omitted, defaults to "TLSv1.2_2019"
       originAccessIdentityId: XYZEXAMPLE #optional
       paths: ["/*"] # which paths should be invalidated on deploy, default matches everything, empty array skips invalidation completely
+      waitBeforeInvalidate: true # by default true, it waits for the CloudFront distribution to have completed before invalidating, to avoid possibly caching old page
 ```
 
 This is particularly useful for caching any of your Next.js pages at CloudFront's edge locations. See [this](https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/serverless-components/nextjs-component/examples/app-with-custom-caching-config) for an example application with custom cache configuration.
@@ -527,8 +528,6 @@ The fourth cache behaviour handles next API requests `api/*`.
 | authentication.password  | `string`          | `undefined`                                                        | Password for basic authentication. **Note: it is highly recommended not to reuse a password here as it gets inlined in plaintext in the Lambda handler.**                                                                                                                                                                                                                                                                                                                             |
 | enableS3Acceleration     | `boolean`         | `true`                                                             | Whether to enable S3 transfer acceleration. This may be useful to disable as some AWS regions do not support it. See [reference](https://docs.amazonaws.cn/en_us/aws/latest/userguide/s3.html).                                                                                                                                                                                                                                                                                       |
 
-|
-
 Custom inputs can be configured like this:
 
 ```yaml

packages/libs/cloudfront/src/index.ts

@@ -7,7 +7,7 @@ export type CreateInvalidationOptions = {
   paths?: string[];
 };
 
-const createInvalidation = async (
+const createInvalidation = (
   options: CreateInvalidationOptions
 ): Promise<AWS.CloudFront.CreateInvalidationResult> => {
   const { credentials, distributionId, paths } = options;
@@ -18,4 +18,36 @@ const createInvalidation = async (
   return cf.createInvalidation({ distributionId, paths });
 };
 
-export default createInvalidation;
+export type CheckCloudFrontDistributionReadyOptions = {
+  credentials: Credentials;
+  distributionId: string;
+  waitDuration: number;
+  pollInterval: number;
+};
+
+const checkCloudFrontDistributionReady = async (
+  options: CheckCloudFrontDistributionReadyOptions
+): Promise<boolean> => {
+  const { credentials, distributionId, waitDuration, pollInterval } = options;
+  const startDate = new Date();
+  const startTime = startDate.getTime();
+  const waitDurationMillis = waitDuration * 1000;
+
+  const cf = CloudFrontClientFactory({
+    credentials
+  });
+
+  while (new Date().getTime() - startTime < waitDurationMillis) {
+    const result = await cf.getDistribution(distributionId);
+
+    if (result.Distribution?.Status === "Deployed") {
+      return true;
+    }
+
+    await new Promise((r) => setTimeout(r, pollInterval * 1000));
+  }
+
+  return false;
+};
+
+export { createInvalidation, checkCloudFrontDistributionReady };

packages/libs/cloudfront/src/lib/cloudfront.ts

@@ -15,6 +15,9 @@ export type CloudFrontClient = {
   createInvalidation: (
     options: CreateInvalidationOptions
   ) => Promise<AWS.CloudFront.CreateInvalidationResult>;
+  getDistribution: (
+    distributionId: string
+  ) => Promise<AWS.CloudFront.GetDistributionResult>;
 };
 
 export type Credentials = {
@@ -51,6 +54,15 @@ export default ({
           }
         })
         .promise();
+    },
+    getDistribution: async (
+      distributionId: string
+    ): Promise<AWS.CloudFront.GetDistributionResult> => {
+      return await cloudFront
+        .getDistribution({
+          Id: distributionId
+        })
+        .promise();
     }
   };
 };

packages/libs/cloudfront/tests/aws-sdk.mock.ts

@@ -1,6 +1,8 @@
 declare module "aws-sdk" {
   const mockCreateInvalidation: jest.Mock;
   const mockCreateInvalidationPromise: jest.Mock;
+  const mockGetDistribution: jest.Mock;
+  const mockGetDistributionPromise: jest.Mock;
 }
 
 const promisifyMock = (mockFn: jest.Mock): jest.Mock => {
@@ -14,8 +16,12 @@ export const mockCreateInvalidationPromise = promisifyMock(
   mockCreateInvalidation
 );
 
+export const mockGetDistribution = jest.fn();
+export const mockGetDistributionPromise = promisifyMock(mockGetDistribution);
+
 const MockCloudFront = jest.fn(() => ({
-  createInvalidation: mockCreateInvalidation
+  createInvalidation: mockCreateInvalidation,
+  getDistribution: mockGetDistribution
 }));
 
 export default {

packages/libs/cloudfront/tests/cache-invalidation.test.ts

@@ -1,5 +1,5 @@
 import AWS, { mockCreateInvalidation } from "aws-sdk";
-import createInvalidation, { CreateInvalidationOptions } from "../src/index";
+import { createInvalidation, CreateInvalidationOptions } from "../src/index";
 import { ALL_FILES_PATH } from "../src/lib/constants";
 
 jest.mock("aws-sdk", () => require("./aws-sdk.mock"));

packages/libs/cloudfront/tests/check-cf-distribution-ready.test.ts

@@ -0,0 +1,71 @@
+import AWS, { mockGetDistribution } from "aws-sdk";
+import {
+  checkCloudFrontDistributionReady,
+  CheckCloudFrontDistributionReadyOptions
+} from "../src/index";
+
+jest.mock("aws-sdk", () => require("./aws-sdk.mock"));
+
+const checkReady = (
+  options: Partial<CheckCloudFrontDistributionReadyOptions> = {}
+): Promise<boolean> => {
+  return checkCloudFrontDistributionReady({
+    ...options,
+    distributionId: "fake-distribution-id",
+    credentials: {
+      accessKeyId: "fake-access-key",
+      secretAccessKey: "fake-secret-key",
+      sessionToken: "fake-session-token"
+    },
+    waitDuration: 1,
+    pollInterval: 1
+  });
+};
+
+describe("Check CloudFront distribution ready tests", () => {
+  it("passes credentials to CloudFront client", async () => {
+    mockGetDistribution.mockReturnValue({
+      promise: () => {
+        return {
+          Distribution: {
+            Status: "Deployed"
+          }
+        };
+      }
+    });
+
+    await checkReady();
+
+    expect(AWS.CloudFront).toBeCalledWith({
+      credentials: {
+        accessKeyId: "fake-access-key",
+        secretAccessKey: "fake-secret-key",
+        sessionToken: "fake-session-token"
+      }
+    });
+  });
+
+  it("successfully waits for CloudFront distribution", async () => {
+    const isReady = await checkReady();
+
+    expect(isReady).toBe(true);
+    expect(mockGetDistribution).toBeCalledWith({ Id: "fake-distribution-id" });
+  });
+
+  it("times out waiting for CloudFront distribution", async () => {
+    mockGetDistribution.mockReturnValue({
+      promise: () => {
+        return {
+          Distribution: {
+            Status: "InProgress"
+          }
+        };
+      }
+    });
+
+    const isReady = await checkReady();
+
+    expect(isReady).toBe(false);
+    expect(mockGetDistribution).toBeCalledWith({ Id: "fake-distribution-id" });
+  });
+});

packages/serverless-components/nextjs-component/__mocks__/@sls-next/cloudfront.js

@@ -1 +1,9 @@
-module.exports = jest.fn();
+const mockCreateInvalidation = jest.fn();
+const mockCheckCloudFrontDistributionReady = jest.fn();
+
+module.exports = {
+  mockCreateInvalidation,
+  mockCheckCloudFrontDistributionReady,
+  checkCloudFrontDistributionReady: mockCheckCloudFrontDistributionReady,
+  createInvalidation: mockCreateInvalidation
+};

packages/serverless-components/nextjs-component/__tests__/basepath.test.ts

@@ -60,6 +60,9 @@ describe("basepath tests", () => {
         secretAccessKey: "456"
       }
     };
+    component.context.debug = () => {
+      // intentionally empty
+    };
 
     await component.build();
 

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

@@ -4,7 +4,7 @@ import { mockDomain } from "@sls-next/domain";
 import { mockS3 } from "@serverless/aws-s3";
 import { mockUpload } from "aws-sdk";
 import { mockLambda, mockLambdaPublish } from "@sls-next/aws-lambda";
-import mockCreateInvalidation from "@sls-next/cloudfront";
+import { mockCreateInvalidation } from "@sls-next/cloudfront";
 import { mockCloudFront } from "@sls-next/aws-cloudfront";
 import { mockSQS } from "@sls-next/aws-sqs";
 
@@ -26,6 +26,9 @@ const createNextComponent = () => {
       secretAccessKey: "456"
     }
   };
+  component.context.debug = () => {
+    // intentionally empty
+  };
   return component;
 };
 

packages/serverless-components/nextjs-component/__tests__/deploy.test.ts

@@ -3,7 +3,10 @@ import fse from "fs-extra";
 import { mockS3 } from "@serverless/aws-s3";
 import { mockCloudFront } from "@sls-next/aws-cloudfront";
 import { mockLambda, mockLambdaPublish } from "@sls-next/aws-lambda";
-import mockCreateInvalidation from "@sls-next/cloudfront";
+import {
+  mockCreateInvalidation,
+  mockCheckCloudFrontDistributionReady
+} from "@sls-next/cloudfront";
 import NextjsComponent from "../src/component";
 import { mockSQS } from "@sls-next/aws-sqs";
 import {
@@ -82,6 +85,9 @@ describe.each`
         secretAccessKey: "456"
       }
     };
+    component.context.debug = () => {
+      // intentionally empty
+    };
 
     await component.build();
 
@@ -384,6 +390,16 @@ describe.each`
     });
 
     it("invalidates distribution cache", () => {
+      expect(mockCheckCloudFrontDistributionReady).toBeCalledWith({
+        credentials: {
+          accessKeyId: "123",
+          secretAccessKey: "456"
+        },
+        distributionId: "cloudfrontdistrib",
+        pollInterval: 10,
+        waitDuration: 600
+      });
+
       expect(mockCreateInvalidation).toBeCalledWith({
         credentials: {
           accessKeyId: "123",

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

@@ -13,7 +13,10 @@ import {
   deleteOldStaticAssets,
   uploadStaticAssetsFromBuild
 } from "@sls-next/s3-static-assets";
-import createInvalidation from "@sls-next/cloudfront";
+import {
+  createInvalidation,
+  checkCloudFrontDistributionReady
+} from "@sls-next/cloudfront";
 import obtainDomains from "./lib/obtainDomains";
 import {
   DEFAULT_LAMBDA_CODE_DIR,
@@ -310,6 +313,7 @@ class NextjsComponent extends Component {
       certificate: cloudFrontCertificate,
       originAccessIdentityId: cloudFrontOriginAccessIdentityId,
       paths: cloudFrontPaths,
+      waitBeforeInvalidate: cloudFrontWaitBeforeInvalidate = true,
       ...cloudFrontOtherInputs
     } = inputs.cloudfront || {};
 
@@ -850,12 +854,36 @@ class NextjsComponent extends Component {
 
     let appUrl = cloudFrontOutputs.url;
 
+    const distributionId = cloudFrontOutputs.id;
     if (!cloudFrontPaths || cloudFrontPaths.length) {
+      // We need to wait for distribution to be fully propagated before trying to invalidate paths, otherwise we may cache old page
+      // This could add ~1-2 minute to deploy time but it is safer
+      const waitDuration = 600;
+      const pollInterval = 10;
+      if (cloudFrontWaitBeforeInvalidate) {
+        this.context.debug(
+          `Waiting for CloudFront distribution ${distributionId} to be ready before invalidations, for up to ${waitDuration} seconds, checking every ${pollInterval} seconds.`
+        );
+        await checkCloudFrontDistributionReady({
+          distributionId: distributionId,
+          credentials: this.context.credentials.aws,
+          waitDuration: waitDuration,
+          pollInterval: pollInterval
+        });
+      } else {
+        this.context.debug(
+          `Skipped waiting for CloudFront distribution ${distributionId} to be ready.`
+        );
+      }
+
+      this.context.debug(`Creating invalidations on ${distributionId}.`);
       await createInvalidation({
-        distributionId: cloudFrontOutputs.id,
+        distributionId: distributionId,
         credentials: this.context.credentials.aws,
         paths: cloudFrontPaths
       });
+    } else {
+      this.context.debug(`No invalidations needed for ${distributionId}.`);
     }
 
     const { domain, subdomain } = obtainDomains(inputs.domain);