React应用部署GitLab Pages遇异常：404错误及无访问URL生成

我来帮你排查下问题根源，其实核心原因是GitLab Pages有个硬性规则：必须把静态部署文件放在根目录的public文件夹下。你的配置里把文件移到了public2，这就导致CI流程找不到可部署的内容，自然不会生成访问URL；就算之前有残留文件，也会因为路径不匹配出现404错误。

第一步：修正gitlab-ci.yml配置 #

你的配置里的mkdir public2和mv public/* public2完全没必要，反而破坏了GitLab Pages的部署逻辑。另外，多数React项目执行npm run build后，产物默认存在build目录而非public（除非你自定义了输出路径），所以正确的配置应该是这样：

image: node:latest
pages:
  script:
    - npm install
    - npm run build
    # 清理旧的public目录，把React构建产物移到GitLab要求的位置
    - rm -rf public
    - mv build public
  artifacts:
    paths:
      - public  # 必须指向这个目录，GitLab才会识别并触发部署
  only:
    - master
  stage: deploy

第二步：解决React路由导致的404问题 #

如果修正配置后仍出现404，大概率是React客户端路由（比如用了React Router）导致的。因为GitLab Pages是静态托管服务，直接访问子路由会被服务器拦截返回404，这时候需要添加一个public/_redirects文件，内容如下：

/*    /index.html   200

这个文件会告诉GitLab Pages把所有路由请求都指向index.html，让React的客户端路由来处理页面跳转。

第三步：验证CI流程 #

提交修正后的配置和_redirects文件到master分支，触发CI流水线：

• 等待流水线执行完成后，去项目的Settings > Pages页面，就能看到生成的访问URL了
• 如果还是没出现URL，检查流水线是否成功执行，有没有报错（比如npm install失败、build失败，或者移动文件的命令出错）

内容的提问来源于stack exchange，提问作者ソフトウェア開発者