运行 AWS codebuild 上的 react-snap
Running react-snap on AWS codebuild
我有一个在 AWS 上托管的 React 网站。我在连接到我的 github
的 AWS 中创建了 code pipeline
,它使用 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 的类似问题,但它们与 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'
根据错误提供的link上的说明,我尝试添加这个但是没有用
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 code builder -> Edit -> Environment -> Override image
- 使用此内容为您的项目创建一个
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
我有一个在 AWS 上托管的 React 网站。我在连接到我的 github
的 AWS 中创建了 code pipeline
,它使用 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 的类似问题,但它们与 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'
根据错误提供的link上的说明,我尝试添加这个但是没有用
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 code builder -> Edit -> Environment -> Override image
- 使用此内容为您的项目创建一个
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