Use pixel package (#90)

Uses pixel library as wrapper for the Next.js image optimization API

Author: ofhouse

.github/workflows/CI.yml

@@ -9,9 +9,11 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    container: registry.gitlab.com/dealmore/dealmore-build-images/lambda:nodejs14.x
-
+    container: public.ecr.aws/sam/build-nodejs14.x:latest
     steps:
+      - name: Install yarn
+        run: npm install --global [email protected]
+
       - uses: actions/checkout@v2
 
       - name: Cache
@@ -38,7 +40,7 @@ jobs:
 
   test-integration:
     runs-on: ubuntu-latest
-    container: registry.gitlab.com/dealmore/dealmore-build-images/lambda:nodejs14.x
+    container: public.ecr.aws/sam/build-nodejs14.x:latest
 
     services:
       s3:
@@ -48,6 +50,9 @@ jobs:
           MINIO_SECRET_KEY: testtest
 
     steps:
+      - name: Install yarn
+        run: npm install --global [email protected]
+
       - uses: actions/checkout@v2
 
       - name: Cache

lib/handler.ts

@@ -97,14 +97,14 @@ export async function handler(
   resMock._write = (chunk: Buffer | string) => {
     resMock.write(chunk);
   };
-  const mockHeaders: Record<string, string | string[]> = {};
+  const mockHeaders: Map<string, string | string[]> = new Map();
   resMock.writeHead = (_status: any, _headers: any) =>
     Object.assign(mockHeaders, _headers);
-  resMock.getHeader = (name: string) => mockHeaders[name.toLowerCase()];
+  resMock.getHeader = (name: string) => mockHeaders.get(name.toLowerCase());
   resMock.getHeaders = () => mockHeaders;
   resMock.getHeaderNames = () => Object.keys(mockHeaders);
   resMock.setHeader = (name: string, value: string | string[]) =>
-    (mockHeaders[name.toLowerCase()] = value);
+    mockHeaders.set(name.toLowerCase(), value);
   // Empty function is tolerable here since it is part of a mock
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   resMock._implicitHeader = () => {};
@@ -117,7 +117,7 @@ export async function handler(
   };
 
   const parsedUrl = parseUrl(reqMock.url, true);
-  const result = await imageOptimizer(
+  await imageOptimizer(
     imageConfig,
     reqMock as IncomingMessage,
     resMock,
@@ -126,7 +126,7 @@ export async function handler(
   );
 
   const normalizedHeaders: Record<string, string> = {};
-  for (const [headerKey, headerValue] of Object.entries(mockHeaders)) {
+  for (const [headerKey, headerValue] of mockHeaders.entries()) {
     if (Array.isArray(headerValue)) {
       normalizedHeaders[headerKey] = headerValue.join(', ');
       continue;
@@ -135,12 +135,6 @@ export async function handler(
     normalizedHeaders[headerKey] = headerValue;
   }
 
-  if (result.originCacheControl) {
-    normalizedHeaders['cache-control'] = result.originCacheControl;
-  } else {
-    normalizedHeaders['cache-control'] = 'public, max-age=60';
-  }
-
   if (didCallEnd) defer.resolve();
   await defer.promise;
 

lib/image-optimizer.ts

@@ -1,56 +1,23 @@
 import { IncomingMessage, ServerResponse } from 'http';
+import { UrlWithParsedQuery } from 'url';
+
+import {
+  imageOptimizer as pixel,
+  ImageOptimizerOptions,
+} from '@millihq/pixel-core';
 import { ImageConfig } from 'next/dist/server/image-config';
-import { NextConfig } from 'next/dist/server/config';
-import { imageOptimizer as nextImageOptimizer } from 'next/dist/server/image-optimizer';
-import Server from 'next/dist/server/next-server';
 import nodeFetch from 'node-fetch';
-import { UrlWithParsedQuery } from 'url';
 import S3 from 'aws-sdk/clients/s3';
 
 /* -----------------------------------------------------------------------------
  * Types
  * ---------------------------------------------------------------------------*/
 
-type NodeFetch = typeof nodeFetch;
-
-type OriginCacheControl = string | null;
-
 interface S3Config {
   s3: S3;
   bucket: string;
 }
 
-type ImageOptimizerResult = {
-  finished: boolean;
-  originCacheControl: OriginCacheControl;
-};
-
-/* -----------------------------------------------------------------------------
- * globals
- * ---------------------------------------------------------------------------*/
-
-// Sets working dir of Next.js to /tmp (Lambda tmp dir)
-const distDir = '/tmp';
-
-let originCacheControl: OriginCacheControl;
-
-/**
- * fetch polyfill to intercept the request to the external resource
- * to get the Cache-Control header from the origin
- */
-const fetchPolyfill: NodeFetch = (url, init) => {
-  return nodeFetch(url, init).then((result) => {
-    originCacheControl = result.headers.get('Cache-Control');
-    return result;
-  });
-};
-
-fetchPolyfill.isRedirect = nodeFetch.isRedirect;
-
-// Polyfill fetch is used by nextImageOptimizer
-// @ts-ignore
-global.fetch = fetchPolyfill;
-
 /* -----------------------------------------------------------------------------
  * imageOptimizer
  * ---------------------------------------------------------------------------*/
@@ -61,19 +28,31 @@ async function imageOptimizer(
   res: ServerResponse,
   parsedUrl: UrlWithParsedQuery,
   s3Config?: S3Config
-): Promise<ImageOptimizerResult> {
-  // Create next config mock
-  const nextConfig = ({
-    images: imageConfig,
-  } as unknown) as NextConfig;
-
-  // Create Next Server mock
-  const server = {
-    getRequestHandler: () => async (
+): ReturnType<typeof pixel> {
+  const options: ImageOptimizerOptions = {
+    /**
+     * Use default temporary folder from AWS Lambda
+     */
+    distDir: '/tmp',
+
+    imageConfig: {
+      ...imageConfig,
+      loader: 'default',
+    },
+
+    /**
+     * Is called when the path is an absolute URI, e.g. `/my/image.png`.
+     *
+     * @param req - Incoming client request
+     * @param res - Outgoing mocked response
+     * @param url - Parsed url object from the client request,
+     *              e.g. `/my/image.png`
+     */
+    async requestHandler(
       { headers }: IncomingMessage,
       res: ServerResponse,
       url: UrlWithParsedQuery
-    ) => {
+    ) {
       if (s3Config) {
         // S3 expects keys without leading `/`
         const trimmedKey = url.href.startsWith('/')
@@ -98,10 +77,12 @@ async function imageOptimizer(
         }
 
         if (object.CacheControl) {
-          originCacheControl = object.CacheControl;
+          res.setHeader('Cache-Control', object.CacheControl);
+          // originCacheControl = object.CacheControl;
         }
 
-        res.end(object.Body);
+        res.write(object.Body);
+        res.end();
       } else if (headers.referer) {
         const { referer } = headers;
         const trimmedReferer = referer.endsWith('/')
@@ -116,30 +97,24 @@ async function imageOptimizer(
 
         res.statusCode = upstreamRes.status;
         const upstreamType = upstreamRes.headers.get('Content-Type');
-        originCacheControl = upstreamRes.headers.get('Cache-Control');
+        const originCacheControl = upstreamRes.headers.get('Cache-Control');
 
         if (upstreamType) {
           res.setHeader('Content-Type', upstreamType);
         }
 
+        if (originCacheControl) {
+          res.setHeader('Cache-Control', originCacheControl);
+        }
+
         const upstreamBuffer = Buffer.from(await upstreamRes.arrayBuffer());
-        res.end(upstreamBuffer);
+        res.write(upstreamBuffer);
+        res.end();
       }
     },
-  } as Server;
-
-  const result = await nextImageOptimizer(
-    server,
-    req,
-    res,
-    parsedUrl,
-    nextConfig,
-    distDir
-  );
-  return {
-    ...result,
-    originCacheControl,
   };
+
+  return pixel(req, res, parsedUrl, options);
 }
 
 export type { S3Config };

lib/package.json

@@ -16,6 +16,7 @@
     "postpack": "rm ./LICENSE ./third-party-licenses.txt"
   },
   "dependencies": {
+    "@millihq/pixel-core": "^1.0.0-canary.1",
     "aws-sdk": "*",
     "next": "12.0.0",
     "node-fetch": "2.6.1",

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@dealmore/sammy": "^1.5.0",
+    "@tsconfig/node14": "^1.0.1",
     "@types/jest": "^27.0.1",
     "@types/mime": "^2.0.3",
     "@types/node": "^14.0.0",

test/e2e.test.ts

@@ -16,7 +16,7 @@ describe('[e2e]', () => {
   const s3Endpoint = `${hostIpAddress}:9000`;
   const pathToWorker = path.resolve(__dirname, '../lib');
   const fixturesDir = path.resolve(__dirname, './fixtures');
-  const cacheControlHeader = 'public, max-age=123456';
+  const cacheControlHeader = 'public, max-age=123456, must-revalidate';
   let fixtureBucketName: string;
   let s3: S3;
 

test/utils/run-optimizer.ts

@@ -1,9 +1,11 @@
 import { fork } from 'child_process';
+import { EventEmitter } from 'events';
+import { URLSearchParams } from 'url';
+
 import getPort from 'get-port';
 import { ImageConfig } from 'next/dist/server/image-config';
 import fetch from 'node-fetch';
 import { createRequest, createResponse } from 'node-mocks-http';
-import { EventEmitter } from 'events';
 import S3 from 'aws-sdk/clients/s3';
 
 import { imageOptimizer } from '../../lib/image-optimizer';

tsconfig.json

@@ -1,15 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "es2019",
-    "lib": ["es2019", "DOM"],
-    "outDir": "dist",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "strict": true,
-    "declaration": false,
-    "sourceMap": false,
-    "experimentalDecorators": true,
-    "esModuleInterop": true
-  },
-  "exclude": ["node_modules"]
+  "extends": "@tsconfig/node14/tsconfig.json"
 }

yarn.lock

@@ -796,6 +796,13 @@
     semver "^7.3.4"
     tar "^6.1.0"
 
+"@millihq/pixel-core@^1.0.0-canary.1":
+  version "1.0.0-canary.1"
+  resolved "https://registry.yarnpkg.com/@millihq/pixel-core/-/pixel-core-1.0.0-canary.1.tgz#ce4affa4a42b819a9ef7bf426b519db3bce6b2af"
+  integrity sha512-aBeMxUyDew5eeyam2Rfi7NAcBws/uygwzQ6UVL55ZvITkl+13uzajkPo0APVFETscFrHoYE9AWpdQkOrJ2HdQw==
+  dependencies:
+    node-fetch "^2.0.0"
+
 "@napi-rs/triples@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c"
@@ -935,6 +942,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@tsconfig/node14@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.1.tgz#95f2d167ffb9b8d2068b0b235302fafd4df711f2"
+  integrity sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==
+
 "@types/[email protected]":
   version "8.10.56"
   resolved "https://registry.yarnpkg.com/@types/aws-lambda/-/aws-lambda-8.10.56.tgz#24fc61bf628db86412bb4f28da051df4baa532d6"
@@ -4519,6 +4531,13 @@ [email protected], node-fetch@^2.6.1:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
+node-fetch@^2.0.0:
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.6.tgz#1751a7c01834e8e1697758732e9efb6eeadfaf89"
+  integrity sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-gyp-build@^4.2.2:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.2.3.tgz#ce6277f853835f718829efb47db20f3e4d9c4739"
@@ -5951,6 +5970,11 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
 "traverse@>=0.3.0 <0.4":
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.3.9.tgz#717b8f220cc0bb7b44e40514c22b2e8bbc70d8b9"
@@ -6225,6 +6249,11 @@ [email protected]:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -6252,6 +6281,14 @@ whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"