Google App Engine部署React应用：实现无.html后缀的干净路由

我完全懂你现在的困扰——静态构建后生成了重复的.html文件和目录下的index.html，但GAE默认不会自动把无后缀路径映射到这些文件，导致必须加后缀才能访问页面。下面是针对你的情况的具体解决方案：

问题分析 #

你的app.yaml里的/docs/(.*) handler配置逻辑不对，而且缺少了无后缀路径到index.html或.html文件的映射规则。另外还发现你/js/(.*)的handler里有个笔误：static_files写的是build/my_docs/s/\1，应该是build/my_docs/js/\1，先把这个小错误修正掉。

修正后的app.yaml配置 #

注意GAE的handler是按从上到下匹配的，越具体的规则要放在越前面，调整后的完整配置如下：

runtime: python3
service: docs
handlers:
# 处理根路径访问
- url: /
  secure: always
  redirect_http_response_code: 301
  static_files: build/my_docs/index.html
  upload: build/my_docs/index.html

# 优先匹配/docs下的目录路由（支持带/或不带/的路径，比如/docs/page1或/docs/page1/）
- url: /docs/(.*)/?$
  secure: always
  static_files: build/my_docs/docs/\1/index.html
  upload: build/my_docs/docs/(.*)/index.html

# 匹配/docs下的单文件路由，映射到对应的.html文件
- url: /docs/(.*)
  secure: always
  static_files: build/my_docs/docs/\1.html
  upload: build/my_docs/docs/(.*).html

# 静态资源路由：CSS文件
- url: /css/(.*)
  static_files: build/my_docs/css/\1
  upload: build/my_docs/css/(.*)
  secure: always

# 静态资源路由：图片文件
- url: /img/(.*)
  static_files: build/my_docs/img/\1
  upload: build/my_docs/img/(.*)
  secure: always

# 静态资源路由：JS文件（修正了之前的路径笔误）
- url: /js/(.*)
  static_files: build/my_docs/js/\1
  upload: build/my_docs/js/(.*)
  secure: always

# 处理其他特殊静态文件（json/ico/xml等）
- url: /(.*\.(json|ico|xml))$
  secure: always
  static_files: build/my_docs/\1
  upload: build/my_docs/.*\.(json|ico|xml)$

配置说明 #

1. /docs/(.*)/?$规则：优先处理带或不带末尾斜杠的路径，直接映射到对应目录下的index.html——这正好对应React/Docusaurus构建时生成的目录结构。
2. /docs/(.*)规则：如果上面的规则没匹配到（比如不存在对应的index.html），就自动映射到同名的.html文件，覆盖所有单页面的无后缀访问需求。
3. 静态资源规则：确保css、img、js等资源能正常加载，同时修正了你之前的JS路径错误。
4. 全局secure: always：统一强制HTTPS访问，避免混合内容加载失败的问题。

验证方法 #

把修改后的app.yaml部署到GAE后，直接访问mywebsite.com/docs/page1，应该能自动加载对应的page1/index.html或page1.html，完全不需要添加任何后缀。这个方案同样适用于Docusaurus项目，因为它的静态构建输出结构和你描述的完全一致。

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