通過 vite-react 和 GCP Cloud Build 訪問環境變量

Question

我有一個 Dockerized 並托管在 Google Cloud Build 上的 React 應用程序。 我在 Cloud Build 上設置了環境變量，但我無法在我的 React 應用程序中訪問它們。 我做錯了什么以及如何在我的 React 應用程序中訪問這些環境變量？

腳步：

• 名稱：gcr.io/cloud-builders/docker 環境：

  • -"VITE_PUBLIC_KEY={$_VITE_PUBLIC_KEY}", -"VITE_SERVICE_ID={$_VITE_SERVICE_ID}", -"VITE_TEMPLATE_ID={$_VITE_TEMPLATE_ID}" 參數：
  • 建造
  • '--無緩存'
  • '-t'
  • '圖像名稱'
  • .
  • '-F'
  • Dockerfile.prod
• 名稱：gcr.io/cloud-builders/docker 參數：
  • 推
  • '圖像名稱'
• 名稱：gcr.io/cloud-builders/gcloud 參數：
  • 跑步
  • 部署
  • 鮑勃
  • ' - 圖片'
  • '圖像名稱'
  • ' - 地區'
  • $_DEPLOY_REGION
  • '--允許未經身份驗證'
  • ' - 平台'
  • $_PLATFORM 超時：600 秒

這是 yaml 文件：

我沒有后端解決方案，我只想能夠在客戶端訪問我的應用程序中的 3 個環境變量。 無需聲明 a.env 文件。

嘗試在 Cloud Run 中聲明環境以及在 cloudbuild.yaml 文件中聲明。 它適用於 aws，但在 aws 上會出現不同的問題。

Answer 1

一種解決方案是將環境變量直接硬編碼到您的 React 代碼中。 不建議這樣做，因為它可能會導致安全漏洞，並使將來在不重新部署整個應用程序的情況下很難更改這些值。 此外，它不是訪問環境變量的真正解決方案，因為它們不會在運行時動態設置。

Answer 2

有不同的選擇，一個也是最好的（在我看來）是使用secret manager存儲您的環境變量，然后通過您的代碼訪問它們（檢查這個env Repo ）。

. . .

另一種選擇是在管道運行時訪問您之前創建的相同秘密，缺點是您總是必須重新部署管道以更新環境變量。

這是一個例子：

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