使用docker-compose build时Webpack EnvironmentPlugin无法读取环境变量

问题现象 #

• 本地直接执行构建（如pnpm run fe-build）时，Webpack能正常读取.env文件中的环境变量
• 通过docker-compose build构建镜像时，Webpack的EnvironmentPlugin报错找不到AUTH0_CLIENT_ID等变量，但容器运行后能在面板中看到这些变量，Mongo等其他服务也能正常使用

核心原因 #

docker-compose.yml中配置的env_file是容器运行阶段的环境变量，不会作用于镜像构建阶段（即Dockerfile中RUN命令执行时）。Webpack构建是在镜像构建阶段完成的，因此拿不到这些变量。

解决方案 #

方案1：构建阶段传递环境变量（推荐）

修改docker-compose.yml，在web服务的build配置中添加构建参数，把需要的变量从主机传递到构建阶段：

web:
  container_name: web
  build:
    dockerfile: ./docker/app.Dockerfile
    args:
      - AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
      - AUTH0_DOMAIN=${AUTH0_DOMAIN}
      - NODE_ENV=${NODE_ENV}
  env_file:
    - .env
  ports:
    - '1337:1337'
  depends_on:
    - mongo

然后修改app.Dockerfile的build阶段，接收这些参数并设置为环境变量：

###################
# build
###################

FROM base As build

# 接收构建参数并转为环境变量
ARG AUTH0_CLIENT_ID
ARG AUTH0_DOMAIN
ARG NODE_ENV
ENV AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
ENV AUTH0_DOMAIN=${AUTH0_DOMAIN}
ENV NODE_ENV=${NODE_ENV}

WORKDIR /my

COPY --chown=node:node --from=deps ./my/. .
COPY --chown=node:node ./tsconfig* .
COPY --chown=node:node ./webpack.js .

COPY --chown=node:node ./prisma ./prisma
COPY --chown=node:node ./src ./src
COPY --chown=node:node ./aps ./aps

RUN pnpm exec prisma generate
RUN pnpm run build
RUN pnpm run fe-build

USER node

ENTRYPOINT node dist/main.js; /

方案2：将.env文件复制到镜像中（不推荐用于敏感信息）

如果.env文件不包含敏感数据，可以在构建阶段把文件复制到镜像里，让Webpack直接读取：
在app.Dockerfile的build阶段添加：

COPY --chown=node:node ./.env ./.env

同时确保Webpack配置文件开头加载dotenv：

require('dotenv').config();

方案3：修复NODE_ENV冲突警告

针对错误中的Conflicting values for 'process.env.NODE_ENV'警告，可在EnvironmentPlugin中给NODE_ENV设置默认值：

const plugins = [
  new webpack.EnvironmentPlugin({
    CLOUDINARY_BUCKET: undefined,
    AUTH0_CLIENT_ID: undefined,
    AUTH0_DOMAIN: undefined,
    NODE_ENV: 'production' // 设置默认值解决冲突
  }),
  // ...其他插件
];

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