angular - 当应用程序是托管在 S3 中的静态内容时路由到 Angular 组件

Question

我目前正在开发一个带有 Angular4 前端的应用程序。我的生产目标是让前端作为来自 AWS S3 存储桶的静态内容提供服务。

一切正常，但有一个异常，这实际上是应用程序的一个主要问题。当用户注册时，他们会收到一封电子邮件，其中包含用于验证其电子邮件地址的链接。链接格式如下:

https://myhostname.com/user/userguid?token=tokenvalue

由于前端是静态内容，只有页面 index.html 实际存在，所以点击这个链接会产生 404。

现在，经过一些研究，我采取了以下步骤。在 S3 中，我有以下路由规则。

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>myhostname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

我还有一个将所有 404 错误重定向到 index.html 的 CloudFront 规则。

现在，当有人导航到 myhostname.com/user/userguid?token=tokenvalue 时，URL 被重写为 myhostname.com/#!/user/userguid?token=tokenvalue，但随后用户被重定向到myhostname.com/home(又名 index.html)。

我可以对我的 Angular 应用程序进行哪些更改以获取散列/片段的值并实际路由到该组件(而不是仅仅重定向，这会将用户发送回 index.html)？

请注意，在开发过程中，当通过“npm start”为前端提供服务时，这工作得很好。谢谢大家。

Answer 1

Zack，不幸的是，您选择的方法(索引文档和错误文档都应该是“index.html”)是非常糟糕的方法。

将会发生的情况是您的用户将收到 404 然后重定向 - 这会损害您的 SEO，Chrome 会惩罚您，因为它认为您的网站是网络钓鱼，并且 Safari 支持时好时坏。

更好的选择是:

1. 移除错误页面重定向到 index.html，
2. 将 Cloudfront 放在 S3 存储桶前面
3. 在重定向到/index.html 的云端设置自定义错误响应代码，并且(最重要的是!)提供 200 Http 响应代码