如何通过cloudbuild.yaml为React项目配置环境变量并解决访问问题

一、修正cloudbuild.yaml的环境变量配置 #

你当前的配置里，env字段是给gcloud命令进程本身设置环境变量，但gcloud builds submit并不会把这些变量传递给Docker的构建过程，这就是变量没生效的原因。以下是两种可行的修正方案：

方案1：通过--substitutions传递变量到Docker构建 #

直接在gcloud builds submit的参数里添加--substitutions，把触发器里的替换变量传给构建流程，同时在Dockerfile中接收并转为环境变量：

修改后的cloudbuild.yaml：

steps:
  - name: "gcr.io/cloud-builders/gcloud"
    args:
      [
        "builds",
        "submit",
        "--tag",
        "gcr.io/$PROJECT_ID/image-name:version-name",
        "--substitutions",
        "_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}"
      ]
options:
  logging: CLOUD_LOGGING_ONLY

对应的Dockerfile需要添加ARG和ENV指令，把变量注入到React构建环境：

FROM node:18-alpine as builder
# 接收Cloud Build传递的替换变量
ARG REACT_APP_BACKEND_BASE_URL
ARG REACT_APP_FIREBASE_API_KEY
ARG REACT_APP_FIREBASE_AUTH_DOMAIN
ARG REACT_APP_FIREBASE_DATABASE_URL
ARG REACT_APP_FIREBASE_PROJECT_ID
ARG REACT_APP_FIREBASE_STORAGE_BUCKET
ARG REACT_APP_FIREBASE_MESSAGING_SENDERID
# 转为环境变量，供React构建读取
ENV REACT_APP_BACKEND_BASE_URL=$REACT_APP_BACKEND_BASE_URL
ENV REACT_APP_FIREBASE_API_KEY=$REACT_APP_FIREBASE_API_KEY
ENV REACT_APP_FIREBASE_AUTH_DOMAIN=$REACT_APP_FIREBASE_AUTH_DOMAIN
ENV REACT_APP_FIREBASE_DATABASE_URL=$REACT_APP_FIREBASE_DATABASE_URL
ENV REACT_APP_FIREBASE_PROJECT_ID=$REACT_APP_FIREBASE_PROJECT_ID
ENV REACT_APP_FIREBASE_STORAGE_BUCKET=$REACT_APP_FIREBASE_STORAGE_BUCKET
ENV REACT_APP_FIREBASE_MESSAGING_SENDERID=$REACT_APP_FIREBASE_MESSAGING_SENDERID

# 常规构建步骤
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产镜像打包
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

方案2：直接在Cloud Build步骤中执行React构建 #

跳过gcloud builds submit中转，直接用Node镜像作为Cloud Build步骤，设置环境变量后执行构建，再把产物打包到镜像：

steps:
  # 安装依赖并构建React项目
  - name: "node:18-alpine"
    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}'
    entrypoint: sh
    args:
      - -c
      - |
        npm install
        npm run build
  # 打包镜像到GCR
  - name: "gcr.io/cloud-builders/docker"
    args:
      [
        "build",
        "-t",
        "gcr.io/$PROJECT_ID/image-name:version-name",
        "."
      ]
images:
  - "gcr.io/$PROJECT_ID/image-name:version-name"
options:
  logging: CLOUD_LOGGING_ONLY

这种方式的Dockerfile只需保留生产镜像打包部分（同方案1的后半段）。

二、React项目中访问环境变量 #

React构建时会自动注入所有以REACT_APP_开头的环境变量，直接在代码里通过process.env访问即可：

// 组件中使用示例
function App() {
  return (
    <div>
      <p>后端地址：{process.env.REACT_APP_BACKEND_BASE_URL}</p>
      <p>Firebase API Key：{process.env.REACT_APP_FIREBASE_API_KEY}</p>
    </div>
  );
}

export default App;

注意：

• 变量名必须以REACT_APP_开头，否则会被React忽略。
• 这些变量是构建阶段注入的，运行时无法修改；如果需要动态变量，得从后端接口获取。

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