在AWS codebuild上运行react-snap



我在AWS上托管了一个react网站。我已经在AWS中创建了code pipeline,它连接到我的github,它使用codeBuild自动构建项目并将其部署到S3

我想把react-snap添加到项目中。它在本地工作得很好,但当我试图在codebuild中构建它时,我得到了这个错误

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.

我试图谷歌它,但我没有找到任何具体到codebuildreact-snap。我在codebuild上运行chrome时发现了类似的问题,但它们与不同的环境(如angular)有关,因此我无法复制它们的解决方案。

这是我当前的构建规范。Yaml文件看起来像

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'

根据错误提供的链接上的指令,我尝试添加这个,但它不起作用

install:
commands:
- PYTHON=python2 amazon-linux-extras install epel -y
- yum install -y chromium
- yarn install

我使用以下步骤使它工作:

  1. 确保您的AWS代码构建器使用aws/codebuild/standard:5.0

Go t AWS代码生成器->编辑→环境→覆盖图像

  1. 用下面的内容创建一个addArgs.sh文件到你的项目
# 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. 将这些行添加到您的buildspec.yml文件的安装阶段
# 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

我从这里找到了答案- https://github.com/stereobooster/react-snap/issues/122

最新更新