通过 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