时间戳

首页 > 解决方案 > Cloudfront 上 Angular 应用程序的 SEO 友好路由

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

问题描述

我在 Angular 7 中有 SPA 应用程序。我也有带有 REST 服务的 Java 应用程序，部署在 ElasticBeanstalk（带有负载均衡器）上。我想使用 CloudFront 和 S3 来托管前端部分。当我使用“旧”版本的 url（带有 # 符号）时，它与 AngularJS 配合得很好。现在，当我想使用 html5 路由时，我面临着多个问题。

迄今为止最好的解决方案是将所有 404/403 请求重定向到 index.html 页面。但这对 SEO 不友好。我花了几天时间研究。我不敢相信没有好的解决方案可以解决这个问题。既然 SPA 很受欢迎，AWS 也很受欢迎，那么这些人都在做什么？这是非常常见的情况，很难相信所有 SPA 在 404 错误时都使用重定向到 index.html。

标签： angularamazon-web-servicesrestsingle-page-applicationamazon-cloudfront

解决方案

没错，从 SEO 的角度来看，如果页面不存在，它应该返回 HTTP 404 状态码。AWS CloudFront 不知道由 Angular 路由器处理的前端路由。

您可以使用一些选项来解决这个问题：

  • 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。

希望对您有所帮助，如果您发现任何其他可能的解决方案，请随时更新。

推荐阅读