Deployment failing using Google Cloud Build on to GCS - google-cloud-storage

Question

I have a reactjs static app running on Google Cloud Storage. Using Cloud Build, I'm trying to automate the build and deployment process.
Following is the cloudbuild.yaml file:
steps:
# Install
- name: 'gcr.io/cloud-builders/npm'
entrypoint: 'npm'
args: ['install']
# Test
#- name: 'gcr.io/cloud-builders/npm'
#entrypoint: 'npm'
#args: ['test', 'test:ci']
# Build
- name: 'gcr.io/cloud-builders/npm'
entrypoint: 'npm'
args: ['build']
# Syncing to Static Hosting on GCS
- name: 'gcr.io/cloud-builders/gsutil'
args: ["-m", "rsync", "-r", "-c", "-d", "./build", "gs://mybucket.com"]
The last step which is Syncing to GCS is failing. I'm getting below error:
Starting Step #0
Step #0: Already have image (with digest): gcr.io/cloud-builders/npm
Step #0: npm WARN saveError ENOENT: no such file or directory, open '/workspace/package.json'
Step #0: npm notice created a lockfile as package-lock.json. You should commit this file.
Step #0: npm WARN enoent ENOENT: no such file or directory, open '/workspace/package.json'
Step #0: npm WARN workspace No description
Step #0: npm WARN workspace No repository field.
Step #0: npm WARN workspace No README data
Step #0: npm WARN workspace No license field.
Step #0:
Step #0: up to date in 0.711s
Step #0: found 0 vulnerabilities
Step #0:
Finished Step #0
Starting Step #1
Step #1: Already have image (with digest): gcr.io/cloud-builders/npm
Finished Step #1
Starting Step #2
Step #2: Already have image (with digest): gcr.io/cloud-builders/gsutil
Step #2: CommandException: arg (./build) does not name a directory, bucket, or bucket subdir.
Finished Step #2
ERROR
ERROR: build step 2 "gcr.io/cloud-builders/gsutil" failed: step exited with non-zero status: 1
My project structure:
RootProject
-> front-end-webapp
-> src/
-> cloudbuild.yaml
-> build/
-> public/
-> package.json
-> backend-service1
-> backend-service2
The trigger which I have written points to cloudbuild.yaml file inside the front-end-webapp sub-folder.
When I manually execute
npm run build or yarn build
then I get production ready files inside build folder under front-end-webapp which I want to put on Google Cloud Storage. Only files inside the build folder and not the build folder itself containing files.
I tried a lot but not able to get it. If I do . instead of './build' in the args like args: ["-m", "rsync", "-r", "-c", "-d", "./build", "gs://mybucket.com"] then cloud build executes successfully but it also copies entires files and sub-folders present in the root project.

Answer 1

The build job is triggered by a file committed into the front-end-webapp and you run the cloudbuild.yaml file which is into front-end-webapp.
BUT, the root of the repo, is / and not front-end-webapp. Thereby, add the dir: 'front-end-webapp' attribute on each step. That force the steps to start into the correct folder!
EDIT
When I'm stuck and lost in the directory management, I introduce this step for having a view of what exist in my workspace.
- name: gcr.io/cloud-builders/gcloud:latest
entrypoint: "ls"
args: ["-lah","/workspace"]