How to set environment variables using cloudbuild.yaml for react project

Question

The build is working but environment variables are not assigned during the build, How can I access environment variables?

My cloudbuild.yaml file(Substitution variables are added in the trigger configuration)

steps:
  # Step 1: Build and submit to Google Container Registry
  - name: "gcr.io/cloud-builders/gcloud"
    args:
      [
        "builds",
        "submit",
        "--tag",
        "gcr.io/$PROJECT_ID/image-name:version-name"
      ]
    env:
      - 'REACT_APP_BACKEND_BASE_URL=/'
      - 'REACT_APP_FIREBASE_API_KEY=${_REACT_APP_FIREBASE_API_KEY}'
      - 'REACT_APP_FIREBASE_AUTH_DOMAIN=${_REACT_APP_FIREBASE_AUTH_DOMAIN}'
      - 'REACT_APP_FIREBASE_DATABASE_URL=${_REACT_APP_FIREBASE_DATABASE_URL}'
      - 'REACT_APP_FIREBASE_PROJECT_ID=${_REACT_APP_FIREBASE_PROJECT_ID}'
      - 'REACT_APP_FIREBASE_STORAGE_BUCKET=${_REACT_APP_FIREBASE_STORAGE_BUCKET}'
      - 'REACT_APP_FIREBASE_MESSAGING_SENDERID=${_REACT_APP_FIREBASE_MESSAGING_SENDERID}'
options:
  logging: CLOUD_LOGGING_ONLY

Answer 1

To use substitution variables, you usually need to define them in a separate YAML entry (similarly to what you've done with options). They can then be overwritten when you submit the trigger, if you want.

So for you, it would be something like:

options:
  logging: CLOUD_LOGGING_ONLY

substitutions:
  - _REACT_APP_FIREBASE_API_KEY=default-key-value
  - {Other substitution variables here}