2
votes

L'actualisation de la page sur Google Cloud App Engine génère 404

Nous avons une application Angular 6 créée et déployée sur Google Cloud App Engine, qui fonctionne correctement. Cependant, chaque fois que le navigateur est actualisé avec une route autre que la racine de l'application, nous obtenons un 404.

Voici notre fichier 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

L'erreur est un 404 disant "Fichier statique référencé par le gestionnaire introuvable: chanson / tableau de bord / allshoppers"

Donc, il recherche un fichier statique dans une structure de répertoires, mais c'est une route dans notre Angular app.

google-app-engine google-cloud-platform angular

1 commentaires

MISE À JOUR: La réponse acceptée ci-dessous fonctionnerait, mais au final, nous avons résolu le problème plutôt que de déployer l'application Angular, nous avons exécuté ng-build localement, puis déployé les actifs statiques dans le cloud. (avec runtime: nodejs10 maintenant)

3 Réponses :

4
votes

Vous devrez peut-être rediriger chaque requête vers index.html pour laisser le routeur angulaire gérer tout.

- 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

3 commentaires

bonjour Désolé d'avoir demandé si tard mais cela ne fonctionne pas pour moi pouvez-vous m'aider s'il vous plaît

@DShultz À quoi votre app.yaml a-t-il fini par ressembler? J'ai le même problème.

@Kenneth Le même yaml, cependant, à la fin, plutôt que de déployer l'application Angular, nous avons exécuté ng-build localement, puis déployé les actifs statiques sur le cloud. (avec runtime: nodejs10 maintenant)

1
votes

J'ai eu le même problème et j'ai essayé la réponse ci-dessus sans succès. Après de nombreux essais et erreurs, je me suis retrouvé avec l'app.yaml ci-dessous. Celui-ci fonctionne pour ma configuration en utilisant Google Cloud Build pour déployer directement sur Google App Engine.

En prime, il redirige également les requêtes HTTP vers HTTPS et ignore les fichiers qui ne sont généralement pas nécessaires.

Je suis sûr il y a peut-être des moyens plus efficaces de le faire, mais une fois que je l'ai fait fonctionner, je n'ai plus osé le changer.

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

1 commentaires

J'ai essayé ce qui précède et cela fonctionne pour moi, mais la seule chose est que chaque actualisation est redirigée depuis la page d'accueil. Toute solution de contournement pour cela ou est-ce que je manque quelque chose ici.

0
votes

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>
Just use the url /.* to add a wildcard route to always redirect to your index.html

0 commentaires