App Engine app.yaml handlers for built React app

Question

I'm trying to deploy production build of React app (created using create-react-app) to gcloud app engine flexible enviroment.

After running npm run build, the build folder has been created:

This is my app.yaml:

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

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

When deployed to App Engine, the version configuration shows:

runtime: nodejs
api_version: '1.0'
env: flexible
threadsafe: true
handlers:
  - url: /
    application_readable: false
    static_files: build/index.html
    require_matching_file: false
    upload: build/index.html
  - url: '/(.*)'
    application_readable: false
    static_files: "build/\\1"
    require_matching_file: false
    upload: 'build/.*'
automatic_scaling:
  min_num_instances: 2
  max_num_instances: 20
  cpu_utilization:
    target_utilization: 0.5

The development app is being served instead of the production version from the build folder. What am I doing wrong?

Answer 1

When deploying a GAE app/service the directory containing the app/service's app.yaml file being deployed is considered the app/service's top level directory and the content of that directory is what's being deployed. Which, in your case, matches what I suspect you're calling the development version.

If you want your build directory to be your app/service's top dir then you need to:

• create an app.yaml file in the build dir (manually or instruct your build process to do it)

  Note: you need to adjust the paths in that file, since there won't be a build directory in the app's directory anymore. Or try to create inside it a build -> . symlink to itself, possibly allowing the use of the existing app.yaml content as-is, without adjusting the paths (not 100% certain this will work, though).

• deploy that build/app.yaml file, not the one from the top (bsn) dir.