如何在GitLab CI中正确为Docker镜像打标签并构建多环境React镜像

核心思路：构建时注入环境变量区分不同环境API地址 #

React 是前端静态项目，不同环境的 API 地址差异推荐在镜像构建阶段通过参数注入的方式实现，无需修改业务代码逻辑，也符合前端工程化的通用实践。

具体实现步骤 #

1. 修改业务代码中的API地址定义 #

将写死的常量改为读取构建环境变量，以 Create React App 为例：

// 原写法：const url = "api-XXXX.com"
// 改为：
const url = process.env.REACT_APP_API_URL

如果用 Vite 构建，环境变量前缀改为 VITE_ 即可，如 process.env.VITE_API_URL。

2. 修改Dockerfile增加构建参数接收 #

在你的项目 Dockerfile 中增加 ARG 声明，将构建参数传递给前端构建工具的环境变量：

# 仅需在构建阶段增加以下配置
ARG API_URL
# CRA 要求环境变量以 REACT_APP_ 开头
ENV REACT_APP_API_URL=$API_URL
# 执行原有的前端构建命令
RUN npm run build

3. 拆分CI构建任务，分别打不同标签的镜像 #

修改你现有的 .gitlab-ci.yml，将原来的单个构建任务拆分为 dev/prod 两个独立构建任务，分别注入对应环境的API地址，打对应标签上传到镜像仓库：

stages:
  - docker-build
  - deploy
  - deploy-prod

# 公共配置锚点，减少重复代码
.docker-build-template: &docker-build-template
  stage: docker-build
  image: docker:latest
  services:
    - name: docker:19.03.8-dind
  before_script:
    - docker login -u $REGISTRY_USER -p $REGISTRY_PASSWORD https://XXXXX.com
  after_script:
    - docker logout
    - docker image prune -f
  tags:
    - build

# 开发环境镜像构建：自动触发
docker-build-dev:
  <<: *docker-build-template
  script:
    - docker build --build-arg API_URL=https://你的开发环境API地址 -t XXXXX.com/myapp:dev .
    - docker push XXXXX.com/myapp:dev
    - docker rmi XXXXX.com/myapp:dev

# 生产环境镜像构建：手动触发，和生产部署逻辑对齐
docker-build-prod:
  <<: *docker-build-template
  script:
    - docker build --build-arg API_URL=https://你的生产环境API地址 -t XXXXX.com/myapp:prod .
    - docker push XXXXX.com/myapp:prod
    - docker rmi XXXXX.com/myapp:prod
  when: manual

# 原有的deploy、deploy-prd1、deploy-prd2任务无需修改，你的docker-compose配置已经对应了不同标签的镜像

额外优化建议 #

1. 不要在CI配置中明文写镜像仓库的账号密码，进入GitLab项目的「设置」-「CI/CD」-「变量」页面，添加 REGISTRY_USER 和 REGISTRY_PASSWORD 两个变量，勾选「掩码变量」选项，避免敏感信息泄露。
2. 如果你需要实现一个镜像通用多环境的需求，也可以采用运行时替换的方案：将业务代码中的API地址写为占位符，容器启动时通过entrypoint脚本用sed命令替换占位符为当前环境的API地址，这种方案不需要构建两次镜像，但需要额外处理静态资源缓存的问题。

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