How do I deploy a React Production Build with GCP?

Question

I'm trying to deploy my React project to Production and it seems that Google App Engine is building the development rather than the Production Build folder. Perhaps I'm missing something very simple...

I first run the "npm run build", then I run "npm run deploy" or "gcloud app deploy app.yaml --project [project_name]"

Folder Structure: here is my app.yaml file

runtime: nodejs
env: flex

env_variables:
    APP_ENV: "production"

handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /
    static_dir: build
  - url: /static
    static_dir: build/static

automatic_scaling:
    min_num_instances: 2
    max_num_instances: 4
    cool_down_period_sec: 180
    cpu_utilization:
       target_utilization: 0.50

resources:
    cpu: 1
    memory_gb: 3.5 
    disk_size_gb: 10

Here is my package.json:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gcloud app deploy app.yaml --project ....",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

When it finish deploying, I still the development warnings and when I run page speed - the js files arent minified/ optimized. What am I missing?

Jose V Jose V · Accepted Answer · 2020-02-18T17:30:53

When the gcloud app deploy command is executed, it runs the npm start command to start the application. This is specified in the Docs.

In your case, the npm start command executes "react-scripts start", which starts the development server.

In order to serve your app in a production environent, your start command should start a web server that serves the static files of your react app. In order to do so, you can do as follows:

npm install -s serve

Then, change the start script in your package.json from:

"start": "react-scripts start"

To:

"start": "serve -s build -l 8080"

And then deploy normally

How do I deploy a React Production Build with GCP?

1 Answers