Google Cloud App Engine 上的刷新页面抛出 404答案

【问题标题】：Refreshing page on Google Cloud App Engine throws 404Google Cloud App Engine 上的刷新页面抛出 404
【发布时间】：2019-02-11 22:08:58
【问题描述】：

我们已构建并部署到 Google Cloud App Engine 的 Angular 6 应用程序，该应用程序运行正常。但是，每当使用应用根目录以外的路由刷新浏览器时，我们都会收到 404。

这是我们的 app.yaml 文件：

runtime: nodejs8

handlers:
  - url: /
    static_files: dist/song/index.html
    upload: dist/song/index.html
    secure: always

  - url: /(.*)
    static_files: dist/song/\1
    upload: dist/song/(.*)
    secure: always

  - url: /dashboard
    static_files: dist/song/index.html
    upload: dist/song/index.html
    secure: always

错误是 404 表示“找不到处理程序引用的静态文件：song/dashboard/allshoppers”

所以，它在目录结构中寻找静态文件，但这是我们的 Angular 应用程序中的路由。

【问题讨论】：

更新：下面接受的答案会起作用，但最终我们解决了这个问题，而不是部署 Angular 应用程序，我们在本地运行 ng-build，然后将静态资产部署到云中。（运行时：nodejs10 现在）

标签： angular google-app-engine google-cloud-platform

【解决方案1】：

您可能需要将每个请求重定向到 index.html 以让 Angular 路由器处理所有内容。

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

【讨论】：

你好很抱歉这么晚才问，但它对我不起作用，你能帮我吗
@DShultz 你的 app.yaml 最终是什么样子的？我也遇到了同样的问题。
@Kenneth 相同的 yaml，但是，最终我们没有部署 Angular 应用程序，而是在本地运行 ng-build，然后将静态资产部署到云端。（运行时：nodejs10 现在）

【解决方案2】：

我遇到了同样的问题，但没有成功，尝试了上面的答案。经过大量的反复试验，我最终得到了下面的 app.yaml。这适用于我使用 Google Cloud Build 直接部署到 Google App Engine 的设置。

作为奖励，它还将 HTTP 请求重定向到 HTTPS，并跳过通常不需要的文件。

我确信可能有更有效的方法可以做到这一点，但是一旦我开始工作，我就不敢再改变它了。

app.yaml：

runtime: python27
api_version: 1
threadsafe: yes

handlers:
  - url: /(.+\.js)
    static_files: dist/project/\1
    upload: dist/project/(.+\.js)
    secure: always
    redirect_http_response_code: 301

  - url: /(.+\.css)
    static_files: dist/project/\1
    upload: dist/project/(.+\.css)
    secure: always
    redirect_http_response_code: 301

  - url: /(.+\.png)
    static_files: dist/project/\1
    upload: dist/project/(.+\.png)
    secure: always
    redirect_http_response_code: 301

  - url: /(.+\.jpg)
    static_files: dist/project/\1
    upload: dist/project/(.+\.jpg)
    secure: always
    redirect_http_response_code: 301

  - url: /(.+\.gif)
    static_files: dist/project/\1
    upload: dist/project/(.+\.gif)
    secure: always
    redirect_http_response_code: 301

  - url: /(.+\.svg)
    static_files: dist/project/\1
    upload: dist/project/(.+\.svg)
    secure: always
    redirect_http_response_code: 301

  - url: /favicon.ico
    static_files: dist/project/favicon.ico
    upload: dist/project/favicon.ico
    secure: always
    redirect_http_response_code: 301

  - url: /(.+\.json)
    static_files: dist/project/\1
    upload: dist/project/(.+\.json)
    secure: always
    redirect_http_response_code: 301

  - url: /(.+)
    static_files: dist/project/index.html
    upload: dist/project/index.html
    secure: always
    redirect_http_response_code: 301

  - url: /
    static_files: dist/project/index.html
    upload: dist/project/index.html
    secure: always
    redirect_http_response_code: 301

skip_files:
  - e2e/
  - node_modules/
  - src/
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$
  - ^LICENSE

【讨论】：

我尝试了上面的方法，它对我有用，但唯一的事情是每次刷新它都会从主页重定向。任何解决方法，或者我在这里遗漏了什么。

【解决方案3】：

service: default
runtime: python27
api_version: 1
threadsafe: true
handlers:
  - url: /.*
    static_files: <your folder>/index.html
    upload: <your folder>/index.html
  - url: /
    static_dir: <your folder>

只需使用 url /.* 添加通配符路由以始终重定向到您的 index.html

【讨论】：