AWS CodeBuild运行react-snap时Chrome缺失libXss.so.1启动失败如何解决？

问题根源 #

报错是因为react-snap依赖的Puppeteer需要的Linux系统运行库未完整安装，且CodeBuild默认以root身份执行构建，Chrome默认禁止root用户无沙箱参数启动。

完整修复步骤 #

1. 修改buildspec.yaml配置

先安装所有Puppeteer依赖的系统库，同时配置环境变量跳过Puppeteer自带Chromium的下载，直接使用系统安装的Chromium：

version: 0.2
env:
  variables:
    S3_BUCKET: "xyz"
    STAGE: "beta"
    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: "true" # 跳过下载自带Chromium
    PUPPETEER_EXECUTABLE_PATH: "/usr/bin/chromium-browser" # 指定系统Chromium路径
phases:
  install:
    commands:
      - PYTHON=python2 amazon-linux-extras install epel -y
      # 安装所有Chromium运行依赖库
      - yum install -y chromium libXScrnSaver libX11 libXcomposite libXcursor libXdamage libXext libXi libXtst cups-libs libXrandr alsa-lib pango atk at-spi2-atk gtk3
      - 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'

2. 给react-snap添加启动参数

在项目的package.json中添加react-snap的配置，传入Chrome适配无root、小内存环境的启动参数：

{
  "reactSnap": {
    "puppeteerArgs": [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      "--disable-dev-shm-usage"
    ]
  }
}

如果你的项目使用独立的react-snap配置文件，将上述参数写入对应配置文件即可。

校验说明 #

缺失的libXss.so.1文件包含在libXScrnSaver安装包中，上述配置完成后重新触发构建即可正常运行react-snap预渲染逻辑。

内容的提问来源于stack exchange，提问作者Caesar