feat(serverless-component): custom cache control config. for next public directory

Author: danielcondemarin

package-lock.json

@@ -35,7 +35,8 @@
     "aws-sdk": "^2.664.0",
     "fs-extra": "^9.0.0",
     "klaw": "^3.0.0",
-    "mime-types": "^2.1.27"
+    "mime-types": "^2.1.27",
+    "regex-parser": "^2.2.10"
   },
   "devDependencies": {
     "@types/fs-extra": "^8.1.0",

packages/s3-static-assets/package-lock.json

@@ -6,12 +6,16 @@ import filterOutDirectories from "./lib/filterOutDirectories";
 import { IMMUTABLE_CACHE_CONTROL_HEADER } from "./lib/constants";
 import S3ClientFactory, { Credentials } from "./lib/s3";
 import pathToPosix from "./lib/pathToPosix";
+import getPublicAssetCacheControl, {
+  PublicDirectoryCache
+} from "./lib/getPublicAssetCacheControl";
 
 type UploadStaticAssetsOptions = {
   bucketName: string;
   nextConfigDir: string;
   nextStaticDir?: string;
   credentials: Credentials;
+  publicDirectoryCache?: PublicDirectoryCache;
 };
 
 const uploadStaticAssets = async (
@@ -66,7 +70,8 @@ const uploadStaticAssets = async (
     });
 
   const uploadPublicOrStaticDirectory = async (
-    directory: "public" | "static"
+    directory: "public" | "static",
+    publicDirectoryCache?: PublicDirectoryCache
   ): Promise<Promise<AWS.S3.ManagedUpload.SendData>[]> => {
     const directoryPath = path.join(nextStaticDir, directory);
     if (!(await fse.pathExists(directoryPath))) {
@@ -80,13 +85,23 @@ const uploadStaticAssets = async (
         filePath: fileItem.path,
         s3Key: pathToPosix(
           path.relative(path.resolve(nextStaticDir), fileItem.path)
+        ),
+        cacheControl: getPublicAssetCacheControl(
+          fileItem.path,
+          publicDirectoryCache
         )
       })
     );
   };
 
-  const publicDirUploads = await uploadPublicOrStaticDirectory("public");
-  const staticDirUploads = await uploadPublicOrStaticDirectory("static");
+  const publicDirUploads = await uploadPublicOrStaticDirectory(
+    "public",
+    options.publicDirectoryCache
+  );
+  const staticDirUploads = await uploadPublicOrStaticDirectory(
+    "static",
+    options.publicDirectoryCache
+  );
 
   const allUploads = [
     ...buildStaticFileUploads, // .next/static

packages/s3-static-assets/package.json

@@ -1,2 +1,6 @@
 export const IMMUTABLE_CACHE_CONTROL_HEADER =
   "public, max-age=31536000, immutable";
+
+export const DEFAULT_PUBLIC_DIR_CACHE_CONTROL =
+  "public, max-age=31536000, must-revalidate";
+export const DEFAULT_PUBLIC_DIR_CACHE_REGEX = /\.(gif|jpe?g|jp2|tiff|png|webp|bmp|svg|ico)$/i;

packages/s3-static-assets/src/index.ts

@@ -0,0 +1,48 @@
+import path from "path";
+import regexParser from "regex-parser";
+import {
+  DEFAULT_PUBLIC_DIR_CACHE_CONTROL,
+  DEFAULT_PUBLIC_DIR_CACHE_REGEX
+} from "./constants";
+
+export type PublicDirectoryCache =
+  | boolean
+  | {
+      test?: string;
+      value?: string;
+    };
+
+/**
+ * If options is not present, or is explicitly set to true, returns a default Cache-Control configuration for image types.
+ * If options is explicitly set to false, it returns undefined.
+ * If assigned an options object, it uses whichever value is defined there, falling back to the default if one is not present.
+ */
+const getPublicAssetCacheControl = (
+  filePath: string,
+  options?: PublicDirectoryCache
+): string | undefined => {
+  if (options === false) {
+    return undefined;
+  }
+
+  let value: string = DEFAULT_PUBLIC_DIR_CACHE_CONTROL;
+  let test: RegExp = DEFAULT_PUBLIC_DIR_CACHE_REGEX;
+
+  if (typeof options === "object") {
+    if (options.value) {
+      value = options.value;
+    }
+
+    if (options.test) {
+      test = regexParser(options.test);
+    }
+  }
+
+  if (test.test(path.basename(filePath))) {
+    return value;
+  }
+
+  return undefined;
+};
+
+export default getPublicAssetCacheControl;

packages/s3-static-assets/src/lib/constants.ts

@@ -0,0 +1,4 @@
+{
+  "/todos/terms": "pages/todos/terms.html",
+  "/todos/terms/[section]": "pages/todos/terms/[section].html"
+}