在 AWS 代碼構建上運行 react-snap

Question

賞金將在 2 天后到期。 這個問題的答案有資格獲得+50聲望獎勵。 凱撒想引起更多人對這個問題的關注。

我有一個在 AWS 上托管的 React 網站。 我在 AWS 中創建了連接到我的github code pipeline ，它使用codeBuild自動構建項目並將其部署到S3 。

我正在嘗試將react-snap添加到項目中。 它在本地運行良好，但是當我嘗試在codebuild構建它時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.

我試圖用谷歌搜索它，但我沒有找到任何特定於codebuild和react-snap 。 我發現了關於在codebuild上運行 chrome 的類似問題，但它們與不同的環境（如 angular）有關，因此我無法復制他們的解決方案。

這是我當前的 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

Answer 1

我設法使用以下步驟使其工作：

1. 確保您的 AWS 代碼構建器使用aws/codebuild/standard:5.0

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

2. 使用此內容為您的項目創建一個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

3. 在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