React应用部署GAE后/login路径返回404问题求助

你的问题出在GAE handlers的匹配顺序和规则配置错误，导致静态资源无法正确加载，进而React路由无法正常工作。

问题根源 #

GAE的handlers是按从上到下的顺序匹配请求，一旦某个规则匹配成功，就会忽略后续所有规则。你原来的配置中：

handlers:
  - url: /.*
    static_files: build/index.html
    upload: build/index.html
  - url: /
    static_dir: build

第一个规则/.*会匹配所有请求（包括静态资源如/static/js/main.xxx.js、/login、/等），所有请求都返回index.html，而实际需要加载的JS/CSS等静态资源被错误返回index.html，导致React应用无法初始化，自然无法处理/login路由，表现为404或页面无法正常渲染。

正确的app.yaml配置 #

调整handlers顺序，先确保静态资源能正确映射，再用catch-all规则处理客户端路由：

runtime: nodejs12
handlers:
  # 匹配静态资源目录（比如React build后的static文件夹）
  - url: /static
    static_dir: build/static
  # 匹配根目录下的独立静态文件（如favicon.ico、manifest.json等）
  - url: /(.*\.(json|ico|png|jpg|txt))$
    static_files: build/\1
    upload: build/.*\.(json|ico|png|jpg|txt)$
  # 所有其他请求都返回index.html，交给React Router处理客户端路由
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

为什么这样有效 #

1. 优先匹配静态资源请求，确保JS、CSS、图片等文件能正确返回对应的资源，React应用可以正常加载初始化。
2. 最后用/.*规则捕获所有其他请求，返回index.html，让React Router根据URL路径渲染对应的组件（包括/login）。

额外说明 #

你不需要单独为/login配置规则，只要静态资源加载正常，React Router的BrowserRouter就能正确处理所有客户端路由。

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