Обновление страницы в Google Cloud App Engine выдает ошибку 404
У нас есть приложение 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, говорящая: «Статический файл, на который ссылается обработчик, не найден: песня/приборная панель/allshoppers».
Итак, он ищет статический файл в структуре каталогов, но это маршрут в нашем приложении Angular.
Ответы 3
Возможно, вам придется перенаправлять каждый запрос на 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 сейчас)
У меня была такая же проблема, и я безуспешно пытался ответить выше. После долгих проб и ошибок я получил app.yaml ниже. Это работает для моей настройки с использованием Google Cloud Build для прямого развертывания в Google App Engine.
В качестве бонуса он также перенаправляет HTTP-запросы на HTTPS и пропускает файлы, которые обычно не нужны.
Я уверен, что могут быть более эффективные способы сделать это, но как только я заработал, я больше не осмелился его изменить.
приложение.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
Я попробовал описанное выше, и это работает для меня, но единственное, что при каждом обновлении перенаправляется с домашней страницы. Любой обходной путь для этого или я что-то упустил здесь.
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.
ОБНОВЛЕНИЕ: Принятый ниже ответ будет работать, однако в конце концов мы решили проблему, вместо того чтобы развертывать приложение Angular, мы запустили ng-build локально, а затем развернули статические активы в облаке. (со временем выполнения: nodejs10 сейчас)