0

I have a react website that I host on AWS. I have created code pipeline in AWS that connects to my github, which automatically builds the projects using codeBuild and deploys it to S3.

I'm trying to add react-snap to the project. It works well locally but when I try to build it in codebuild I get this error

Error: Failed to launch chrome!

/codebuild/output/src159566889/src/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
    at onClose (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:348:14)
    at Interface.<anonymous> (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:337:50)
    at Interface.emit (events.js:326:22)
    at Interface.close (readline.js:416:8)
    at Socket.onend (readline.js:194:10)
    at Socket.emit (events.js:326:22)
    at endReadableNT (_stream_readable.js:1241:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

error Command failed with exit code 1.

I have tried to google it but I didn't find anything specific to codebuild and react-snap. I have found similar questions in regards to running chrome on codebuild but they related to different environments like angular and so I wasn't able to copy their solutions.

This is what my current buildspec.yaml file looks like

version: 0.2
env:
  variables:
    S3_BUCKET: "xyz"
    STAGE: "beta"
phases:
  install:
    commands:
      - yarn install
  build:
    commands:
      - echo "Building for $STAGE"
      - yarn build
      - sam package --template-file cloudformation/Root.json --s3-bucket ${S3_BUCKET} --s3-prefix WebsiteCF/${CODEBUILD_RESOLVED_SOURCE_VERSION} --output-template-file build/packaged-template.yaml
artifacts:
  files:
    - '**/*'
  base-directory: 'build'

Based on the instruction on the link provided by the error, I tried adding this but it didn't work

  install:
    commands:
      - PYTHON=python2 amazon-linux-extras install epel -y
      - yum install -y chromium
      - yarn install
Caesar
  • 9,483
  • 8
  • 40
  • 66
  • Where does `puppeteer` is being installed? Also which line in `buildspec.yaml` errors out? – Marcin Nov 09 '21 at 02:05
  • It is looking for `libXss.so.1` which can be "fixed" by installing `libxss1`. It is more about OS instead of the application. Also, `react-snap` is old, you sure it is a good idea to keep using it? – Matthew Kwong Nov 10 '21 at 06:16

1 Answers1

0

I managed to get it working using these steps:

  1. Make sure your AWS code builder is using aws/codebuild/standard:5.0

Go t AWS code builder -> Edit -> Environment -> Override image

  1. Create a addArgs.sh file to your project with this content
# modifies react-snap defaultOptions to add the --no-sandbox and --disable-setuid-sandbox flags so that puppeteer/chromium can run in the codebuild standard image
sed -i "s/puppeteerArgs: \[\],/puppeteerArgs: \[\"--no-sandbox\", \"--disable-setuid-sandbox\"\],/" ./node_modules/react-snap/index.js
echo changed arguments in react-snap
  1. To your buildspec.yml file, add these lines to the install stage
      # Install chrome headless
      - apt-get -y update
      - apt-get --assume-yes install chromium-browser
      - sh ./addArgs.sh # run custom script to change options on react-snap to make it work

I found the answer from here - https://github.com/stereobooster/react-snap/issues/122

Caesar
  • 9,483
  • 8
  • 40
  • 66