Как обработать запрос на обновление страницы для любого URL-адреса SPA, созданного с использованием agularjs и размещенного с использованием S3 + Cloudfront?

Question

У меня есть SPA, построенный с использованием angularjs (версия 1.5). Я разместил это приложение на S3 Bucket. И установите CloudFront перед S3 Bucket.

Для того, чтобы сделать мое приложение дружественным к SEO, мне пришлось удалить # из URL. Я сделал это, включив режим HTML5. Итак, теперь мои URL не имеют хэша, и все работает правильно в моей размещенной среде.

Но в тот момент, когда я нажимаю обновление (F5) для любого URL (кроме index.html), я вижу

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.

Может, кто-нибудь подскажет, как обработать обновление страницы с моими текущими настройками?

С Cloudfront, я знаю, я могу перенаправить 404, чтобы сказать index.html. Но тогда любое обновление страницы будет перенаправлять пользователя на index.html. Это не желательно.

Что я хочу сделать, так это то, что когда пользователь нажимает кнопку «Обновить», я хочу перерисовать ту же страницу с обновленным содержимым.

Нужно ли выполнять URL Rewrite на S3, чтобы добиться этого? Если да, каким должно быть мое правило перезаписи URL?

Или с CloudFront есть лучший способ добиться этого?

Answer 1

Вы должны определить, что все URL в приложении должны отображать index.html, который запускает ваш SPA.

Я не уверен, как это сделать с Amazon, но с Express это просто указываетобработчик с * в качестве URL-адреса (иногда он вызывает "catch-all")