Как мне заставить мое приложение Angular, развернутое на S3, отвечать на URL-адреса маршрутизации

#angular #amazon-s3 #angular-routing

Вопрос:

У меня есть приложение Angular, которое использует маршрутизацию, созданное и развернутое в корзине S3. Все работает нормально, если я перехожу к корню URL-адреса приложения. например www.my-app.com.s3.foo.bar.amazonaws.com/

И оно отлично работает в приложении. Например, если я перейду по ссылке маршрутизатора, которая указывает на [‘ / home’], она перейдет на www.my-app.com.s3.foo.bar.amazonaws.com/home и так далее.

Но если я перейду непосредственно, скажем, www.my-app.com.s3.foo.bar.amazonaws.com/home , я получаю сообщение об ошибке S3, в котором говорится, что ресурс не существует. Это правда — в корзине S3 нет файла, соответствующего /home.

Как мне убедиться, что запросы URL-адресов перенаправляются через приложение, а не на S3?

Обновление: похоже, что CloudFront может это сделать. Что мне настроить в CloudFront?

1. S3 в основном слишком «тупой», чтобы справиться с этим. Вам нужен объект перед S3, который может обрабатывать перезаписи обратно в /index.html для вас. В прошлом я использовал работника cloudflare, чтобы сделать это за меня. Я уверен, что у AWS также есть решение для этого? Может быть, лямбды?

Ответ №1:

Вы можете настроить CloudFront для обработки страницы «не найдено» с точки зрения S3, вернув соответствующую корневую страницу вашего SPA.

Создайте свой дистрибутив CloudFront.
Перейдите на вкладку Страницы ошибок в конфигурации дистрибутива и добавьте новую страницу ошибок.
Ошибка, которую вы обрабатываете с точки зрения CloudFront, — это ошибка 404 not found, поэтому введите 404 в поле Код ошибки HTTP.
Выберите пользовательский ответ и введите местоположение корневой HTML-страницы вашего приложения (в корзине S3), например /index.html .
С точки зрения браузера это был действительный запрос и ответ, поэтому введите 200 в поле Код ответа HTTP.