cloudbuild.yaml file example for deploying ReactJS project on Cloud Storage

cloudbuild.yml

# This is script for https://cloud.google.com/cloud-build/
steps:
# Install
- name: 'gcr.io/cloud-builders/yarn'
  args: ['install']
# Lint
- name: 'gcr.io/cloud-builders/yarn'
  args: ['run', 'lint']
# Test
- name: 'gcr.io/cloud-builders/yarn'
  args: ['run', 'unittest']
# Build
- name: 'gcr.io/cloud-builders/yarn'
  args: ['run', 'build']
  env:
  - 'REACT_APP_BACKEND_URL=${_REACT_APP_BACKEND_URL}'
  - 'NODE_PATH=./src'
# Deploy
- name: gcr.io/cloud-builders/gsutil
  args: ["-m", "rsync", "-d", "-r", "build", "gs://${_FE_STAGING_BUCKET_NAME}"]
# Grant public permission
# TODO: it should be remove, by setting default permissions for the bucket.
- name: gcr.io/cloud-builders/gsutil
  args: ["-m", "acl", "ch", "-u", "AllUsers:R", "gs://${_FE_STAGING_BUCKET_NAME}/**"]

push build command from local:

gcloud builds submit --config cloudbuild-staging.yaml . --substitutions _FE_STAGING_BUCKET_NAME=staging.wize-test-framework.xyz,_REACT_APP_BACKEND_URL=http://xxx:8080/api/v1

gcloud builds submit --config cloudbuild-staging.yaml .