配置 Google App Engine yaml 文件以处理 404 错误

Question

在 Google App Engine 上部署我的应用程序后，一切都很顺利，我可以访问所有页面，但是当我刷新时，我收到 404 错误

示例：刷新时 https://my-app...appspot.com/create-ad 抛出 404 not found

我试过了 Angular 6 routes not found on Google App Engine 和但结果相同

这是我的 app.yml

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html
- url: /
  static_dir: dist
- url: /.*
  static_files: dist/index.html
  upload: dist/index.html

skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?

并且还尝试了此 app.yml 配置以将所有 url 重定向到 index.html

runtime: python27
api_version: 1
threadsafe: false
service: frontend-accept

handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html

- url: /
  static_dir: dist

- url: /.*
  script: main.py

skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?

这是我的main.py

import webapp2
app = webapp2.WSGIApplication()

class RedirectToHome(webapp2.RequestHandler):
    def get(self, path):
        self.redirect('/dist/index.html')


routes = [
    RedirectRoute('/<path:.*>', RedirectToHome),
]

for r in routes:
    app.router.add(r)

但是刷新页面总是404

有什么帮助吗？谢谢

Answer 1

404 HTTP 错误代码的原因是由于此处理程序：

- url: 
  static_dir: dist

如 Google App Engine official documentation 中所述，使用 static_dir: dist 会导致所有以 / 模式开头的 URL 都被视为 [= 中静态文件的路径14=] 目录，因此例如每次您调用 URL /whatever 应用程序都会查找文件 /dist/whatever，因为它不存在，您会收到 404 错误。

我相信以下代码会如您所愿地工作：

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html

- url: /dist/index.html
  static_files: dist/index.html
  upload: dist/index.html

- url: /.*
  script: main.app


skip_files:
- ^.*node_modules(/.*)?
- ^.*json_data(/.*)?
- ^.*e2e(/.*)?

/ 端点的处理程序将为 dist/index.html 文件以及 /dist/index.html 端点提供服务。

处理程序按顺序检查，如果上述处理程序中的 none 已被调用，则任何 URL 匹配模式 /.*（即所有这些）将调用 main.app 脚本（这基本上会覆盖 404 错误消息）。

此脚本会将您重定向到 /dist/index.html 端点，因此这就是需要在 yaml 文件中处理它的原因。

最后一点，我必须导入 webapp2_extras.routes 才能在 main.py.

中使用 RedirectRoute

Answer 2

最终解决方案是正确配置 app.yml

runtime: python27
api_version: 1
threadsafe: true
skip_files:
- ^(?!dist)  # Skip any files not in the dist folder

handlers:
- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/
  upload: dist/browser/.*

- url: /((?:runtime|main|polyfills|styles|vendor)\.[a-z0-9]+\.js\.map)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/
  upload: dist/browser/.*

- url: /(styles\.[a-z0-9]+\.css)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/
  upload: dist/browser/.*

- url: /((?:assets|docs)/.*|favicon\.ico)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/
  upload: dist/browser/.*

- url: /(manifest\.json|ngsw\.json|ngsw-worker\.js|safety-worker\.js|worker-basic\.min\.js|ngsw_worker\.es6\.js\.map)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/
  upload: dist/browser/.*

- url: /(.*\.woff)
  mime_type: application/x-font-woff
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/
  upload: dist/browser/.*

- url: /.*
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/index.html
  upload: dist/browser/index\.html
  http_headers:
    Strict-Transport-Security: max-age=31536000; includeSubDomains
    X-Frame-Options: DENY

配置 Google App Engine yaml 文件以处理 404 错误

Configure Google App Engine yaml file to handle 404 Error

google-app-engine

angular-routing

gcloud

angular7

app.yaml