Cloudfront上Angular应用程序的SEO友好路由

我在7号房间做水疗。我还有一个带有REST服务的Java应用程序，部署在ElasticBeanstalk（带有loadbalancer）上。我想使用CloudFront和S3来托管前端部分。当我使用“旧”版本的URL（带有#符号）时，AngularJS工作得很好。现在，当我想使用html5路由时，我面临着多个问题

到目前为止，最好的解决方案是将所有404/403请求重定向到index.html页面。但这对搜索引擎优化并不友好。

---

我花了几天时间进行研究。我不能相信没有解决这个问题的好办法。既然SPA很受欢迎AWS也很受欢迎这些人都做什么？这是一种非常常见的情况，很难相信所有SPA用户都会在404错误时重定向到index.html。

您是对的，从SEO的角度来看，如果页面不存在，它应该返回HTTP 404状态代码。AWS CloudFront不知道由angular router处理的前端路由

您可以使用以下选项解决此问题：

• AWS Lambda：您可以编写一个自定义AWS Lambda函数，该函数将检查所有传入请求，并在URL不存在时更改响应状态代码（404）。但是aws lambda需要知道您网站的路由是什么（例如，您可以创建包含所有路由的json文件，并在构建/部署时将其上载到lambda函数，等等）。我使用过这个功能，它工作起来很有魅力，但是做一个简单的任务听起来很复杂。你需要阅读和理解Lambda@Edge事件，以了解如何使用它们中的每一个。Lambda函数非常强大，但根据我的经验，它们在每次部署和应用到所有分发边缘时并不是很快

• AWS Amplify：AWS创建了这个新服务来承载单页应用程序。（与CloudFront相比，它有很多功能，也使用CloudFront）在AWS Amplify中，您可以设置重定向规则并更改响应状态代码。您可以创建一个脚本，从前端应用程序读取所有路由，并在构建/部署时将所有重定向设置为aws amplify上的404路由。（如果已经存在任何库，您可以进行搜索，以提供帮助）

• 您可能会找到一些库来帮助您读取网站上的所有路由并将其发送给云提供商。一些云服务如netlify已经为您处理了这一问题。例如，如果您将gatsby react站点部署到netlify，他们将读取我们的所有前端路由，如果您的页面不存在，他们将返回HTTP状态代码404

• 挑战在于：如何让您的托管服务（aws cloudfront，amplify）知道前端应用程序中存在的所有路由，并在此基础上，如果页面不存在，返回404，避免总是返回200

---

希望能有所帮助，如果您找到任何其他可能的解决方案，请随时与我们联系。

谢谢您的回答。从他们的描述中放大声音。我这周要看一看。