REACT APP not access the google cloud run environment variables

Question

I am using GitLab ci as my CI/CD tool. I am deploying the dockerized react app to cloud run but I am not able to access the environment variables declared on cloud run. Thank you!

Dockerfile

# build environment
FROM node:8-alpine as react-build

WORKDIR /app
COPY . ./

RUN npm install
RUN npm run build

# server environment
FROM nginx: alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template

COPY --from=react-build /app/build /usr/share/nginx/html

ENV PORT 8080
ENV HOST 0.0.0.0
EXPOSE 8080
CMD sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"

gitlab-ci.yml

default:
  image: google/cloud-sdk:alpine
  before_script:
    - gcloud config set project PROJECTID
    - gcloud auth activate-service-account --key-file $GCP_SERVICE_CREDS
stages:
  - staging
  - production

staging:
  stage: staging
  environment:
    name: staging
  only:
    variables:
      - $DEPLOY_ENV == "staging"
  script:
    - gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
    - gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated 

production:
  stage: production
  environment:
    name: production
  only:
    variables:
      - $DEPLOY_ENV == "production"
  script:
    - gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
    - gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated --set-env-vars NODE_ENV=production

Answer 1

Credits to Guillaume Blaquiere because this answer is based on his post from this thread.

According to React documentation:

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime.

Most likely what happens is that you expose static files to your users and the users get the files and load them in their browser like this:

console.log("REDIRECT", process.env.REACT_APP_API_END_POINT)

This returns null because the users' browser execute the Javascript and read the env variable on the current environment: the users' browser. You should have an execution that run on Cloud Run to use the env vars. If the code is ran on user side (in their browser), the env vars will not appear.