feat(lambda-at-edge-compat, lambda-at-edge, nextjs-component): let CloudFront do the Gzipping (#692)

Author: danielcondemarin

README.md

@@ -432,6 +432,7 @@ The fourth cache behaviour handles next API requests `api/*`.
 | logLambdaExecutionTimes  | `boolean`         | `false`                                                                                                                    | Logs to CloudWatch the default handler performance metrics.                                                                                                                                                                                                                                                                                                                      |
 | minifyHandlers           | `boolean`         | `false`                                                                                                                    | Use pre-built minified handlers to reduce code size. Does not minify custom handlers.                                                                                                                                                                                                                                                                                           |
 | deploy                   | `boolean`         | `true`                                                                                                                     | Whether to deploy resources to AWS. Useful if you just need the Lambdas and assets but want to deploy them yourself (available in latest alpha).                                                                                                                                                                                                                                 |
+| enableHTTPCompression    | `boolean`         | `false`                                                                                                                    | When set to `true` the Lambda@Edge functions for SSR and API requests will use Gzip to compress the response. Note that you shouldn't need to enable this because CloudFront will compress responses for you out of the box.                                                                                                                                                     |
 
 Custom inputs can be configured like this:
 

packages/compat-layers/lambda-at-edge-compat/README.md

@@ -20,3 +20,13 @@ module.exports.render = async (event, context) => {
   return responsePromise;
 };
 ```
+
+## Options
+
+### Gzip compression
+
+```js
+const { req, res, responsePromise } = cloudFrontCompat(event.Records[0].cf, {
+  enableHTTPCompression: true // false by default
+});
+```

packages/compat-layers/lambda-at-edge-compat/__tests__/next-aws-cloudfront.response.test.js

@@ -371,11 +371,10 @@ describe("Response Tests", () => {
     });
   });
 
-  it(`gzips`, () => {
-    expect.assertions(2);
+  it("does not gzip by default", () => {
+    expect.assertions(3);
 
     const gzipSpy = jest.spyOn(zlib, "gzipSync");
-    gzipSpy.mockReturnValueOnce(Buffer.from("ok-gzipped"));
 
     const { res, responsePromise } = create({
       request: {
@@ -393,6 +392,40 @@ describe("Response Tests", () => {
 
     res.end("ok");
 
+    return responsePromise.then((response) => {
+      expect(gzipSpy).not.toBeCalled();
+      expect(response.headers["content-encoding"]).not.toBeDefined();
+      expect(response.body).toEqual("b2s=");
+    });
+  });
+
+  it(`gzips when compression is enabled`, () => {
+    expect.assertions(2);
+
+    const gzipSpy = jest.spyOn(zlib, "gzipSync");
+    gzipSpy.mockReturnValueOnce(Buffer.from("ok-gzipped"));
+
+    const { res, responsePromise } = create(
+      {
+        request: {
+          path: "/",
+          headers: {
+            "accept-encoding": [
+              {
+                key: "Accept-Encoding",
+                value: "gzip"
+              }
+            ]
+          }
+        }
+      },
+      {
+        enableHTTPCompression: true
+      }
+    );
+
+    res.end("ok");
+
     gzipSpy.mockRestore();
 
     return responsePromise.then((response) => {

packages/compat-layers/lambda-at-edge-compat/next-aws-cloudfront.d.ts

@@ -1,9 +1,16 @@
 import { CloudFrontResultResponse, CloudFrontRequest } from "aws-lambda";
 import { IncomingMessage, ServerResponse } from "http";
 
-declare function lambdaAtEdgeCompat(event: {
-  request: CloudFrontRequest;
-}): {
+type CompatOptions = {
+  enableHTTPCompression: boolean;
+};
+
+declare function lambdaAtEdgeCompat(
+  event: {
+    request: CloudFrontRequest;
+  },
+  options: CompatOptions
+): {
   responsePromise: Promise<CloudFrontResultResponse>;
   req: IncomingMessage;
   res: ServerResponse;

packages/compat-layers/lambda-at-edge-compat/next-aws-cloudfront.js

@@ -144,7 +144,11 @@ const isGzipSupported = (headers) => {
   return gz;
 };
 
-const handler = (event) => {
+const defaultOptions = {
+  enableHTTPCompression: false
+};
+
+const handler = (event, { enableHTTPCompression } = defaultOptions) => {
   const { request: cfRequest, response: cfResponse = { headers: {} } } = event;
 
   const response = {
@@ -227,7 +231,7 @@ const handler = (event) => {
     ]);
   };
 
-  let gz = isGzipSupported(headers);
+  let shouldGzip = enableHTTPCompression && isGzipSupported(headers);
 
   const responsePromise = new Promise((resolve) => {
     res.end = (text) => {
@@ -245,14 +249,14 @@ const handler = (event) => {
 
       if (response.body) {
         response.bodyEncoding = "base64";
-        response.body = gz
+        response.body = shouldGzip
           ? zlib.gzipSync(response.body).toString("base64")
           : Buffer.from(response.body).toString("base64");
       }
 
       response.headers = toCloudFrontHeaders(res.headers, cfResponse.headers);
 
-      if (gz) {
+      if (shouldGzip) {
         response.headers["content-encoding"] = [
           { key: "Content-Encoding", value: "gzip" }
         ];

packages/e2e-tests/next-app/cypress/integration/pages.test.ts

@@ -18,6 +18,9 @@ describe("Pages Tests", () => {
         (method) => {
           it(`allows HTTP method for path ${path}: ${method}`, () => {
             cy.request({ url: path, method: method }).then((response) => {
+              if (method !== "HEAD") {
+                cy.verifyResponseIsCompressed(response);
+              }
               expect(response.status).to.equal(200);
             });
           });
@@ -46,6 +49,9 @@ describe("Pages Tests", () => {
         (method) => {
           it(`allows HTTP method for path ${path}: ${method}`, () => {
             cy.request({ url: path, method: method }).then((response) => {
+              if (method !== "HEAD") {
+                cy.verifyResponseIsCompressed(response);
+              }
               expect(response.status).to.equal(200);
             });
           });

packages/e2e-tests/test-utils/cypress/custom-commands.ts

@@ -44,6 +44,9 @@ declare namespace Cypress {
       response: Cypress.Response,
       shouldBeCached: boolean
     ) => Cypress.Chainable<JQuery>;
+    verifyResponseIsCompressed: (
+      response: Cypress.Response
+    ) => Cypress.Chainable<JQuery>;
   }
 }
 
@@ -140,3 +143,10 @@ Cypress.Commands.add(
     }
   }
 );
+
+Cypress.Commands.add(
+  "verifyResponseIsCompressed",
+  (response: Cypress.Response) => {
+    expect(response.headers["content-encoding"]).to.equal("gzip");
+  }
+);

packages/libs/lambda-at-edge/src/api-handler.ts

@@ -8,7 +8,7 @@ import {
   OriginRequestEvent,
   RoutesManifest
 } from "../types";
-import { CloudFrontResultResponse, CloudFrontRequest } from "aws-lambda";
+import { CloudFrontResultResponse } from "aws-lambda";
 import {
   createRedirectResponse,
   getDomainRedirectPath,
@@ -103,7 +103,9 @@ export const handler = async (
 
   // eslint-disable-next-line
   const page = require(`./${pagePath}`);
-  const { req, res, responsePromise } = cloudFrontCompat(event.Records[0].cf);
+  const { req, res, responsePromise } = cloudFrontCompat(event.Records[0].cf, {
+    enableHTTPCompression: buildManifest.enableHTTPCompression
+  });
 
   page.default(req, res);
 

packages/libs/lambda-at-edge/src/build.ts

@@ -35,6 +35,7 @@ type BuildOptions = {
   logLambdaExecutionTimes?: boolean;
   domainRedirects?: { [key: string]: string };
   minifyHandlers?: boolean;
+  enableHTTPCompression?: boolean;
   handler?: string;
 };
 
@@ -46,7 +47,8 @@ const defaultBuildOptions = {
   useServerlessTraceTarget: false,
   logLambdaExecutionTimes: false,
   domainRedirects: {},
-  minifyHandlers: false
+  minifyHandlers: false,
+  enableHTTPCompression: true
 };
 
 class Builder {
@@ -382,7 +384,8 @@ class Builder {
     );
     const {
       logLambdaExecutionTimes = false,
-      domainRedirects = {}
+      domainRedirects = {},
+      enableHTTPCompression = false
     } = this.buildOptions;
 
     this.normalizeDomainRedirects(domainRedirects);
@@ -402,15 +405,17 @@ class Builder {
       },
       publicFiles: {},
       trailingSlash: false,
-      domainRedirects: domainRedirects
+      domainRedirects: domainRedirects,
+      enableHTTPCompression
     };
 
     const apiBuildManifest: OriginRequestApiHandlerManifest = {
       apis: {
         dynamic: {},
         nonDynamic: {}
       },
-      domainRedirects: domainRedirects
+      domainRedirects: domainRedirects,
+      enableHTTPCompression
     };
 
     const ssrPages = defaultBuildManifest.pages.ssr;

packages/libs/lambda-at-edge/src/default-handler.ts

@@ -387,7 +387,12 @@ const handleOriginRequest = async ({
   log("require JS execution time", tBeforePageRequire, tAfterPageRequire);
 
   const tBeforeSSR = now();
-  const { req, res, responsePromise } = lambdaAtEdgeCompat(event.Records[0].cf);
+  const { req, res, responsePromise } = lambdaAtEdgeCompat(
+    event.Records[0].cf,
+    {
+      enableHTTPCompression: manifest.enableHTTPCompression
+    }
+  );
   try {
     // If page is _error.js, set status to 404 so _error.js will render a 404 page
     if (pagePath === "pages/_error.js") {
@@ -466,7 +471,10 @@ const handleOriginResponse = async ({
     // eslint-disable-next-line
     const page = require(`./${pagePath}`);
     const { req, res, responsePromise } = lambdaAtEdgeCompat(
-      event.Records[0].cf
+      event.Records[0].cf,
+      {
+        enableHTTPCompression: manifest.enableHTTPCompression
+      }
     );
     const isSSG = !!page.getStaticProps;
     const { renderOpts, html } = await page.renderReqToHTML(

packages/libs/lambda-at-edge/types.d.ts

@@ -21,6 +21,7 @@ export type OriginRequestApiHandlerManifest = {
   domainRedirects: {
     [key: string]: string;
   };
+  enableHTTPCompression: boolean;
 };
 
 export type OriginRequestDefaultHandlerManifest = {
@@ -44,6 +45,7 @@ export type OriginRequestDefaultHandlerManifest = {
     [key: string]: string;
   };
   trailingSlash: boolean;
+  enableHTTPCompression: boolean;
   domainRedirects: {
     [key: string]: string;
   };

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

@@ -198,6 +198,7 @@ class NextjsComponent extends Component {
           logLambdaExecutionTimes: inputs.logLambdaExecutionTimes || false,
           domainRedirects: inputs.domainRedirects || {},
           minifyHandlers: inputs.minifyHandlers || false,
+          enableHTTPCompression: false,
           handler: inputs.handler
             ? `${inputs.handler.split(".")[0]}.js`
             : undefined

packages/serverless-components/nextjs-component/types.d.ts

@@ -23,6 +23,7 @@ export type ServerlessComponentInputs = {
   minifyHandlers?: boolean;
   uploadStaticAssetsFromBuild?: boolean;
   deploy?: boolean;
+  enableHTTPCompression?: boolean;
 };
 
 type CloudfrontOptions = Record<string, any>;