部署在 Amazon s3 上的 Angular 2 应用程序出现 404 错误

Posted 2023-02-22

【中文标题】部署在 Amazon s3 上的 Angular 2 应用程序出现 404 错误

【英文标题】：Angular 2 application deployed on Amazon s3 gives 404 error

【发布时间】：2017-06-20 11:06:55

【问题描述】：

我已成功在 Amazon S3 上部署了我的 Angular2 应用程序。它工作正常。当我使用 routeLinks/code 导航时，所有路由都可以正常工作。

但是当我刷新页面，或者跳转到特定路由时，我得到如下 404 错误。

问题是，我们知道在 Angular2 中有动态路由。在 S3 存储桶中部署/存储的最终代码库中没有具有该路径/路由名称的物理目录。但是，我认为 S3 认为它是存储在 S3 存储桶中的物理对象，它无法获取。

如何解决这个问题？

【问题讨论】：

S3 Static Website Hosting Route All Paths to Index.html的可能重复

当您刷新页面时，动态客户端路由作为请求发送到服务器，显然 S3 不知道如何提供服务，因为该路由应该只是客户端而不是服务器上存在的实际文件。您必须设置后端以将所有这些动态路由重定向到您的主要 SPA 入口点。如果您从 HTML5 URL 切换到哈希样式 URL，问题应该会消失 angular.io/docs/ts/latest/guide/…

【参考方案1】：

我们遇到了同样的问题。只需转到属性 > 静态网站托管。

在字段错误文档中，添加index.html，如here。

【讨论】：

这不是正确的方法。它将返回 index.html 作为错误响应的主体，仍然给出 404 错误。查看***.com/a/16877231/8054643 或***.com/a/35673266/8054643 进行正确处理。

@Oorja 就我而言，有趣的是，将 index.html 放在错误 url 中确实解决了路由问题。我虽然它会像你提到的那样返回 index.html，但事实并非如此。我根本不需要处理额外的配置，例如 CloudFront。

【参考方案2】：

如果您使用 AWS cli 将 dist 文件夹复制到您的存储桶，那么它会将项目文件夹复制到您的存储桶，其中包含您的文件，包括 index.html。

尝试将dist/< your_project>/ 的内容直接上传到您的存储桶。 它对我有用。

我认为 S3 在其根级别需要一个 index.html 文件