如何在React客户端应用中使用Google Cloud Run容器变量并注入GCP密钥

我用React开发前端应用、Golang开发API接口。开发环境下一切正常，Vite服务器能正确加载.env变量；但部署后React应用已完成构建，环境变量被打包进静态文件，而Google Cloud Run的环境变量仅在服务器端暴露，无法被React客户端访问。

我曾尝试通过Cloud Build触发器将GCP密钥注入容器构建过程，却遇到如下错误：

Your build failed to run: generic::invalid_argument: invalid value for 'build.substitutions': key in the template "MY_KEY" is not a valid built-in substitution.

这种方案可行吗？有没有更优解决办法？

编辑1：
我已修改触发器配置：

steps:
  - name: gcr.io/cloud-builders/docker
    args:
      - build
      - '--no-cache'
      - '-t'
      - >-
        $_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
      - '--build-arg'
      - MY_KEY=${_MY_KEY}
      - .
      - '-f'
      - Dockerfile
    id: Build
    secretEnv:
      - _MY_KEY
  - name: gcr.io/cloud-builders/docker
    args:
      - push
      - >-
        $_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
    id: Push
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk:slim'
    args:
      - run
      - services
      - update
      - $_SERVICE_NAME
      - '--platform=managed'
      - >-
        --image=$_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
      - >-
        --labels=managed-by=gcp-cloud-build-deploy-cloud-run,commit-sha=$COMMIT_SHA,gcb-build-id=$BUILD_ID,gcb-trigger-id=$_TRIGGER_ID
      - '--region=$_DEPLOY_REGION'
      - '--quiet'
    id: Deploy
    entrypoint: gcloud
images:
  - >-
    $_AR_HOSTNAME/$PROJECT_ID/cloud-run-source-deploy/$REPO_NAME/$_SERVICE_NAME:$COMMIT_SHA
options:
  substitutionOption: ALLOW_LOOSE
  logging: CLOUD_LOGGING_ONLY
substitutions:
  _all_the_standard_substitutions(hidden)
tags:
  - gcp-cloud-build-deploy-cloud-run
  - gcp-cloud-build-deploy-cloud-run-managed
  - configurator-staging
availableSecrets:
  secretManager:
    - versionName: >-
        projects/$PROJECT_ID/secrets/MY_SECRET/versions/latest
      env: _MY_KEY

同时在Dockerfile中添加了以下内容：

ARG MY_KEY
ENV MY_KEY_FOR_APP=$MY_KEY

但部署后变量虽存在，却为空字符串。

一、修复当前构建变量为空的问题 #

1. 检查Cloud Build权限
   • 确保Cloud Build服务账号拥有Secret Manager Secret Accessor角色，否则无法读取Secret Manager中的密钥内容。
2. 修正Docker构建逻辑
   • React依赖Vite的构建时环境变量，你当前将MY_KEY设为容器运行时环境变量，构建阶段根本没用到。需要在构建React的步骤中直接注入变量：
     修改Dockerfile：

     ARG MY_KEY
     # 假设React构建命令为npm run build，用VITE_前缀让Vite识别变量
     RUN VITE_MY_KEY=$MY_KEY npm run build
     

     React客户端可通过import.meta.env.VITE_MY_KEY访问该变量。
3. 验证触发器配置
   • 确认触发器的substitutions中已显式添加_MY_KEY自定义替换变量；同时检查Secret Manager中的MY_SECRET版本是否存在且有有效值。

二、更优方案：避免前端打包敏感密钥 #

如果MY_KEY是敏感信息（如API密钥），直接打包进前端会有泄露风险，推荐两种安全方案：

• API代理模式：React客户端请求自己的Golang API接口，由Golang服务从Cloud Run环境变量中读取密钥，再返回给前端（可添加权限校验）。
• 远程配置托管：用GCP的Cloud Runtime Config或Firebase Remote Config托管前端配置，客户端在运行时请求配置（需做好访问控制）。

三、非敏感配置的替代方案 #

如果是非敏感配置，可在Cloud Build阶段用sed替换模板文件后构建：

# 假设存在src/env-template.js模板文件，其中包含{{MY_KEY}}占位符
sed -i "s/{{MY_KEY}}/${_MY_KEY}/g" src/env-template.js
npm run build

内容的提问来源于stack exchange，提问作者Emaborsa