Gitlab CI Runner部署React应用时Docker Compose环境变量配置问题

嘿，我完全懂你的困扰——不想把.env文件推到仓库，但docker-compose一直找不到它；GitLab里配置的环境变量明明能在CI脚本里echo出来，就是没法在后续的docker-compose流程里用上。咱们一步步拆解解决：

核心问题梳理 #

先把关键逻辑理清楚：

1. 你之前的docker-compose.yml里写了env_file: .env，它默认会去仓库里找这个文件，你没推送自然会报错；
2. React的REACT_APP_*系列环境变量是在构建阶段注入到静态文件的，不是容器运行时才读取的——所以光在docker-compose里写environment字段根本没用，必须确保构建镜像的过程能拿到这些变量。

具体解决方案 #

1. 在CI脚本中动态生成临时.env文件 #

既然不想把.env推仓库，那咱们就每次CI运行时临时生成一个，把GitLab里配置的环境变量写进去。修改你的gitlab-ci.yml的script部分：

step-develop:
  stage: deploy
  only:
    - dev
  tags:
    - dev
  script:
    # 生成临时.env文件，将GitLab环境变量写入
    - echo "REACT_APP_BASE_PAGE_URL=$REACT_APP_BASE_PAGE_URL" > .env
    - echo "REACT_APP_CMS_URL=$REACT_APP_CMS_URL" >> .env
    - echo "NODE_ENV=development" >> .env
    # 可选：验证变量是否正确写入
    - cat .env
    - sudo docker image prune -f
    - sudo docker-compose -f docker-compose.yml build --no-cache
    - sudo docker-compose -f docker-compose.yml up -d

这个临时文件只会在CI运行时存在，不会被提交到仓库，完美解决你不想暴露.env的问题。

2. 确保React构建时能获取到环境变量 #

因为React的环境变量是在构建时注入的，所以你的Dockerfile必须在构建步骤中能访问到这些变量，这里给你两种可靠的方法：

方法A：用docker-compose传递构建参数（推荐）

先修改docker-compose.yml，在build部分添加args，把环境变量作为构建参数传递给Dockerfile：

version: '3'
services:
  react-dev:
    container_name: react-dev
    build:
      context: .
      dockerfile: Dockerfile
      # 传递构建参数
      args:
        - REACT_APP_BASE_PAGE_URL=${REACT_APP_BASE_PAGE_URL}
        - REACT_APP_CMS_URL=${REACT_APP_CMS_URL}
        - NODE_ENV=development
    ports:
      - '3000:80'
    # 注释掉原来的env_file也可以，临时生成的文件已经能被读取；容器运行时的environment对React没用，可以删掉
    # env_file:
    #   - .env
    # environment:
    #   - NODE_ENV=development
    #   - REACT_APP_BASE_PAGE_URL=${REACT_APP_BASE_PAGE_URL}
    #   - REACT_APP_CMS_URL=${REACT_APP_CMS_URL}

然后修改你的Dockerfile，在构建阶段接收这些参数并设置为环境变量，确保npm run build时能读取到：

# 构建阶段
FROM node:18-alpine as build
# 接收从docker-compose传递的构建参数
ARG REACT_APP_BASE_PAGE_URL
ARG REACT_APP_CMS_URL
ARG NODE_ENV
# 设置环境变量，让构建过程能读取到
ENV REACT_APP_BASE_PAGE_URL=$REACT_APP_BASE_PAGE_URL
ENV REACT_APP_CMS_URL=$REACT_APP_CMS_URL
ENV NODE_ENV=$NODE_ENV

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

方法B：直接继承CI环境变量

因为CI脚本里已经有这些环境变量了，docker-compose执行build时会自动继承CI的环境变量，所以只要你的Dockerfile在构建时能读取到这些变量，就不需要额外传递args。不过方法A更清晰，能明确看到哪些变量被用于构建，推荐优先用A。

3. 验证效果 #

提交修改后的配置到dev分支，触发CI流水线：

1. 查看日志里的cat .env输出，确认变量值正确；
2. 确认docker-compose build过程没有报错；
3. 部署完成后，打开浏览器控制台，输入process.env.REACT_APP_BASE_PAGE_URL，检查是否能正确显示你配置的变量值。

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