Cloud Build to serve only build folder from React - google-app-engine

Question

I'm new to google cloud and I'm trying my best to implement CI / CD on a simple MERN stack application.
I was able to set up google cloud build and get the deploy with automatic triggers (from github branch) to work.
I have only one question: in the cloudbuild.yaml file I have inserted several steps, to do first npm install, then npm build and finally deploy. The process is quite slow and it also copies all the code to the server, not just the build folder.
I would like to understand how to configure the file to be able to use the build folder already present in the github repository and do the deploy directly, without further steps.
On the frontend I use react, the only thing I have to do is serve the static index.html file.
Here is my current configuration (only the frontend, to understand)
steps:
# Step 0: FRONTEND npm install
- name: "gcr.io/cloud-builders/npm"
dir: 'frontend'
args: ['install']
timeout: "5m"
# Step 1: FRONTEND optimized build
- name: "gcr.io/cloud-builders/npm"
dir: 'frontend'
args: ["run", "build"]
timeout: "5m"
# Step 2: FRONTEND Deploy cloud app frontend
- name: "gcr.io/cloud-builders/gcloud"
args: ["app", "deploy", "-v", "0-1-2", "app.yaml"]
dir: 'frontend'
timeout: "20m"
timeout: 60m
In my remote repository I have the build folder ready to use, but I can't figure out how to do the job.
I've also tried something similar to this:
Upload build folder in Google Cloud Build
without success.
One of the problems is that at the end of the process it appears that cloud build is trying to start npm start.
Finally, I am currently using express to simply serve static files.
Using google cloud can I avoid using it and simply configure the handlers from the app.yaml file?
What web server does it use under the hood to serve files if I don't implement express?

Answer 1

If you only need to deploy the build folder, then the link you've provided should do the job. You don't need to run npm install and npm run build unless you want to to copy all your code and create the build folder using Cloud Build.
Credits to #Guillaume (updated, assuming the .yaml file is located at the root directory of the project and build located at a directory called frontend):
steps:
# Step 0: FRONTEND copy only build and deploy cloud app frontend
- name: 'gcr.io/cloud-builders/gcloud'
entrypoint: bash
dir: 'frontend'
args:
- '-c'
- |
cd ..
cp app-production-build.yaml frontend/build
cd frontend/build
gcloud app deploy
timeout: '1600s'
By default, Cloud Build uses a directory named /workspace as a working directory. If you set the dir field in the build step, the working directory is set to /workspace/<dir>. Basically for this build step, Cloud Build's currently on a directory called frontend in the root directory of your project/repo.
Also as Guillaume mentioned, you need to update your app.yaml URL handlers for this to work. I tested this sample inside the build folder of a new React app and it works for me:
runtime: nodejs12
service: frontend-react
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
static_files: \1
upload: (.*\..+)$
# Catch all handler to index.html
- url: /.*
static_files: index.html
upload: index.html
To answer your last question, you can serve static files directly from your app and what you need to do is to configure URL handlers such as static_dir or static_files.
Take note that each file inside build/static are cached to speed up performance so there could be a delay whenever you make several deployments.
Node.js on App Engine Standard doesn't use any webserver under the hood and you have to set it up by specifying it on your package.json. Here's some web frameworks recommended by Google docs.