如何将GitLab环境变量传递至Docker Compose/Dockerfile构建React应用

我明白你想要把GitLab中配置的环境变量注入到React应用的构建流程里——毕竟React依赖REACT_APP_*前缀的环境变量来在构建时注入配置，这在多环境部署（dev/prod）场景下特别有用。结合你现有的配置，这里有一套完整的实现方案：

步骤1：修改Dockerfile以接收构建参数 #

首先，你需要在Dockerfile中定义**构建参数（ARG）**来接收GitLab传来的变量，然后将其转换为React可识别的环境变量（必须以REACT_APP_开头）。假设你的Dockerfile是用于构建React应用的多阶段镜像，修改后如下：

# 构建阶段
FROM node:18-alpine as builder
# 定义从外部传入的构建参数
ARG MY_VAR_FROM_GITLAB
# 将构建参数转为React能读取的环境变量
ENV REACT_APP_MY_VAR=$MY_VAR_FROM_GITLAB

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 执行构建时，React会自动注入REACT_APP_前缀的环境变量
RUN npm run build

# 部署阶段（用Nginx托管静态文件）
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

步骤2：更新Docker Compose配置传递参数 #

接下来，在docker-compose.yml的build部分添加args字段，把GitLab的环境变量映射到Dockerfile的构建参数上：

version: '3'
services:
  react-dev:
    container_name: react-dev
    build:
      context: .
      dockerfile: Dockerfile
      # 传递构建参数，${MY_VAR_FROM_GITLAB}会读取CI环境中的变量
      args:
        - MY_VAR_FROM_GITLAB=${MY_VAR_FROM_GITLAB}
    ports:
      - '3000:80'
    environment:
      - NODE_ENV=development

如果有多个变量，直接在args里追加即可，比如：

args:
  - MY_VAR_1=${MY_VAR_1}
  - MY_VAR_2=${MY_VAR_2}

步骤3：确保GitLab CI传递环境变量到Docker #

这里要注意一个坑：你在CI脚本中使用了sudo，而sudo默认不会继承当前shell的环境变量。所以需要用sudo -E来保留环境变量，或者显式将变量传递给docker-compose命令。

修改你的.gitlab-ci.yml脚本部分：

step-develop:
  stage: deploy
  only:
    - dev
  tags:
    - dev
  script:
    - echo $MY_VAR_FROM_GITLAB # 先确认变量能正常读取
    - sudo docker image prune -f
    # 使用sudo -E保留环境变量，让docker-compose能拿到GitLab的变量
    - sudo -E docker-compose -f docker-compose.yml build --no-cache
    - sudo -E docker-compose -f docker-compose.yml up -d

如果你不想用sudo -E，也可以显式传递变量：

- MY_VAR_FROM_GITLAB=$MY_VAR_FROM_GITLAB sudo docker-compose -f docker-compose.yml build --no-cache

额外：批量传递变量的小技巧 #

如果有大量环境变量需要传递，你可以在CI脚本中生成一个.env文件，然后让docker-compose读取：

script:
  # 将需要的GitLab变量写入.env文件
  - echo "MY_VAR_FROM_GITLAB=$MY_VAR_FROM_GITLAB" >> .env
  - echo "ANOTHER_VAR=$ANOTHER_VAR" >> .env
  - sudo docker-compose -f docker-compose.yml build --no-cache

然后在docker-compose.yml的build部分添加env_file：

build:
  context: .
  dockerfile: Dockerfile
  env_file: .env

不过这种方式更适合批量传递，单变量还是用args更清晰。

验证是否生效 #

构建完成后，你可以进入容器检查环境变量是否正确注入，或者直接查看React应用的静态文件（比如build/static/js/main.*.js），搜索REACT_APP_MY_VAR，应该能看到对应的值。

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