Question

我们已经构建了一个Angular 6应用程序并将其部署到Google Cloud App Engine，该应用程序可以正常运行。但是，无论何时使用浏览器根目录以外的其他路径刷新浏览器，我们都会得到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提示“找不到处理程序引用的静态文件：歌曲/仪表板/所有购物者”

因此，它正在目录结构中查找静态文件，但这是Angular应用程序中的一条路由。

Answer 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

Answer 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

Answer 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>

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

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

3 个答案: