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

【问题标题】：How to serve angular 2 using amazon s3如何使用亚马逊 s3 提供 Angular 2
【发布时间】：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 路由他们 - 见stackoverflow.com/questions/16267339/…
npm run build 需要--prod 选项，您不应直接从 amazonS3 提供文件，因为它是存储服务而不是分发服务。
Webpack 与从 S3 提供站点无关。这只是一个构建步骤。您可以使用任何您喜欢的任务运行器。此外，当 URL 没有专门请求 index.html 时，您很快就会遇到问题。所有请求都需要重写以服务 index.html。查看@coorasse 的答案

【解决方案3】：

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

步骤：

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

【讨论】：