GCP部署React+Gatsby静态应用的handler配置与直链访问问题

问题根因 #

你遇到的是React这类单页应用（SPA）部署在静态服务器上的典型客户端路由适配问题：

• React的路由逻辑在前端执行，服务器上不存在/vacancies这类路径对应的实际静态目录和html文件
• 你原有配置的第三条规则会直接把捕获到的路径拼接到public/后再追加/index.html，如果路径末尾带/就会出现日志里的双斜杠拼接错误，自然找不到对应文件

修复方案 #

直接替换你的app.yaml中handlers段为以下配置即可：

handlers:
  # 优先匹配所有带扩展名的静态资源（js、css、图片、字体等）
  - url: /(.*\..+)$
    static_files: public/\1
    upload: public/.*\..+$

  # 其余所有请求统一返回根目录index.html，交给React前端路由处理
  - url: /.*
    static_files: public/index.html
    upload: public/index.html

配置说明 #

• 静态资源请求会被第一条规则精准匹配，直接返回对应文件，不会影响加载性能
• 所有路由路径请求无论层级，都会返回根目录的index.html，React加载完成后会自动根据当前URL渲染对应页面，直接访问路径、站内跳转都能正常运行，无需手动在路径后加index.html

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