Cloud Build YAML配置问题：.env文件环境变量未在应用中生效

核心问题分析 #

你的配置存在两个关键问题导致环境变量不生效：

1. 嵌套构建的隔离性：第二个步骤中使用gcloud builds submit会启动全新的Cloud Build流程，新流程不会继承当前步骤生成的.env文件和环境变量，等于重新拉取代码从头构建，自然无法读取到之前生成的变量值。
2. 环境变量注入逻辑冗余：同时使用export和env-cmd为npm run build注入变量，容易导致逻辑混淆，且没必要重复操作。

排查步骤 #

• 确认Secret变量传入正常：查看Cloud Build日志中第一个步骤的cat .env输出，确保所有_REACT_APP_*变量都已正确替换为Secret中的实际值。
• 检查React变量规范：确认项目中所有需要嵌入的变量都以REACT_APP_开头（React仅会处理以此为前缀的环境变量）。
• 验证文件存在性：在第二个步骤开头添加cat .env，确认.env文件能被正常读取，排除路径或权限问题。

修复后的YAML配置 #

去掉嵌套的gcloud builds submit，直接在当前构建流程中完成镜像构建，同时简化变量注入逻辑：

steps:
  # 步骤1：生成.env文件
  - name: 'gcr.io/cloud-builders/gcloud'
    entrypoint: 'bash'
    args:
      - '-c'
      - |
        echo "REACT_APP_BACKEND_BASE_URL=/" > .env
        echo "REACT_APP_FIREBASE_API_KEY=${_REACT_APP_FIREBASE_API_KEY}" >> .env
        echo "REACT_APP_FIREBASE_AUTH_DOMAIN=${_REACT_APP_FIREBASE_AUTH_DOMAIN}" >> .env
        echo "REACT_APP_FIREBASE_DATABASE_URL=${_REACT_APP_FIREBASE_DATABASE_URL}" >> .env
        echo "REACT_APP_FIREBASE_PROJECT_ID=${_REACT_APP_FIREBASE_PROJECT_ID}" >> .env
        echo "REACT_APP_FIREBASE_STORAGE_BUCKET=${_REACT_APP_FIREBASE_STORAGE_BUCKET}" >> .env
        echo "REACT_APP_FIREBASE_MESSAGING_SENDERID=${_REACT_APP_FIREBASE_MESSAGING_SENDERID}" >> .env
        cat .env

  # 步骤2：安装依赖
  - name: 'gcr.io/cloud-builders/npm'
    args: ['install']

  # 步骤3：使用.env变量构建React应用
  - name: 'gcr.io/cloud-builders/npm'
    entrypoint: 'bash'
    args:
      - '-c'
      - |
        npx env-cmd -f .env npm run build

  # 步骤4：构建并推送Docker镜像
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/test:test', '.']

options:
  logging: CLOUD_LOGGING_ONLY
images:
  - 'gcr.io/$PROJECT_ID/test:test'

额外优化建议 #

可以直接省略生成.env文件的步骤，将Secret变量直接作为环境变量传入构建步骤，减少文件操作环节：

steps:
  - name: 'gcr.io/cloud-builders/npm'
    args: ['install']

  - name: 'gcr.io/cloud-builders/npm'
    args: ['run', 'build']
    env:
      - 'REACT_APP_BACKEND_BASE_URL=/'
      - 'REACT_APP_FIREBASE_API_KEY=${_REACT_APP_FIREBASE_API_KEY}'
      - 'REACT_APP_FIREBASE_AUTH_DOMAIN=${_REACT_APP_FIREBASE_AUTH_DOMAIN}'
      - 'REACT_APP_FIREBASE_DATABASE_URL=${_REACT_APP_FIREBASE_DATABASE_URL}'
      - 'REACT_APP_FIREBASE_PROJECT_ID=${_REACT_APP_FIREBASE_PROJECT_ID}'
      - 'REACT_APP_FIREBASE_STORAGE_BUCKET=${_REACT_APP_FIREBASE_STORAGE_BUCKET}'
      - 'REACT_APP_FIREBASE_MESSAGING_SENDERID=${_REACT_APP_FIREBASE_MESSAGING_SENDERID}'

  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/test:test', '.']

options:
  logging: CLOUD_LOGGING_ONLY
images:
  - 'gcr.io/$PROJECT_ID/test:test'

同时确保Dockerfile正确复制构建后的静态文件，比如：

FROM nginx:alpine
COPY build/ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

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