Docker容器化React应用：自动切换.env文件的最佳实践

这里提供两种通用实践来实现QA/Stage环境的自动化切换，无需手动修改package.json：

方案一：通过Docker构建参数传递环境标识（推荐） #

这种方式最灵活，只需修改package.json和Dockerfile各一处，就能支持任意多环境的构建。

1. 修改package.json的build脚本
   将固定的.env路径替换为环境变量，让脚本动态读取对应环境的配置文件：

"scripts": {
  "start": "env-cmd -f ./config/.env.$REACT_APP_ENV react-scripts start",
  "build": "env-cmd -f ./config/.env.$REACT_APP_ENV react-scripts build"
}

2. 修改Dockerfile，添加构建参数支持
   在build阶段添加ARG接收环境参数，再通过ENV传递给npm脚本：

FROM node:16.18.0 as build
# 定义构建参数，默认值设为qa
ARG BUILD_ENV=qa
# 将构建参数赋值给环境变量，供npm脚本使用
ENV REACT_APP_ENV=$BUILD_ENV
RUN node -v
WORKDIR /usr/src/app
# 修正PATH路径，确保能找到node_modules下的脚本
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
RUN ls -ltr /usr/src/app/build/

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY --from=build /usr/src/app/build/ .
EXPOSE 80
CMD nginx -g 'daemon off;'

3. 执行构建命令

• 构建QA环境镜像：

  docker build --build-arg BUILD_ENV=qa -t react-app:qa .
  

• 构建Stage环境镜像：

  docker build --build-arg BUILD_ENV=staging -t react-app:stage .
  

方案二：定义多环境npm脚本 #

如果偏好通过npm脚本区分环境，可以直接在package.json中添加对应脚本：

1. 更新package.json的scripts

"scripts": {
  "start": "env-cmd -f ./config/.env.qa react-scripts start",
  "build:qa": "env-cmd -f ./config/.env.qa react-scripts build",
  "build:stage": "env-cmd -f ./config/.env.staging react-scripts build"
}

2. 修改Dockerfile，通过构建参数指定要运行的脚本

FROM node:16.18.0 as build
ARG BUILD_SCRIPT=build:qa
RUN node -v
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package*.json ./
RUN npm install
COPY . .
# 运行指定的构建脚本
RUN npm run $BUILD_SCRIPT
RUN ls -ltr /usr/src/app/build/

# nginx部分不变...

3. 执行构建命令

• 构建QA环境：

  docker build --build-arg BUILD_SCRIPT=build:qa -t react-app:qa .
  

• 构建Stage环境：

  docker build --build-arg BUILD_SCRIPT=build:stage -t react-app:stage .
  

注意事项 #

• React应用的环境变量是在构建阶段注入的，所以不同环境需要构建不同的镜像，无法通过启动容器时的参数切换（如果需要动态切换，得用nginx反向代理配合后端接口或者其他动态注入方式，但这不是常规静态React应用的做法）。
• 确保config/.env.qa和config/.env.staging文件已经存在于项目根目录，并且会被Docker的COPY . .指令复制到容器中。

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