Question

在Google App Engine上部署应用程序后，每件事都像超级按钮一样工作，我可以访问所有页面，但刷新后会收到404错误

示例：在刷新https://my-app...appspot.com/create-ad时找不到404错误

我尝试过 Angular 6 routes not found on Google App Engine 和 How to configure Google App Engine yaml file to handle 404 Error 但结果相同

在我的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配置将所有网址重定向到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视为/dist目录中静态文件的路径，因此对于示例每次调用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端点提供服务。

将依次检查处理程序，如果没有调用任何上述处理程序，则任何与模式/.*（所有模式）匹配的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/\1
  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/\1
  upload: dist/browser/.*

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

- url: /((?:assets|docs)/.*|favicon\.ico)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  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/\1
  upload: dist/browser/.*

- url: /(.*\.woff)
  mime_type: application/x-font-woff
  secure: always
  redirect_http_response_code: 301
  static_files: dist/browser/\1
  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错误

2 个答案: