feat(serverless-component): custom cloudfront.origins input (#376)

Author: Gehan Gonsalkorale

packages/serverless-component/README.md

@@ -111,6 +111,15 @@ myNextApplication:
           headers: [CloudFront-Is-Desktop-Viewer, CloudFront-Is-Mobile-Viewer, CloudFront-Is-Tablet-Viewer]
       api: # options for lambdas that handle API request
         ttl: 10
+      origins: # options for custom origins and behaviors
+        - url: /static
+          pathPatterns:
+            /wp-content/*:
+              ttl: 10
+        - url: https://old-static.com
+          pathPatterns:
+            /old-static/*:
+              ttl: 10
 ```
 
 The example above adds headers that can be forwarded to the SSR lambda, and sets the *ttl* for api lambdas.

packages/serverless-component/__tests__/custom-inputs.test.js

@@ -256,11 +256,30 @@ describe("Custom inputs", () => {
     [
       { api: { ttl: 500, "lambda@edge": "ignored value" } },
       { api: { ttl: 500 } } // expecting lambda@edge value to be ignored
+    ],
+    [
+      {
+        origins: [
+          "http://some-origin",
+          "/relative",
+          { url: "http://diff-origin" },
+          { url: "/diff-relative" }
+        ]
+      },
+      {
+        origins: [
+          "http://some-origin",
+          "http://bucket-xyz.s3.amazonaws.com/relative",
+          { url: "http://diff-origin" },
+          { url: "http://bucket-xyz.s3.amazonaws.com/diff-relative" }
+        ]
+      }
     ]
   ])("Custom cloudfront inputs", (inputCloudfrontConfig, expectedInConfig) => {
     const fixturePath = path.join(__dirname, "./fixtures/generic-fixture");
     const defaultCloudfrontInputs = expectedInConfig.defaults || {};
     const apiCloudfrontInputs = expectedInConfig.api || {};
+    const originCloudfrontInputs = expectedInConfig.origins || [];
     const cloudfrontConfig = {
       defaults: {
         ttl: 0,
@@ -301,7 +320,8 @@ describe("Custom inputs", () => {
           },
           private: true,
           url: "http://bucket-xyz.s3.amazonaws.com"
-        }
+        },
+        ...originCloudfrontInputs
       ]
     };
 

packages/serverless-component/serverless.js

@@ -153,6 +153,29 @@ class NextjsComponent extends Component {
     };
 
     const bucketUrl = `http://${bucketOutputs.name}.s3.amazonaws.com`;
+
+    // If origin is relative path then prepend the bucketUrl
+    // e.g. /path => http://bucket.s3.aws.com/path
+    const expandRelativeUrls = origin => {
+      const originUrl = typeof origin === "string" ? origin : origin.url;
+      const fullOriginUrl =
+        originUrl.charAt(0) === "/" ? `${bucketUrl}${originUrl}` : originUrl;
+
+      if (typeof origin === "string") {
+        return fullOriginUrl;
+      } else {
+        return {
+          ...origin,
+          url: fullOriginUrl
+        };
+      }
+    };
+    // Parse origins from inputs
+    const inputOrigins = (
+      (inputs.cloudfront && inputs.cloudfront.origins) ||
+      []
+    ).map(expandRelativeUrls);
+
     const cloudFrontOrigins = [
       {
         url: bucketUrl,
@@ -165,7 +188,8 @@ class NextjsComponent extends Component {
             ttl: 86400
           }
         }
-      }
+      },
+      ...inputOrigins
     ];
 
     let apiEdgeLambdaOutputs;