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