Angular 10 + AWS S3 + Cloudfront：没有哈希的导航答案

【问题标题】：Angular 10 + AWS S3 + Cloudfront: navigation without a hashAngular 10 + AWS S3 + Cloudfront：没有哈希的导航
【发布时间】：2021-12-06 21:48:21
【问题描述】：

我在这里看到了很多解决这个问题的问题，但是使用 apache 服务器，对于我的应用程序，我使用 AWS S3 和 Cloudfront，我需要应用程序在 URL 上没有丑陋的哈希值的情况下工作。

有没有什么方法可以在不使用哈希的情况下直接刷新或点击链接？

如果需要代码的任何部分，我可以包含它，但我认为没有必要，因为没有任何问题，我只需要一个可行的策略。

问候。

我的应用路由模块

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true })
  ],
  exports: [
    RouterModule
  ]
})

删除哈希 true 可用于导航，但不适用于页面刷新或直接链接

【问题讨论】：

你检查过stackoverflow.com/questions/54611652/…吗？
I need the application to work without the ugly hash 为什么？你想达到什么目标？
嗯，产品管理人员认为哈希不友好，对他们不起作用。我可以忍受它，但我没有悲伤地提出要求。
检查 404 的配置。它应该返回 index.html stackoverflow.com/questions/43101013/…

标签： angular amazon-web-services amazon-s3 single-page-application amazon-cloudfront

【解决方案1】：

在编写解决方案之前，让我简要说明需要做什么。通常，单页应用程序 (SPA) 中的页面导航是通过 javascript 代码操作视图和/或监视 url 和导航历史事件来实现的。当您启动应用程序并单击不同的链接时，例如/user，应用程序不会重新加载，它仍然是通过根index.html 加载的同一个应用程序，通过更改到相应的视图或组件并修改地址栏中的网址。

但是，如果您在打开浏览器后直接导航到 example.com/user（没有初始加载根 example.com），浏览器将向 /user 路径发送请求，该路径实际上既不存在也不存在于 S3 存储桶中，在云端分发中都没有，尽管它会失败。我们的目标是强制 S3 和 Cloudfront 始终返回根 index.html 文件，而与请求的原始路径无关。

为了实现这一点，您需要稍微更改 S3 存储桶和 Cloudfront 分发的配置。

在进行 AWS 相关更改之前，将 RouterModule 导入的 useHash 属性更改为 false：

RouterModule.forRoot(routes, { useHash: false })

在 AWS Web 控制台中打开您的 S3 存储桶，转到“属性”选项卡，找到“静态网站托管”部分，如果它被禁用，则启用它并将index.html 放入两个字段：索引文档和错误文档。

然后保存配置。实际上，现在您的 index.html 文件将为与根路径相同的任何路径提供服务。您应该已经注意到，当您在应用上述更改后打开您的网站时。但是，您会注意到响应代码是 404，尽管应用程序正确打开 - 这是因为它仍然是“未找到”响应，因为路径不存在。云端配置也需要进行一些更改，以使其工作得更好。

在 aws Web 控制台中导航到云端分发页面。我假设由于您已经拥有云端分发（您在问题中提到过），那么您可能已经拥有所有默认设置，并且您的 S3 存储桶已作为此分发的来源连接。导航到“错误页面”选项卡，然后按“创建新的自定义错误响应”。在“自定义”输入中点击“是”，选择错误代码404，在“响应页面路径”输入中写入“/index.html”并选择响应代码200OK。然后保存配置。开始工作可能需要几分钟时间。

现在尝试打开网站 - 您应该不会再看到 404 响应，因为现在所有请求（甚至不存在的路径）都有代码 200。

【讨论】：

感谢您的精彩解释，我一步一步完成了您的步骤，现在我的网址可以在没有哈希的情况下使用。

【解决方案2】：

移除哈希策略，

RouterModule.forRoot(routes, {
  useHash: false
});

转到您存储桶的静态网站托管设置并将错误文档设置为 index.html。

基本上，我们只想在所有情况下都提供 index.html，因为这是在所有情况下都必须提供的文件，因为 Angular 构建没有像静态网站这样的路由的文件夹结构。

现在您的路线将如下所示：

localhost:4200/home

代替：

localhost:4200/#/home

来自 AWS 的参考：https://docs.aws.amazon.com/AmazonS3/latest/userguide/CustomErrorDocSupport.html#custom-error-document

【讨论】：