[英]Running react-snap on AWS codebuild
I have a react website that I host on AWS.我有一个在 AWS 上托管的 React 网站。 I have created
code pipeline
in AWS that connects to my github
, which automatically builds the projects using codeBuild
and deploys it to S3
.我在 AWS 中创建了连接到我的
github
code pipeline
,它使用codeBuild
自动构建项目并将其部署到S3
。
I'm trying to add react-snap
to the project.我正在尝试将
react-snap
添加到项目中。 It works well locally but when I try to build it in codebuild
I get this error它在本地运行良好,但是当我尝试在
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.
I have tried to google it but I didn't find anything specific to codebuild
and react-snap
.我试图用谷歌搜索它,但我没有找到任何特定于
codebuild
和react-snap
。 I have found similar questions in regards to running chrome on codebuild
but they related to different environments like angular and so I wasn't able to copy their solutions.我发现了关于在
codebuild
上运行 chrome 的类似问题,但它们与不同的环境(如 angular)有关,因此我无法复制他们的解决方案。
This is what my current buildspec.yaml file looks like这是我当前的 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'
Based on the instruction on the link provided by the error, I tried adding this but it didn't work根据错误提供的链接上的说明,我尝试添加它,但没有用
install:
commands:
- PYTHON=python2 amazon-linux-extras install epel -y
- yum install -y chromium
- yarn install
I managed to get it working using these steps:我设法使用以下步骤使其工作:
aws/codebuild/standard:5.0
aws/codebuild/standard:5.0
Go t AWS code builder -> Edit -> Environment -> Override image
Go t AWS code builder -> Edit -> Environment -> Override image
addArgs.sh
file to your project with this contentaddArgs.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
file, add these lines to the install stagebuildspec.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
I found the answer from here - https://github.com/stereobooster/react-snap/issues/122我从这里找到了答案 - https://github.com/stereobooster/react-snap/issues/122
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.