在 AWS codebuild 上运行 react-snap答案

【问题标题】：Running react-snap on AWS codebuild在 AWS codebuild 上运行 react-snap
【发布时间】：2021-12-13 04:50:38
【问题描述】：

我有一个在 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.

我尝试用 Google 搜索，但没有找到任何特定于 codebuild 和 react-snap 的内容。我发现了关于在 codebuild 上运行 chrome 的类似问题，但它们与角度等不同环境有关，因此我无法复制他们的解决方案。

这就是我当前的 buildspec.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

【问题讨论】：

puppeteer 安装在哪里？ buildspec.yaml 中的哪一行出错了？
它正在寻找可以通过安装libxss1 来“修复”的libXss.so.1。它更多的是关于操作系统而不是应用程序。另外，react-snap 已经老了，你确定继续使用它是个好主意吗？

标签： reactjs amazon-web-services aws-codebuild google-chrome-headless react-snap

【解决方案1】：

我设法通过以下步骤使其正常工作：

确保您的 AWS 代码生成器使用的是 aws/codebuild/standard:5.0

转到 AWS 代码生成器 -> 编辑 -> 环境 -> 覆盖图像

使用此内容为您的项目创建一个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

在您的 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

【讨论】：