如何兼顾Webpack使用.env与Docker Compose加载目录下.env？

问题根源 #

Webpack构建生产包时，会把process.env变量值直接硬编码进打包后的代码/静态文件，导致容器启动时Docker Compose传入的环境变量无法覆盖这些已固化的值。

解决方案 #

1. 拆分构建时与运行时变量 #

• 仅将构建阶段必须确定的变量（如静态资源CDN地址、API基础路径前缀这类不会在运行时变更的配置）通过Webpack注入，可给这类变量加固定前缀（比如BUILD_TIME_*）做区分。
• 把运行时需要动态调整的变量（如Redis地址、数据库连接信息这类随部署环境变化的配置）留给Node.js在容器启动时直接读取，不要让Webpack处理这类变量。

2. 修改Webpack配置 #

在webpack.config.prod.js中，只注入构建必需的变量，避免把所有process.env变量打包进代码：

const webpack = require('webpack');
const dotenv = require('dotenv').config({ path: './.env' });

module.exports = {
  // 其他原有配置...
  plugins: [
    new webpack.DefinePlugin({
      // 仅注入构建时依赖的变量
      'process.env.BUILD_TIME_API_BASE': JSON.stringify(dotenv.parsed.API_BASE),
      // 运行时变量（如REDIS_HOST）不要在这里注入
    })
  ]
};

3. 调整应用代码的变量读取逻辑 #

运行时变量直接从Node.js的process.env读取，不通过Webpack传递：

// 运行时动态读取，容器启动时会加载Docker Compose的.env值
const redisHost = process.env.REDIS_HOST;
// 构建时固化的变量，读取Webpack注入的对应变量
const apiBase = process.env.BUILD_TIME_API_BASE;

4. 保留Docker Compose的env_file配置 #

维持docker-compose.yml中的原有配置，继续指向当前目录的.env：

services:
  your-app:
    build: ../path-to-your-app
    env_file:
      - .env
    # 其他原有配置...

5. 前端SPA场景补充方案 #

如果是前端单页应用，需在容器启动时动态注入环境变量到页面：

• 项目根目录创建env-config.js模板文件：

window.env = {
  REDIS_HOST: '${REDIS_HOST}',
  API_BASE: '${API_BASE}'
};

• Dockerfile中添加启动脚本，启动前用容器内环境变量替换模板占位符：

# 原有构建步骤...
COPY env-config.js /usr/share/nginx/html/
COPY start.sh /start.sh
RUN chmod +x /start.sh

CMD ["/start.sh"]

• start.sh脚本内容：

#!/bin/sh
# 替换模板中的环境变量占位符
envsubst < /usr/share/nginx/html/env-config.js > /usr/share/nginx/html/env-config.js.tmp && mv /usr/share/nginx/html/env-config.js.tmp /usr/share/nginx/html/env-config.js
# 启动应用
nginx -g 'daemon off;'

• 前端代码通过window.env读取运行时变量，不再使用process.env。

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