Docker构建React镜像时.env配置修改不生效问题解决

构建时环境变量不生效，核心是两个Docker构建配置错误：

• 项目根目录的.dockerignore要么把.env加入了忽略列表，导致COPY . ./执行时，.env根本没被复制到构建阶段的Node容器里，React打包流程读不到最新配置， fallback到缓存的旧值；
• 本地手动生成的build目录没有被.dockerignore忽略，复制文件时把本地旧的、硬编码了vps-a******.*******:8800地址的构建产物带进了构建容器，后续容器内的打包步骤没有覆盖旧文件，最终打进Nginx镜像的始终是旧产物。这也解释了为什么你本地手动build完再做docker build就能正常——此时复制进去的本地build目录是刚生成的、带最新配置的版本。

第一步：修正.dockerignore配置 #

在项目根目录找到/创建.dockerignore文件，写入以下规则，彻底阻断本地无关文件进入构建上下文：

node_modules
build
.git
.github
*.md
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

注意：不要把.env加入忽略列表，保证构建时能读到该文件；必须把本地build目录加入忽略，绝对不能让本地构建产物干扰容器内的构建流程。

第二步：优化Dockerfile构建逻辑 #

调整后的Dockerfile会利用Docker分层缓存提升构建速度，同时明确从构建阶段复制产物，避免引用本地旧文件：

# 构建阶段
FROM node:16-alpine AS node-build
WORKDIR /app

# 先复制依赖描述文件，这部分不变的话会直接用缓存，加速构建
COPY package.json package-lock.json ./
RUN npm ci --force

# 复制全量项目代码，此时本地build、node_modules都被忽略，只有源码和.env会被复制
COPY . .

# 调试用：构建时打印.env内容，确认配置读取正确，验证通过后可以删除这行
RUN echo "Loaded env config:" && cat .env

# 执行构建，强制读取最新环境变量生成产物
RUN npm run build --force

# 生产运行阶段
FROM nginx:stable-alpine
# 明确从构建阶段复制刚生成的build产物，不要引用上下文里的本地文件
COPY --from=node-build /app/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 6100
CMD ["nginx", "-g", "daemon off;"]

第三步：无缓存构建验证 #

第一次调整完配置执行构建时，加上--no-cache参数避免旧构建层缓存干扰：

docker build --no-cache -t react-frontend .

构建过程中看打印的.env内容，如果是你最新修改的REACT_APP_SERVER_URL值，最终运行的容器就会连接正确的后端地址。

如果流水线需要对接多环境（测试/生产分别对应两个后端地址），不需要每次提交代码修改.env，可以用Docker构建参数动态注入环境变量，更安全灵活：

1. 修改Dockerfile构建阶段，声明构建参数：

FROM node:16-alpine AS node-build
WORKDIR /app
# 声明构建时传入的环境变量
ARG REACT_APP_SERVER_URL
# 将构建参数注入为React打包可识别的环境变量
ENV REACT_APP_SERVER_URL=${REACT_APP_SERVER_URL}

COPY package.json package-lock.json ./
RUN npm ci --force
COPY . .
RUN npm run build --force

# 后续Nginx阶段配置不变

2. 构建时根据部署环境传入对应地址即可：

# 构建测试环境镜像，连141开头的服务
docker build --build-arg REACT_APP_SERVER_URL=http://141.9*.*****:8800 -t react-frontend:test .

# 构建生产环境镜像，连vps-a开头的服务
docker build --build-arg REACT_APP_SERVER_URL=http://vps-a******.*******:8800 -t react-frontend:prod .

这种方式不需要把环境配置提交到代码仓库，也不需要为不同环境维护多份.env文件，完全适配自动化流水线的构建逻辑。

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