'502 Bad gateway after deploying react app on GCP

I recently upgraded my application from CRA-ts to CRA, upgraded react version from 16 to 17 with typescript version of 4.1 and node version to 16. On backend I still use node 8. When I deploy my app and try to access url, I get this error:

502 Bad Gateway - ngix

I checked GAE logs and ran a query for upstream I got this:

[error]: upstream prematurely closed connection while reading response header from upstream, client...

Built the application locally (npm run build) and ran it on static server and it was working absolutely fine. Here is my script from package.json file:

"scripts": {
    "start": "serve -s build",
    "local": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test --env=jsdom --transformIgnorePatterns"
  }

I have these in my yaml file

runtime: nodejs
env: flex

manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 1.0
  disk_size_gb: 5

network:
  session_affinity: true

env_variables:
 This has backend deployed url
  
handlers:
  - url: /(.*\..+)$
    static_files: build/\1
  - url: /.*
    static_files: build/index.html

I'm able to access my backend url which is deployed on gcp. It's just the issue with frontend. When I switch back to my old react and CRA-ts version and deploy, it works fine. Not sure what's going wrong after upgrading to new react version.

Tried to find nginx folder in /usr/local/nginx/conf, /etc/nginx and /usr/local/etc/nginx. But there was nothing in there. Is there anything I'm still missing?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source