如何通过Vite-React与GCP Cloud Build访问客户端环境变量？

问题分析 #

你的配置存在两个核心问题：

1. Cloud Build的环境变量传递方式错误：你把变量放在了Cloud Build Docker步骤的env字段里，这只会让变量存在于执行Docker命令的Cloud Build容器中，不会传递到Docker镜像的构建过程，Vite在构建时根本读不到这些值。
2. 未适配Vite的构建时注入逻辑：React客户端应用的环境变量是在构建阶段注入静态文件的，必须把Cloud Build的变量通过Docker构建参数传递到镜像构建流程，才能被Vite捕获。

修正步骤 #

1. 修改cloudbuild.yaml的Docker构建步骤

删除原步骤中的env字段，改用--build-arg参数将Cloud Build的替代变量传递到Docker构建阶段：

steps:
  - name: gcr.io/cloud-builders/docker
    args:
      - build
      - '--no-cache'
      - '-t'
      - 'image_name'
      - '.'
      - '-f'
      - Dockerfile.prod
      - '--build-arg'
      - "VITE_PUBLIC_KEY=$_VITE_PUBLIC_KEY"
      - '--build-arg'
      - "VITE_SERVICE_ID=$_VITE_SERVICE_ID"
      - '--build-arg'
      - "VITE_TEMPLATE_ID=$_VITE_TEMPLATE_ID"
  - name: gcr.io/cloud-builders/docker
    args:
      - push
      - 'image_name'
  - name: gcr.io/cloud-builders/gcloud
    args:
      - run
      - deploy
      - bob
      - '--image'
      - 'image_name'
      - '--region'
      - $_DEPLOY_REGION
      - '--allow-unauthenticated'
      - '--platform'
      - $_PLATFORM
    timeout: 600s

2. 修改Dockerfile.prod，接收构建参数并注入环境变量

在构建阶段添加ARG指令接收参数，再用ENV设置为容器内的环境变量，让Vite执行build命令时能读取到：

# 构建阶段
FROM node:18-alpine AS builder

# 接收Cloud Build传递的构建参数
ARG VITE_PUBLIC_KEY
ARG VITE_SERVICE_ID
ARG VITE_TEMPLATE_ID

# 设置为环境变量，供Vite构建时捕获
ENV VITE_PUBLIC_KEY=$VITE_PUBLIC_KEY
ENV VITE_SERVICE_ID=$VITE_SERVICE_ID
ENV VITE_TEMPLATE_ID=$VITE_TEMPLATE_ID

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 部署阶段（以Nginx为例）
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 在React应用中访问变量

Vite会自动把以VITE_开头的环境变量注入到import.meta.env对象中，直接在组件里使用即可：

function App() {
  return (
    <div>
      <p>公钥：{import.meta.env.VITE_PUBLIC_KEY}</p>
      <p>服务ID：{import.meta.env.VITE_SERVICE_ID}</p>
      <p>模板ID：{import.meta.env.VITE_TEMPLATE_ID}</p>
    </div>
  );
}

export default App;

额外说明 #

• 纯客户端应用无需在Cloud Run设置环境变量，因为变量值已经在构建时打包进静态文件，运行时无法修改。
• 确保Cloud Build触发器中已正确配置_VITE_PUBLIC_KEY、_VITE_SERVICE_ID、_VITE_TEMPLATE_ID这三个自定义替代变量的对应值。

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