GitLab Pages CI：如何从子目录部署React应用？

你的仓库结构中React应用位于frontend子目录，只需调整GitLab CI配置的路径和执行顺序即可完成部署，修改后的完整gitlab-ci.yml如下：

image: node

pages:
  stage: deploy
  cache:
    paths:
      - frontend/node_modules/
  script:
    - cd frontend
    - npm install
    - npm run build
    - cd ..
    - rm -rf public
    - cp frontend/build/index.html frontend/build/404.html
    - mv frontend/build public
  artifacts:
    paths:
      - public
  only:
    - master

关键修改说明： #

• 缓存路径调整：将缓存的node_modules/改为frontend/node_modules/，确保CI能复用子目录下的依赖包，加快构建速度
• 切换工作目录：脚本开头用cd frontend进入React项目所在子目录，执行依赖安装和构建命令
• 构建产物迁移：构建完成后回到仓库根目录，将子目录下的build文件夹（React默认构建输出目录）处理后，移动到根目录的public文件夹——GitLab Pages要求部署产物必须放在根目录的public目录下作为artifacts输出

如果你的React项目自定义了构建输出目录（比如在package.json中修改了build脚本的输出路径），只需将配置中frontend/build替换为对应的自定义路径即可。

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