为不同分支部署GitLab Pages：React应用多URL配置问询

没问题，我帮你梳理下怎么调整配置，实现master和develop分支对应不同的访问地址，分两种常见实用场景来说：

场景1：Develop分支部署到自定义子域名（比如dev.my-react-app.com） #

这种方式适合给开发环境单独分配一个子域名，和生产环境（master）的主域名完全区分开，更符合团队开发的环境隔离需求。

步骤1：修改.gitlab-ci.yml配置 #

你需要在原有配置基础上，新增一个针对develop分支的部署任务，同时给不同分支绑定对应的环境信息：

image: node:alpine

# 缓存node_modules，加速后续构建
cache:
  paths:
    - client/node_modules

stages:
  - deploy

# Master分支：部署到生产环境（my-react-app.com）
pages:
  stage: deploy
  script:
    - cd client
    - npm install # 安装项目依赖
    - npm run build --prod # 执行生产环境构建
    - cp public/index.html public/404.html # 适配SPA路由刷新问题
    - mv public _public # 规避CRA和GitLab Pages的public目录命名冲突
    - mv build ../public # 将构建产物移到GitLab Pages要求的根目录
  artifacts:
    paths:
      - public
  only:
    - master
  environment:
    name: production
    url: https://my-react-app.com # 生产环境访问地址

# Develop分支：部署到开发子域名（dev.my-react-app.com）
pages-dev:
  stage: deploy
  script:
    - cd client
    - npm install
    - # 子域名部署时，PUBLIC_URL保持根路径即可
    - export PUBLIC_URL=/
    - npm run build --prod
    - cp public/index.html public/404.html
    - mv public _public
    - mv build ../public
  artifacts:
    paths:
      - public
  only:
    - develop
  environment:
    name: development
    url: https://dev.my-react-app.com # 开发环境子域名

步骤2：配置自定义子域名 #

1. 打开你的GitLab项目，进入Settings > Pages页面
2. 点击New domain，输入dev.my-react-app.com
3. 按照页面提示配置DNS记录（通常是添加一条CNAME记录，指向<你的项目名称>.gitlab.io）
4. 等待GitLab验证域名有效性，验证通过后就能正常访问开发环境了

场景2：Develop分支部署到主域名的子路径（比如my-react-app.com/dev） #

如果不想额外配置DNS和子域名，也可以把开发版本部署到主域名的子路径下，这种方式更轻量化：

修改.gitlab-ci.yml的develop分支任务 #

保留master分支的pages任务不变，只调整develop分支的部署逻辑：

# ... 保留master分支的pages任务代码 ...

# Develop分支：部署到主域名的/dev子路径
pages-dev:
  stage: deploy
  script:
    - cd client
    - npm install
    - # 子路径部署必须设置PUBLIC_URL为对应子路径，否则React资源会加载失败
    - export PUBLIC_URL=/dev
    - npm run build --prod
    - cp public/index.html public/404.html
    - mkdir -p ../public/dev # 创建子路径目录
    - mv build/* ../public/dev/ # 将构建产物放到子路径下
  artifacts:
    paths:
      - public
  only:
    - develop
  environment:
    name: development
    url: https://my-react-app.com/dev # 子路径访问地址

这种方式不需要额外配置DNS，部署完成后直接通过my-react-app.com/dev就能访问开发版本。

关键注意点 #

• 如果你用的是React的BrowserRouter，CRA会自动根据PUBLIC_URL设置路由的basename，不需要手动修改路由配置
• 确保GitLab项目的Pages功能已开启，且分支权限配置正确（develop分支能触发CI/CD任务）

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