在aws s3上提供Angular2应用程序

Question

我创建了一个Angular 2表单，它使用Rest API将表单数据发布到postgres数据库。现在，我想在AWS S3上提供我的Angular 2应用程序。我搜索了这个，我发现创建一个webpack是一个解决方案但不能创建一个。我想知道从哪里开始，捆绑我的代码并在s3上提供它。

表单的GitHub链接：https://github.com/aanirudhraj/Angular2form_signaturepad_API

感谢帮助!!

Answer 1

最快的方法是使用angular-cli构建应用程序，然后将'dist'目录的内容部署为S3中的静态站点（可以将S3存储桶配置为托管静态站点;确保您确定已读取允许'任何人'避免使用http 4xx返回码。）

Answer 2

您只需将其作为静态站点托管在S3上。 检查一下：http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

Answer 3

我从您的代码中推断出您使用的是angular-cli。

• 创建开发/生产构建

  ng build --dev / ng build --prod

• dist文件夹的内容将包含用于部署的捆绑文件。您的主要参考文件是＆＃39; index.html＆＃39;因为这会加载角度应用程序。
• 您需要决定使用哪种服务器来为您提供webapp服务 出于开发目的，当我们ng serve时，webpack-dev-server被用作静态文件服务器（local development）。我建议您在部署到实际服务器时使用最舒适/最具成本效益的解决方案。

静态文件服务器

• Directly hosting website is aws space as a static website.
• Aspnet Core with static file server middleware. (*)
• Nodejs Express with static file server middleware.(*)
• Java serverlet for serving static files. (*)

（*）如果您将来需要，以下aproach还允许您拥有一些服务器端代码。

Answer 4

部署ng2-app时，应该使用AOT（提前）编译。 我猜你正在使用JIT（及时）编译。

在angular2指南页面，

  

使用AOT，浏览器会下载应用程序的预编译版本。浏览器加载可执行代码，以便它可以立即呈现应用程序，而无需先等待编译应用程序。

当您使用JIT编译时，您的浏览器将下载由angular2编译器定义的vendor.js，它将及时编译您的应用程序。它太慢了，客户端必须下载供应商文件。当您使用AOT时，您不必使用供应商文件，因此资源更小。

我建议在部署应用程序时使用AOT编译，并对资源大小使用延迟加载。

如果您对ng2 AOT编译感到好奇，请阅读本指南。

angualar2-cookbook-AOT

这是带有webpack2和延迟加载的示例angular2 app。

在这里使用文件结构和配置文件。

当我使用示例应用程序进行测试时，与aot捆绑在一起的文件小于500KB。

angular2-webpack2-aot

使用@ ngtools / webpack或其他任何编译时，

将所有文件放在dist目录中，其中包含在S3存储桶中编译的文件，我建议使用aws cloudfront cache作为s3存储桶资源。

Answer 5

感谢您的所有答案。所有这些都帮助我找到了解决方案 我使用[GitHub webpack starter]重新创建了我的angular2应用程序：https://github.com/AngularClass/angular2-webpack-starter。  一旦我编译了代码并按照自述文件中提供的说明创建了一个dist文件夹。我已将dist的所有内容上传到AWS s3 Bucket并设置了权限。完成!!!!