trying to debug "502 Bad Gateway" error after deploying react app to gcp?

Question

I've deployed a React app via "gcloud app deploy". The "gcloud app browse" command opens a browser which tries to load for a while but then displays a browser title of "502 Bad Gateway." I found the following troubleshooting page:

https://cloud.google.com/endpoints/docs/openapi/troubleshoot-response-errors#gae_errors

The following info on the troubleshoting page appears to be a good match for my scenario:

"An error code 502 with BAD_GATEWAY in the message usually indicates that App Engine terminated the application because it ran out of memory. The default App Engine flexible VM only has 1GB of memory, with only 600MB available for the application container."

But I don't see any "out of memory" error reference in my logs for this. I think I probably need to ensure that I "gcloud app deploy" with a proper app.yaml file. I'm having problems identifying what is a valid minimum yaml file for my React app for which I can be assured that my "gcloud app deploy" will have the expected result. I found the following reference which appears to be a good starting point:

https://cloud.google.com/endpoints/docs/openapi/get-started-app-engine

^^^ This page refers to the following yaml sample code:

https://github.com/GoogleCloudPlatform/java-docs-samples/blob/master/endpoints/getting-started/src/main/appengine/app.yaml

But the url refers to "java-docs-sample" so not sure if this is a vaid yaml file for a React app deployment. Can you provide some guidance on this? I'm really just looking for the minimum yaml file that I can use for a successful deployment. This is the structure of the yaml file that I used for my initial "gcloud app deploy", and the deployment process appeared to indicate success, but not sure if there is any type of fatal flaw here or anything else that may be missing:

runtime: nodejs
env: flex
manual_scaling:
  instances: 1
resources:
  cpu: 1

Answer 1

From what I understand, you just want a minimal good app.yaml for react apps as the out of memory seems to be the issue if everything else is correct.

A sample app.yaml for react is the following:

# [START runtime]
runtime: nodejs
env: flex
# [END runtime]

# [START handlers]
handlers:
  - url: /
    static_files: index.html
    upload: index.html

  # [END handlers]

But you need to modify your handlers according to your needs/ configuration.

502 error sometimes indicates that your app has an issue itself. So it's better to test locally first and make sure your app is working.

Then for the memory part, you can try specifying the instance type to be one with a higher memory. If it still throws the same error then most likely the issue is within your app or dependencies.

Answer 2

I think there is something about react-scripts start that google cloud doesn't like; I've had trouble with this (react app + google cloud deployment) twice in completely different environments (one had docker and one did not); but the first time I never posted anything to stack overflow so I had to go through the pain again :p

Try changing the package.json file to not use react-scripts start when you run npm run start. Note that this will overwrite the npm run start and npm start command, so if you use this, you can also update the package json with another keyword such as local and change your local running process to involve writing npm run local

  "scripts": {
    "start": "serve -s build",
    "local": "react-scripts start",
    "build": "react-scripts build",
    ...
  },

A working repo