Error in Deploy stage. Not finding error in logs in AWS code pipeline

Question

I have reactjs project in my bitbucket. I am trying to deploy that in my EC2 server but facing error in Deploy stage. and when checking error...it is not deploying as shown in figute...I am sharing you the files and errors....can you guys please help me ?

buildspec.yml

    # Do not change version. This is the version of aws buildspec, not the version of your buldspec file.
version: 0.2
phases:
  pre_build:
    commands:
      #installs dependencies into the node_modules/ directory
      - npm install
  build:
    commands:
      - echo Build started on `date`
      - echo Compiling
      - npm run build
  post_build:
    commands:
      - echo Build completed on `date`
# Include only the files required for your application to run.
artifacts:
  files:
    - public/**/*
    - src/**/*
    - package.json
    - appspec.yml
    - scripts/**/*

appspec.yml

    version: 0.0
os: linux

files:
  - source: /
    destination: /home/ec2-user/server

permissions:
  - object: /
    pattern: "**"
    owner: ec2-user
    group: ec2-user 

hooks:

  BeforeInstall:
    - location: scripts/before_install.sh
      timeout: 300
      runas: root
  
  AfterInstall:
    - location: scripts/after_install.sh
      timeout: 300
      runas: root

  ApplicationStart:
    - location: scripts/app_start.sh
      timeout: 300
      runas: root

before_install.sh

   #!/bin/bash
cd /home/ec2-user/server
curl -sL https://rpm.nodesource.com/setup_14.x | sudo -E bash -
yum -y install nodejs npm

after_install.sh

#!/bin/bash
cd /home/ec2-user/server
npm install
npm install --save react react-dom react-scripts react-particles-js
npm install pm2 -g

app_start.sh

  #!/bin/bash
cd /home/ec2-user/server/src
npm start
pm2 start npm --name "econote-dashboard" -- start
pm2 startup
pm2 save
pm2 restart all

Error Script at specified location: scripts/app_start.sh failed to complete in 300 seconds

Logs
[stdout] Line 41:12: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
[stdout]
[stdout]useEffect(() => {
[stdout] async function fetchData() {
[stdout] // You can await here
[stdout] const response = await MyAPI.getData(someId);
[stdout] // ...
[stdout] }
[stdout] fetchData();
[stdout]}, [someId]); // Or [] if effect doesn't need props or state
[stdout]
[stdout]Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching react-hooks/exhaustive-deps
[stdout]
[stdout]src/components/Cards.js
[stdout] Line 4:9: 'imageClick' is assigned a value but never used no-unused-vars
[stdout] Line 7:3: Anchors must have content and the content must be accessible by a screen reader jsx-a11y/anchor-has-content
[stdout] Line 13:6: Using target="_blank" without rel="noreferrer" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener react/jsx-no-target-blank
[stdout]
[stdout]src/components/Dashboard.js
[stdout] Line 2:23: 'EpubView' is defined but never used no-unused-vars
[stdout]
[stdout]src/components/login.js
[stdout] Line 30:24: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
[stdout]
[stdout]Search for the keywords to learn more about each warning.
[stdout]To ignore, add // eslint-disable-next-line to the line before.
[stdout]
[stderr]Terminated

Answer 1

Edit: After we saw more output from the scripts after using debugging (see below)

From the output it seems that your app does not compile because eslint found errors. That is default behaviour for apps created with create-react-app if I'm not mistaken.

I'd advice you to try and fix these errors in your dev environment first. Just starting the app by running your app_start script should do it. If you encounter errors you need help with, try asking new, specific questions here on SO.

(Optionally, if you don't want to fix the lint errors, you can tell eslint to ignore a line by adding // eslint-disable-next-line to the line before like the script mentions).

Debugging Tips Followed

Not directly an answer to your question, but you could consider adding this to your bash scripts to see more output:

#!/bin/bash
set -ex

Set -e stops your script on errors and -x prints out each command before it runs it so you have a bit of a stack trace.

See also: https://stackoverflow.com/a/19622300/904465 and https://stackoverflow.com/a/36273740/904465 for more info on set -e and set -x.

Answer 2

You can check the deployment logs from the EC2 itself.

Deployment logs are available in:

/opt/codedeploy-agent/deployment-root/deployment-logs/codedeploy-agent-deployments.log

Individual deployment logs can be found from the following location. Replace deployment-group-ID & deployment-ID with your actual values.

/opt/codedeploy-agent/deployment-root/deployment-group-ID/deployment-ID/logs/scripts.log

You can read more about CodeDeploy logs management from here. There is also an option to view the deployments logs from CloudWatch console using CloudWatch log agent. Refer this AWS blog for more information