如何为Google Cloud Run部署的React应用Docker镜像添加环境变量

1. 修改Dockerfile支持构建时参数注入 #

在React构建阶段添加ARG声明，并将其转为React可识别的REACT_APP_*环境变量（React仅会读取带该前缀的变量）：

# build environment
FROM node:21-alpine as react-build
WORKDIR /app
COPY . ./

# 声明构建时需要传入的参数，可根据需求添加更多
ARG REACT_APP_API_URL
ARG REACT_APP_APP_TITLE

# 将构建参数转为环境变量，供React构建时嵌入
ENV REACT_APP_API_URL=$REACT_APP_API_URL
ENV REACT_APP_APP_TITLE=$REACT_APP_APP_TITLE

#Using NPM instead of yarn
RUN npm install
RUN npm run build

# server environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template
ENV PORT 8080
ENV HOST 0.0.0.0
RUN sh -c "envsubst '\$PORT'  < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf"
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

若需要默认值，可在ARG后直接指定，比如ARG REACT_APP_API_URL=https://default-api.example.com，构建时未传参则自动使用默认值。

2. 通过gcloud构建命令传递参数 #

在gcloud builds submit中使用--build-arg参数，将具体值传递给Docker：

gcloud builds submit --tag some-image-name:latest \
  --build-arg REACT_APP_API_URL="https://your-api.example.com" \
  --build-arg REACT_APP_APP_TITLE="My Cloud Run App"

有多个参数时，继续追加--build-arg即可。

3. 在React应用中使用变量 #

在组件或代码里直接通过process.env.REACT_APP_*访问注入的值：

function App() {
  return (
    <div>
      <h1>{process.env.REACT_APP_APP_TITLE}</h1>
      <p>API地址: {process.env.REACT_APP_API_URL}</p>
    </div>
  );
}

注意事项 #

这些变量是在构建时嵌入到React应用静态文件中的，修改参数后需要重新构建镜像，完全符合你“构建时参数化”的需求，无需依赖运行时动态读取方案。

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