Changing from aws-chromelambda to @sparticuz/chromium (#492)

* change the lib from chrome-aws-lambda to @sparticuz/chromium

* update example dependency

* create a setup to run the lambda locally

* update the docs

* yarn.lock

* add the docker lambda prepared on github action

* empty line in the end

* change the command to pretest

* updating the chrome-laucher version

* add the workspace and using nohoist for the example

* verbose log for chrome-laucher when debug is enabled and fix timeout test

.github/workflows/tests.yml

@@ -24,6 +24,8 @@ jobs:
         run: yarn --frozen-lockfile --non-interactive --silent --ignore-scripts
       - name: Prepare docker
         run: docker pull yukinying/chrome-headless-browser-stable:118.0.5993.117
+      - name: Prepare docker lambda
+        run: yarn pretest
       - name: Run unit tests
         run: yarn test-ci
 

docs/serverless.md

@@ -24,7 +24,7 @@ yarn init -y
 ### 2. Add loki renderer and Chrome binary
 
 ```sh
-yarn add @loki/renderer-aws-lambda chrome-aws-lambda
+yarn add @loki/renderer-aws-lambda @sparticuz/chromium
 ```
 
 ### 3. Expose loki in lambda handler

examples/renderer-aws-lambda/package.json

@@ -4,6 +4,6 @@
   "private": true,
   "dependencies": {
     "@loki/renderer-aws-lambda": "^0.33.1",
-    "chrome-aws-lambda": "^2.0.1"
+    "@sparticuz/chromium": "118.0.0"
   }
 }

examples/running-renderer-aws-lambda/Dockerfile

@@ -0,0 +1,13 @@
+FROM amazon/aws-lambda-nodejs:18
+
+ENV DEBUG=*
+
+ADD fixtures ${LAMBDA_TASK_ROOT}/fixtures
+
+COPY package.json ${LAMBDA_TASK_ROOT}
+
+COPY docker_node_modules ${LAMBDA_TASK_ROOT}/node_modules
+
+COPY index.js ${LAMBDA_TASK_ROOT}
+
+CMD ["index.handler"]

examples/running-renderer-aws-lambda/README.md

@@ -0,0 +1,15 @@
+### Running the lambda locally
+This is to simulate and run the lambda locally for development and test pourpose.
+
+### Commands
+```sh
+yarn build
+```
+
+This command will build the docker image with the lambda. 
+
+```sh
+yarn start
+```
+
+This command will start the docker.

examples/running-renderer-aws-lambda/build.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+CONTAINER_ID=$(docker ps -a | grep "example-renderer-aws-lambda" | awk '{print $1}')
+
+if [ ! -z "$CONTAINER_ID" ];
+then
+  echo "Stopping and removing container..."
+  docker stop $CONTAINER_ID 2>&1
+  docker rm $CONTAINER_ID 2>&1
+fi
+
+IMAGE_NAME=$(docker images | grep "example-renderer-aws-lambda" | awk '{print $1}')
+
+if [ ! -z "$IMAGE_NAME" ];
+then
+  echo "Removing image..."
+  docker rmi $IMAGE_NAME 2>&1
+fi
+
+rm -rf node_modules
+
+yarn
+
+cp -R ../../fixtures fixtures
+
+# it is needed to resolve the symlinks that are create by nohoist
+cp -RL node_modules docker_node_modules
+
+docker build . -t example-renderer-aws-lambda:latest
+
+rm -rf fixtures
+rm -rf docker_node_modules

examples/running-renderer-aws-lambda/index.js

@@ -0,0 +1,5 @@
+const { createChromeAWSLambdaRenderer } = require('@loki/renderer-aws-lambda');
+
+module.exports = {
+  handler: createChromeAWSLambdaRenderer(),
+};

examples/running-renderer-aws-lambda/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@loki/example-running-renderer-aws-lambda",
+  "version": "0.33.1",
+  "private": true,
+  "scripts": {
+    "build": "sh build.sh",
+    "start": "docker run -d -p 8080:8080 -t example-renderer-aws-lambda:latest"
+  },
+  "workspaces": {
+    "nohoist": ["**"]
+  },
+  "dependencies": {
+    "@loki/renderer-aws-lambda": "0.33.1",
+    "@sparticuz/chromium": "118.0.0"
+  }
+}

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "format": "prettier '{,packages/**/,examples/**/,website/**/,docs/**/,test/**/,.github/**/}*.{md,js,jsx,json,yml}' --write",
     "lint": "eslint packages/*/src",
+    "pretest": "cd examples/running-renderer-aws-lambda && yarn build && yarn start",
     "test": "jest",
     "test-ci": "jest --testLocationInResults --ci --outputFile=test_results.json --json",
     "publish-docs": "GIT_USER=oblador yarn workspace @loki/website publish-gh-pages"
@@ -36,7 +37,8 @@
       "test/*",
       "website",
       "examples/react",
-      "examples/renderer-aws-lambda"
+      "examples/renderer-aws-lambda",
+      "examples/running-renderer-aws-lambda"
     ]
   },
   "devDependencies": {

packages/renderer-aws-lambda/package.json

@@ -25,10 +25,10 @@
     "async": "^3.2.0"
   },
   "devDependencies": {
-    "docker-lambda": "^0.15.3"
+    "got": "11.8.6"
   },
   "peerDependencies": {
-    "chrome-aws-lambda": ">=2"
+    "@sparticuz/chromium": ">=110"
   },
   "publishConfig": {
     "access": "public"

packages/renderer-aws-lambda/src/create-aws-lambda-renderer.js

@@ -1,4 +1,4 @@
-const chromium = require('chrome-aws-lambda');
+const chromium = require('@sparticuz/chromium');
 const mapLimit = require('async/mapLimit');
 const { createChromeAppTarget } = require('@loki/target-chrome-app');
 const { serializeError, unwrapError } = require('@loki/core');
@@ -55,11 +55,13 @@ const createChromeAWSLambdaRenderer = () => async (event) => {
   const target = createChromeAppTarget({
     baseUrl: event.baseUrl,
     useStaticServer: false,
+    cdpOptions: { local: true },
   });
+
   try {
     await target.start({
       chromeFlags: chromium.args,
-      chromePath: await chromium.executablePath,
+      chromePath: await chromium.executablePath(),
     });
     return await command(target, event);
   } catch (error) {

packages/renderer-aws-lambda/src/create-aws-lambda-renderer.spec.js

@@ -1,22 +1,24 @@
-const dockerLambda = require('docker-lambda');
 const path = require('path');
 const fs = require('fs');
+const got = require('got');
 
 const DOCKER_TEST_TIMEOUT = 60000;
+const DOCKER_TEST_TIMEOUT_NOT_RUNNING = 120000;
+// https://docs.aws.amazon.com/lambda/latest/dg/images-test.html#images-test-AWSbase
+const DOCKER_LAMBDA_URL =
+  'http://localhost:8080/2015-03-31/functions/function/invocations';
 
-const PROJECT_ROOT = path.dirname(path.dirname(path.dirname(__dirname)));
+const executeLambda = async (event) => {
+  const url = DOCKER_LAMBDA_URL;
 
-const DEBUG = false;
+  const result = await got
+    .post(url, {
+      json: event,
+    })
+    .json();
 
-const executeLambda = (event) =>
-  dockerLambda({
-    event,
-    dockerArgs: ['-m', '1024M'].concat(DEBUG ? ['-e', 'DEBUG=*'] : []),
-    dockerImage: 'lambci/lambda:nodejs12.x',
-    taskDir: PROJECT_ROOT,
-    handler: 'examples/renderer-aws-lambda/index.handler',
-    returnSpawnResult: DEBUG,
-  });
+  return result;
+};
 
 const fetchStorybookUrl = async (baseUrl) =>
   executeLambda({
@@ -124,21 +126,27 @@ describe('createChromeAWSLambdaRenderer', () => {
     it(
       'throws if not configured',
       async () => {
-        await expect(fetchStorybookFixture('unconfigured')).rejects.toThrow(
-          "Unable to get stories. Try adding `import 'loki/configure-react'` to your .storybook/preview.js file."
-        );
+        expect(await fetchStorybookFixture('unconfigured')).toEqual({
+          errorMessage:
+            '{"isSerializedError":true,"type":"Error","args":["Unable to get stories. Try adding `import \'loki/configure-react\'` to your .storybook/preview.js file."]}',
+          errorType: 'string',
+          trace: [],
+        });
       },
       DOCKER_TEST_TIMEOUT
     );
 
     it(
       'throws if not running',
       async () => {
-        await expect(
-          fetchStorybookUrl('http://localhost:23456')
-        ).rejects.toThrow('Failed fetching stories because the server is down');
+        expect(await fetchStorybookUrl('http://localhost:23456')).toEqual({
+          errorMessage:
+            '{"isSerializedError":true,"type":"ServerError","args":["Failed fetching stories because the server is down","Try starting it with \\"yarn storybook\\" or pass the --port or --host arguments if it\'s not running at http://localhost:23456"]}',
+          errorType: 'string',
+          trace: [],
+        });
       },
-      DOCKER_TEST_TIMEOUT
+      DOCKER_TEST_TIMEOUT_NOT_RUNNING
     );
   });
 

packages/target-chrome-app/package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@loki/core": "^0.33.0",
     "@loki/target-chrome-core": "^0.33.0",
-    "chrome-launcher": "^0.14.1",
+    "chrome-launcher": "0.15.2",
     "chrome-remote-interface": "^0.32.1",
     "debug": "^4.1.1",
     "find-free-port-sync": "^1.0.0"

packages/target-chrome-app/src/create-chrome-app-target.js

@@ -46,6 +46,7 @@ function createChromeAppTarget({
   baseUrl = 'http://localhost:6006',
   useStaticServer = true,
   chromeFlags = ['--headless', '--disable-gpu', '--hide-scrollbars'],
+  cdpOptions = {},
 }) {
   let instance;
   let staticServer;
@@ -62,7 +63,7 @@ function createChromeAppTarget({
     const launchOptions = Object.assign(
       {
         chromeFlags,
-        logLevel: 'silent',
+        logLevel: debug.enabled ? 'verbose' : 'silent',
       },
       options
     );
@@ -90,7 +91,7 @@ function createChromeAppTarget({
     debug(`Launching new tab with debugger at port ${port}`);
     const target = await CDP.New({ port });
     debug(`Launched with target id ${target.id}`);
-    const client = await CDP({ port, target });
+    const client = await CDP({ port, target, ...cdpOptions });
 
     client.close = () => {
       debug('Closing tab');