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

Question

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

使用 Firebase 托管，我可以创建类似 https://example.com/route or 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

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

因此，为了实现您想要的效果，您可以在 "wildcarding" index.html 之前先处理异常。沿着这些线的东西（我假设 .css 和 .js 文件也相对于 build 目录）：

handlers:

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

  - url: /(.*\.js)$
    secure: always
    static_files: build/
    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/
    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）。

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

Google App Engine Static Website Handler Wildcard Routes

google-app-engine

app.yaml