React App 无法在 AWS Amplify 上部署

Question

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...

Answer 1

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

Answer 2

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