Docker容器启动时覆盖Docker化React SPA的.env环境变量

你用docker start传入环境变量无效的核心原因是：dotenv-webpack是在Webpack构建阶段就把.env文件中的变量硬编码到编译后的静态JS文件里了。容器启动时传入的环境变量属于运行时系统变量，而React SPA是纯静态资源，无法读取容器的系统环境变量，自然没法覆盖。

方案一：构建时注入目标变量（适合提前知晓服务器配置的场景） #

直接在构建Docker镜像时传入目标变量，覆盖.env中的值，这样编译后的静态文件就会带上正确的变量值。

步骤： #

1. 编写Dockerfile：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 声明构建参数，接收外部传入的MY_VAR
ARG MY_VAR
# 将构建参数设置为环境变量，让Webpack读取
ENV MY_VAR=$MY_VAR
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]

2. 构建镜像时传递变量：

docker build --build-arg MY_VAR=yyy -t my-image .

3. 启动容器：

docker run -d -p 3000:3000 my-image

方案二：运行时动态注入变量（适合启动容器时才确定变量值的场景） #

通过在容器启动时生成一个包含环境变量的全局JS文件，让React代码读取这个全局变量。

步骤： #

1. 在React项目的public目录下创建env-config.js.template模板文件：

window.appEnv = {
  MY_VAR: '{{MY_VAR}}'
};

2. 编写Dockerfile：

FROM nginx:alpine
# 复制编译后的静态文件
COPY build /usr/share/nginx/html
# 复制模板文件和启动脚本
COPY public/env-config.js.template /usr/share/nginx/html/
COPY entrypoint.sh /
RUN chmod +x /entrypoint.sh
EXPOSE 3000
ENTRYPOINT ["/entrypoint.sh"]

3. 创建entrypoint.sh启动脚本：

#!/bin/sh
# 替换模板中的占位符，若未传入MY_VAR则使用默认值xxx
sed -i "s/{{MY_VAR}}/${MY_VAR:-xxx}/g" /usr/share/nginx/html/env-config.js.template
# 重命名为实际使用的JS文件
mv /usr/share/nginx/html/env-config.js.template /usr/share/nginx/html/env-config.js
# 启动NGINX
exec nginx -g "daemon off;"

4. 在React代码中读取全局变量：

const myVar = window.appEnv?.MY_VAR || 'xxx';

5. 启动容器时传递变量：

docker run -d -p 3000:3000 -e MY_VAR=yyy my-container

方案三：通过NGINX代理传递（针对API地址等后端地址变量） #

如果要覆盖的是API地址这类变量，可以通过NGINX的配置动态替换代理地址，无需修改前端代码。

步骤： #

1. 编写NGINX配置模板nginx.conf.template：

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
  # 代理API请求
  location /api {
    proxy_pass ${API_URL};
    proxy_set_header Host $host;
  }
}

2. 修改Dockerfile：

FROM nginx:alpine
COPY build /usr/share/nginx/html
COPY nginx.conf.template /etc/nginx/conf.d/
COPY entrypoint.sh /
RUN chmod +x /entrypoint.sh
EXPOSE 3000
ENTRYPOINT ["/entrypoint.sh"]

3. 修改entrypoint.sh脚本，添加NGINX配置替换逻辑：

#!/bin/sh
# 替换API地址占位符
sed -i "s/\${API_URL}/${API_URL:-http://default-api.com}/g" /etc/nginx/conf.d/nginx.conf.template
mv /etc/nginx/conf.d/nginx.conf.template /etc/nginx/conf.d/default.conf
# 启动NGINX
exec nginx -g "daemon off;"

4. 启动容器时传递API地址：

docker run -d -p 3000:3000 -e API_URL=http://target-server-api.com my-container

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