Google App Engine 静态网站处理程序通配符路由

Question

我有一个使用 create-react-app 的 React.js 网站，刚刚从 Firebase 托管迁移到 Google App Engine 标准环境。

使用 Firebase 托管，我可以创建像 https://example.com/route 或 https://example.com/newRoute/123 这样的路由，Firebase 会知道为这些路由中的任何一个提供 index.html。

我想对我们应用程序的任何路由进行通配符以使用 index.html，同时排除 .js 和 .css 文件。如果我只使用通配符 /(.*) 那么对 main.js 文件的请求也会解析为 index.html。

这是我们的处理程序配置

handlers:
  - url: /
    secure: always
    application_readable: false
    static_files: build/index.html
    require_matching_file: false
    upload: build/index.html
  - url: /login
    secure: always
    application_readable: false
    static_files: build/index.html
    require_matching_file: false
    upload: build/index.html
  - url: '/(.*)'
    secure: always
    application_readable: false
    static_files: "build/\\1"
    require_matching_file: false
    upload: 'build/.*'

在当前配置中，我创建的每条路由都必须注册为处理程序。我希望找到一个解决方案，其中所有当前路线和未来路线都可以通过通配符处理。

Answer 1

处理程序的顺序很重要，第一个匹配模式的获胜。

因此，要实现您想要的，您可以先处理异常，然后再“通配”index.html。沿着这些思路（我假设.css 和.js 文件也与build 目录相关）：

handlers:

  - url: /(.*\.css)$
    secure: always
    static_files: build/\1
    upload: build/.*\.css$

  - url: /(.*\.js)$
    secure: always
    static_files: build/\1
    upload: build/.*\.js$

  # continue similarly the other static assets
  # or maybe try a more generic one covering several of them:
  - url: /(.*\.(js|css|png|jpg|svg))$
    secure: always
    static_files: build/\1
    upload: build/.*\.(js|css|png|jpg|svg)$

  # wildcard everything else, serving index.html
  - url: '/(.*)'
    secure: always
    static_files: build/index.html
    upload: build/index.html

旁注：为了便于阅读，我还删除了require_matching_file（GAE 中没有这样的东西）和application_readable（默认为 false）。