Google Cloud PHP静态服务器React BrowserRouter刷新404的app.yaml配置方法

嘿，这个问题我之前帮不少开发者搞定过！你遇到的404情况，根源在于React的BrowserRouter用了HTML5 History模式——当你刷新app内的页面时，服务器会尝试去寻找对应路径的物理文件，但这些路由路径都是前端虚拟出来的，根本不存在实际文件，所以服务器就返回404了。

下面是修改后的app.yaml配置，既能正常访问根目录的着陆页，又能解决React路由刷新404的问题：

runtime: php82
env: standard

handlers:
  # 优先处理根目录的静态资源（着陆页的CSS、图片、图标等）
  - url: /(.*\.(html|css|png|jpg|jpeg|gif|ico|svg))$
    static_files: public/\1
    upload: public/(.*\.(html|css|png|jpg|jpeg|gif|ico|svg))$
    secure: always

  # 处理根目录的着陆页本身
  - url: /$
    static_files: public/index.html
    upload: public/index.html
    secure: always

  # 处理React App的前端路由：所有app下的路径，若没有对应物理文件则指向app的index.html
  - url: /app/(.*)
    static_files: public/app/index.html
    upload: public/app/index.html
    secure: always
    redirect_http_response_code: 200

配置说明： #

• 前两个handler：专门处理根目录的着陆页及其静态资源，确保用户访问根域名时能正常加载着陆页，相关的CSS、图片也能正确读取。
• 第三个handler：这是解决问题的核心——所有指向/app/下的请求，如果服务器找不到对应的物理文件（也就是前端路由的路径），就会返回public/app/index.html，让React的前端路由来接管页面渲染。redirect_http_response_code: 200很重要，它会让服务器返回200状态码而不是重定向（3xx），既保证前端路由正常工作，也对SEO更友好。

额外注意： #

如果你的React打包后，静态资源（比如js、css文件）放在app/static/这类子目录里，记得在第三个handler前面加一个专门处理这些实际存在的静态资源的规则，避免这些资源被错误重定向：

# 处理React App的静态资源文件（比如js、css）
  - url: /app/static/(.*)
    static_files: public/app/static/\1
    upload: public/app/static/(.*)
    secure: always

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