Yash
Reputation: 23
React App unable to deploy on AWS Amplify
I have an application which displays different meta information for different pages.
The Meta information for Homepage
The meta information for about page
The meta information for contact page
I achieved this behaviour of dynamic meta tags by using react-helmet and react-snap. The application is fully functional when deployed on netlify.
Application Link: https://zealous-kalam-864daa.netlify.app/
Github Repository Link: https://github.com/YashMarmat/react-helmet-project
But when i tried to deploy the same application on Aws Amplify i got the following error:
# Starting phase: preBuild
# Executing command: npm ci
2022-01-02T09:06:40.557Z [WARNING]: npm
2022-01-02T09:06:40.558Z [WARNING]: WARN prepare removing existing node_modules/ before installation
2022-01-02T09:06:51.090Z [INFO]: > puppeteer@1.20.0 install /codebuild/output/src698077615/src/react-helmet-project/node_modules/puppeteer
> node install.js
2022-01-02T09:06:52.104Z [WARNING]:
2022-01-02T09:06:54.834Z [INFO]: Chromium downloaded to /codebuild/output/src698077615/src/react-helmet-project/node_modules/puppeteer/.local-chromium/linux-686378
2022-01-02T09:06:55.239Z [INFO]: > core-js@3.20.1 postinstall /codebuild/output/src698077615/src/react-helmet-project/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
2022-01-02T09:06:55.278Z [INFO]: [96mThank you for using core-js ([94m https://github.com/zloirock/core-js [96m) for polyfilling JavaScript standard library![0m
[96mThe project needs your help! Please consider supporting of core-js:[0m
[96m>[94m https://opencollective.com/core-js [0m
[96m>[94m https://patreon.com/zloirock [0m
[96m>[94m https://paypal.me/zloirock [0m
[96m>[94m bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz [0m
[96mAlso, the author of core-js ([94m https://github.com/zloirock [96m) is looking for a good job -)[0m
2022-01-02T09:06:55.487Z [INFO]: > core-js-pure@3.20.1 postinstall /codebuild/output/src698077615/src/react-helmet-project/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
2022-01-02T09:06:55.620Z [INFO]: added 1497 packages in 15.079s
2022-01-02T09:06:55.632Z [INFO]: # Completed phase: preBuild
# Starting phase: build
2022-01-02T09:06:55.632Z [INFO]: # Executing command: CI= npm run build
2022-01-02T09:06:55.791Z [INFO]: > frontend@0.1.0 build /codebuild/output/src698077615/src/react-helmet-project
> react-scripts build
2022-01-02T09:06:56.867Z [INFO]: Creating an optimized production build...
2022-01-02T09:07:02.784Z [INFO]: Compiled successfully.
2022-01-02T09:07:02.786Z [INFO]: File sizes after gzip:
2022-01-02T09:07:02.795Z [INFO]: 52.14 kB build/static/js/main.d96843eb.js
2022-01-02T09:07:02.795Z [INFO]: The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
2022-01-02T09:07:02.796Z [INFO]: You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
2022-01-02T09:07:02.817Z [INFO]: > frontend@0.1.0 postbuild /codebuild/output/src698077615/src/react-helmet-project
> react-snap
2022-01-02T09:07:05.620Z [WARNING]: npm ERR! code
2022-01-02T09:07:05.620Z [WARNING]: ELIFECYCLE
npm ERR! errno 1
2022-01-02T09:07:05.622Z [WARNING]: npm
2022-01-02T09:07:05.622Z [WARNING]: ERR! frontend@0.1.0 postbuild: `react-snap`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-01-02T09:07:05.627Z [WARNING]:
2022-01-02T09:07:05.627Z [WARNING]: npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-01-02T09_07_05_623Z-debug.log
2022-01-02T09:07:05.627Z [HELP]: Outputting the npm debug log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/node',
1 verbose cli '/root/.nvm/versions/node/v12.21.0/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using npm@6.14.11
3 info using node@v12.21.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle frontend@0.1.0~prebuild: frontend@0.1.0
6 info lifecycle frontend@0.1.0~build: frontend@0.1.0
7 verbose lifecycle frontend@0.1.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle frontend@0.1.0~build: PATH: /root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/codebuild/output/src698077615/src/react-helmet-project/node_modules/.bin:/usr/local/rvm/gems/ruby-2.4.6/bin:/usr/local/rvm/gems/ruby-2.4.6@global/bin:/usr/local/rvm/rubies/ruby-2.4.6/bin:/usr/local/rvm/bin:/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:/root/.nvm/versions/node/v12.21.0/bin:/root/.local/bin:/root/.local/bin:/usr/local/rvm/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/.dotnet/tools
9 verbose lifecycle frontend@0.1.0~build: CWD: /codebuild/output/src698077615/src/react-helmet-project
10 silly lifecycle frontend@0.1.0~build: Args: [ '-c', 'react-scripts build' ]
11 silly lifecycle frontend@0.1.0~build: Returned: code: 0 signal: null
12 info lifecycle frontend@0.1.0~postbuild: frontend@0.1.0
13 verbose lifecycle frontend@0.1.0~postbuild: unsafe-perm in lifecycle true
14 verbose lifecycle frontend@0.1.0~postbuild: PATH: /root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/codebuild/output/src698077615/src/react-helmet-project/node_modules/.bin:/usr/local/rvm/gems/ruby-2.4.6/bin:/usr/local/rvm/gems/ruby-2.4.6@global/bin:/usr/local/rvm/rubies/ruby-2.4.6/bin:/usr/local/rvm/bin:/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:/root/.nvm/versions/node/v12.21.0/bin:/root/.local/bin:/root/.local/bin:/usr/local/rvm/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/.dotnet/tools
15 verbose lifecycle frontend@0.1.0~postbuild: CWD: /codebuild/output/src698077615/src/react-helmet-project
16 silly lifecycle frontend@0.1.0~postbuild: Args: [ '-c', 'react-snap' ]
17 silly lifecycle frontend@0.1.0~postbuild: Returned: code: 1 signal: null
18 info lifecycle frontend@0.1.0~postbuild: Failed to exec postbuild script
19 verbose stack Error: frontend@0.1.0 postbuild: `react-snap`
19 verbose stack Exit status 1
19 verbose stack at EventEmitter.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
19 verbose stack at EventEmitter.emit (events.js:314:20)
19 verbose stack at ChildProcess.<anonymous> (/root/.nvm/versions/node/v12.21.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
19 verbose stack at ChildProcess.emit (events.js:314:20)
19 verbose stack at maybeClose (internal/child_process.js:1022:16)
19 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
20 verbose pkgid frontend@0.1.0
21 verbose cwd /codebuild/output/src698077615/src/react-helmet-project
22 verbose Linux 4.14.252-195.483.amzn2.x86_64
23 verbose argv "/root/.nvm/versions/node/v12.21.0/bin/node" "/root/.nvm/versions/node/v12.21.0/bin/npm" "run" "build"
24 verbose node v12.21.0
25 verbose npm v6.14.11
26 error code ELIFECYCLE
27 error errno 1
28 error frontend@0.1.0 postbuild: `react-snap`
28 error Exit status 1
29 error Failed at the frontend@0.1.0 postbuild script.
29 error This is probably not a problem with npm. There is likely additional logging output above.
30 verbose exit [ 1, true ]
2022-01-02T09:07:05.632Z [ERROR]: !!! Build failed
2022-01-02T09:07:05.633Z [ERROR]: !!! Non-Zero Exit Code detected
2022-01-02T09:07:05.633Z [INFO]: # Starting environment caching...
2022-01-02T09:07:05.634Z [INFO]: # Uploading environment cache artifact...
2022-01-02T09:07:05.707Z [INFO]: # Environment caching completed
Terminating logging...
Upvotes: 0
Views: 1843
Answers (2)
Yash
Reputation: 23
I finally fixed it.
So this was the issue
to fix this certificate issue i just place "-k" in the curl command. Here's the updated code of my amplify.yml file.
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
- curl -k https://intoli.com/install-google-chrome.sh | bash
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Source: https://www.digitalocean.com/community/questions/curl-not-working-ssl
Upvotes: 0
AWS PS
Reputation: 4708
This is a known issue with snap under AWS Amplify, use the workaround mentioned under the GitHub repository
The issue is related to run pupeteer
https://github.com/stereobooster/react-snap/issues/428
https://medium.com/mockingbot/run-puppeteer-chrome-headless-on-ec2-amazon-linux-ami-6c9c6a17bee6
Upvotes: 1
Related Questions
- npm run deploy not working properly for react app
- Having trouble correctly building/deploying create-react-app using NPM
- aws amplify react deployment throwing manifest syntax error
- React error while deploying to AWS Amplify
- Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify
- AWS amplify deploy failure due to aws-exports
- AWS Amplify React App Deploy Error- Too many redirect or AWS Build Settings
- AWS full-stack react app. Build failed to complete successfully
- Build of React application on AWS Amplify fails in Amplify Console
- how to deploy successfully React app with nextjs to AWS Amplify?