通过 vite-react 和 GCP Cloud Build 访问环境变量

Question

I have a React application that is Dockerized and hosted on Google Cloud Build. I have set environment variables on the Cloud Build, but I am unable to access them within my React application. What am I doing wrong and how can I access these environment variables in my React application?

steps:

• name: gcr.io/cloud-builders/docker env:

  • -"VITE_PUBLIC_KEY={$_VITE_PUBLIC_KEY}", -"VITE_SERVICE_ID={$_VITE_SERVICE_ID}", -"VITE_TEMPLATE_ID={$_VITE_TEMPLATE_ID}" args:
  • build
  • '--no-cache'
  • '-t'
  • 'image_name'
  • .
  • '-f'
  • Dockerfile.prod
• name: gcr.io/cloud-builders/docker args:
  • push
  • 'image_name'
• name: gcr.io/cloud-builders/gcloud args:
  • run
  • deploy
  • bob
  • '--image'
  • 'image_name'
  • '--region'
  • $_DEPLOY_REGION
  • '--allow-unauthenticated'
  • '--platform'
  • $_PLATFORM timeout: 600s

this is the yaml file:

I dont have a backend solution, I just want to be able to access 3 enviromnent variables within my application on client side. without declaring a.env file.

Tried declaring the enviroments in Cloud Run as well as declaring in the cloudbuild.yaml file. It works on aws but a different problem arises on aws.

Answer 1

One solution could be to hardcode the environment variables directly into your React code. This is not recommended as it could lead to security vulnerabilities and make it difficult to change the values in the future without re-deploying the entire application. Additionally, it would not be a true solution to accessing the environment variables as they would not be dynamically set at runtime.

Answer 2

There are different options, one and the best (in my opinion) is to store your env variables using the secret manager and then access them through your code (check this GitHub Repo ).

. . .

The other option is to access the same secrets that you created before when your pipeline is running, the downside is that you always have to redeploy your pipeline to update the env variables.

This is an example:

steps:
 # STEP 0 - BUILD CONTAINER 1
 - id: Build-container-image-container-one
   name: 'gcr.io/cloud-builders/docker'
   entrypoint: 'bash'
   args:
   - '-c'
   - |
     docker build -t gcr.io/$PROJECT_ID/container_one -f 'build/container_one.Dockerfile' .

 # STEP 2 - PUSH CONTAINER 1
 - id: Push-to-Container-Registry-container-one
   name: 'gcr.io/cloud-builders/docker'
   args:
   - push
   - gcr.io/$PROJECT_ID/container_one
   waitFor: ["Build-container-image-container-one"]

 # STEP 3 - DEPLOY CONTAINER 1 
 - id: Deploy-Cloud-Run-container-one
   name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
   entrypoint: gcloud
   args:
   - run
   - deploy
   - container_one
   - --image=gcr.io/$PROJECT_ID/container_one
   - --region={YOUR REGION}
   - --port={YOUR PORT}
   - --memory=3Gi
   - --cpu=1
   waitFor: ["Build-container-image-container-one", "Push-to-Container-Registry-container-one"]

 # STEP 4 - ENV VARIABLES
 - id: Accessing-secrets-for-env-variables
   name: 'gcr.io/cloud-builders/gcloud'
   entrypoint: 'bash'
   args: 
   - '-c'
   - |
     gcloud secrets versions access latest --secret=ENV_VARIABLE_ONE > key1.txt
     gcloud secrets versions access latest --secret=ENV_VARIABLE_TWO > key2.txt
     gcloud secrets versions access latest --secret=ENV_VARIABLE_THREE > key3.txt
   waitFor: ["Push-to-Container-Registry-container-one", "Build-container-image-container-one"]

# STEP 5 - SETTING KEYS
- id: Setting-keys
  name: 'gcr.io/cloud-builders/gcloud'
  entrypoint: 'bash'
  args: ['-c', 'gcloud run services update container_one --region={YOUR REGION} --set-env-vars="ENV_VARIABLE_ONE=$(cat key1.txt), ENV_VARIABLE_TWO=$(cat key2.txt), ENV_VARIABLE_THREE=$(cat key3.txt)"']

images: 
 - gcr.io/$PROJECT_ID/container_one