如何使用亚马逊 s3 提供 Angular 2

Posted 2023-02-22

【中文标题】如何使用亚马逊 s3 提供 Angular 2

【英文标题】：How to serve angular 2 using amazon s3

【发布时间】：2016-11-20 20:29:13

【问题描述】：

是否可以在不使用专用服务器的情况下使用 amazon s3 来提供 angular 2 应用程序。如果是，如何进行？

【参考方案1】：

不，在没有专用服务器的情况下，无法使用 amazon s3 运行 angular2。根据Angular2 Docs，您至少需要很少的服务器来运行这些文件。您可以做的是在 E3 或 ESB 上运行 NodeJs 服务器，并在那里部署您的 angular2 应用程序。

感谢@Gunter 指出 - 如果没有额外的命令行参数，这是无法完成的。

【讨论】：

难道angular2是用JS而不是typescript写的，这样就不需要反编译了。

S3 是“至少是一个小服务器”。由于浏览器安全限制（至少没有附加命令行参数），您不能做的是从本地磁盘的file:///... url 加载它。您可能需要启用HashLocationStrategy，因为默认的PathLocationStrategy 需要服务器支持。

感谢您的澄清@GünterZöchbauer

更正应该是“（至少没有out额外的命令行参数）。”

这个答案在早期阶段是有效的，但使用 aot 不再正确。

【参考方案2】：

这是可能的。但是你应该使用webpack。

配置应用以使用 webpack 后，您可以 npm run build 并将处理后的文件上传到 S3 as a static website。

【讨论】：

已确认。我通过克隆this git repo、使用npm run build 并将/dist 的内容上传到已经设置好的aws s3 网站存储桶来快速启动并运行它。谢谢乔乔。

此外，您需要确保为 index.html 以外的 url（例如 example.com/items）寻址路由，因为这些需要重定向到 index.html 以允许 angular 路由他们 - 见***.com/questions/16267339/…

npm run build 需要--prod 选项，您不应直接从 amazonS3 提供文件，因为它是存储服务而不是分发服务。

Webpack 与从 S3 提供站点无关。这只是一个构建步骤。您可以使用任何您喜欢的任务运行器。此外，当 URL 没有专门请求 index.html 时，您很快就会遇到问题。所有请求都需要重写以服务 index.html。查看@coorasse 的答案

【参考方案3】：

是的，您可以将应用程序部署到 AmazonS3，但您不应该直接从 Amazon S3 提供它：S3 是一种存储服务，而不是一种分发服务。这就是您应该为您的 S3 存储桶创建 CloudFront 分配的原因。

步骤：

使用npm run build --prod 构建您的应用程序（小心包含--prod 选项！）

为您的 Amazon S3 存储桶创建 CloudFront 分配并将您的 Default Root Object 设置为 index.html

如果您使用 url 重写而不是哈希策略（您的路径看起来像 http://yourwebsite/login 而不是 http://yourwebsite/#/login，请使用以下内容为您的 CloudFront 分配创建自定义错误响应：

HTTP 错误代码：404

错误缓存最小 TTL（秒）：0

自定义错误响应：是 响应页面路径：/index.html HTTP 响应代码：200

在将应用程序部署到 CloudFront 上的 Invalidate index.html 时还需要小心，否则旧版本会被缓存并提供给客户端。

请follow my guide for more details。

【讨论】：

这应该是公认的答案。它清楚地详细说明了添加重写规则的要求，以便为所有请求提供 index.html（S3 不这样做）并将 S3 区分为存储平台。