我在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.
我试图谷歌它,但我没有找到任何具体到codebuild
和react-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
我使用以下步骤使它工作:
- 确保您的AWS代码构建器使用
aws/codebuild/standard:5.0
Go t 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