当应用程序是托管在 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>

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

现在，当有人导航到 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 响应代码

希望有帮助

Answer 2

这是最终的解决方案。埃德蒙多的主要道具。

设置 S3 存储桶时，在 Static Website Hosting-->Properties 下，Index 文档和 Error 文档都应为“index.html”。 确保重定向规则为空白！

在 CloudFlare 中，启用分发并在线后，转到错误页面并创建自定义错误响应。对于任何 404 错误，重定向到 /index.html 并返回 200 OK 状态码。

这就像一个魅力！

Answer 3

我所要做的就是在控制台的静态网站托管块中将错误文档设置为 index.html

Answer 4

您需要为 BOTH 404 和 403 错误创建 CloudFront 自定义错误响应设置。

我有一个完整的 blog post 以及其他 AWS 角度设置技巧（如免费 HTTPS）。

Answer 5

您不必将前缀替换为#!，除非您使用的是LocationHashStrategy，我发现这不是您的情况。所以删除：

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

它应该可以工作。