SEO-ориентированная маршрутизация приложения Angular на Cloudfront

Question

У меня есть приложение SPA в Angular 7. У меня также есть приложение Java со службами REST, развернутое на ElasticBeanstalk (с loadbalancer). Я хочу использовать CloudFront и S3 для размещения части интерфейса. Это хорошо работало с AngularJS, когда я использовал «старую» версию URL (со знаком #). Теперь, когда я хочу использовать html5 маршрутизацию, я сталкиваюсь с несколькими проблемами.

На сегодняшний день лучшее решение - перенаправить все запросы 404/403 на страницу index.html. Но это не подходит для SEO. Я провел пару дней на исследованиях. И я не могу поверить, что нет хорошего решения, чтобы решить это. Поскольку SPA очень популярны, а AWS очень популярны, чем занимаются все эти люди? Это очень распространенный сценарий, и трудно поверить, что все SPA используют перенаправление на index.html при ошибке 404.

Answer 1

Вы правы, с точки зрения SEO, если страница не существует, она должна вернуть код состояния HTTP 404.AWS CloudFront не знает о ваших маршрутах переднего плана, которые обрабатываются угловым маршрутизатором.

Это можно решить с помощью некоторых параметров:

• AWS Lambda : Вы можете написать собственную лямбда-функцию aws, которая проверит все входящие запросы и изменит код статуса ответа (404), если URL-адрес не существует.Но aws lambda необходимо знать, каковы маршруты вашего веб-сайта (например, вы можете создать файл json со всеми маршрутами и загрузить его в функцию lambda во время сборки / развертывания и т. Д.).Я использовал эту функцию, и она работала как шарм, но это кажется сложной работой, чтобы выполнить простую задачу.Вам нужно прочитать и понять события Lambda @ Edge, чтобы знать, как использовать каждое из них.Лямбда-функции действительно мощные, но, по моему опыту, они не очень быстро развертываются и применяются ко всем границам распространения каждый раз.

• AWS Amplify : AWSсоздал этот новый сервис для размещения одностраничных приложений.( имеет много возможностей по сравнению с CloudFront, а также использует cloudfront ). В AWS Amplify вы можете установить правила перенаправления и изменить код состояния ответов.Вы можете создать скрипт, который будет читать все маршруты из вашего внешнего приложения и устанавливать все перенаправления на 404 маршрута для усиления AWS во время сборки / развертывания.(Вы можете искать, если уже существует какая-либо библиотека, чтобы помочь в этом).

• Вы можете найти некоторые библиотеки, которые помогут вам прочитать все маршруты с вашего сайта и отправить их вашему облачному провайдеру.Некоторые облачные сервисы как netlify уже справляются с этим для вас.Например, если вы развернете сайт реакции Гэтсби для netlify, они прочитают все наши внешние интерфейсы и вернут код состояния HTTP 404, если ваша страница не существует.

• Задача состоит в том, чтобы : как вы можете дать своему хостинговому сервису (AWS Cloudfront, усиление) знать все существующие маршруты из вашего клиентского приложения и на основе этого возвращать404, если страница не существует, избегая всегда возвращать 200.

Надеюсь, это поможет, пожалуйста, держите нас в курсе, если вы найдете какие-либо другие возможные решения.