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

Question

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

With Firebase Hosting, I could create routes like https://example.com/route or https://example.com/newRoute/123 and Firebase would know to serve the index.html for any of these routes.

我想通配我们应用程序的任何路由以使用 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）。

Answer 2

丹的回答仍然有效。 我必须实现的唯一补充是第三个处理程序中的 fonts 扩展。 作为仅供参考，我将此配置用于 Vue 3 应用程序和默认构建设置。

最终 app.yaml 对我来说：

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|woff|woff2|ttf))$
    secure: always
    static_files: dist/\1
    upload: dist/.*\.(js|css|png|jpg|svg|woff|woff2|ttf)$

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