在 AWS EC2 上部署 Angular 5 应用程序答案

【问题标题】：Deployment of Angular 5 app on AWS EC2在 AWS EC2 上部署 Angular 5 应用程序
【发布时间】：2018-01-14 15:03:54
【问题描述】：

我正在使用 Angular 5 为大学构建一个项目。我构建了两个独立的服务：

父文件夹
- 输入服务
  1. package.json
  2. ...
- 网络客户端
  1. package.json
  2. ...

我的文件夹结构有一个名为projectX 的父文件夹，其中有两个子文件夹，它们都有自己的package.json 等。它们是独立的项目，但存在于同一个父文件夹中。我设置了一个 EC2 实例并成功安装了所有依赖项，包括。 node、npm 和正确版本的 angular CLI。

在本地，我开始我的项目是这样的： ng serve --port 6060 用于输入服务和 ng serve --port 4200 用于 WebClient。我已经在服务器上（通过 ssh）成功运行了 ng build --prod 并创建了两个 dist 文件夹（每个文件夹中都有一个）。我现在想从“互联网”中访问我的两项服务。我已经为我的 EC2 实例设置了入站规则，应该允许连接。

让我的两个 dist 文件夹可用的最简单方法是什么？我应该使用快递吗？我尝试使用一个不起作用的 pm2 http 服务器。

如果您还有其他问题，请不要犹豫。

【问题讨论】：

您能否发布您在尝试连接时收到的错误消息。还有一件事ng serve 用于生产不是一个好主意，更多信息在这里：github.com/angular/angular-cli/issues/5274
这并不能直接回答您的问题，但您不需要 EC2 实例。我建议改为部署到 S3。看看这个：stackoverflow.com/questions/40889028/…
@BojanTrajkovski 我不打算在生产中使用ng serve。我只是在说明我在本地使用什么，并且想知道在生产部署中使用什么。
@MattMorgan 嗯，我刚刚签出了 S3。我的假设是否正确，我可以通过 AWS cli 工具上传我的项目 + dist 文件夹......就是这样？
或多或少。有一些微妙之处。您需要将存储桶设置为允许静态托管，并且您需要将所有传入请求重定向回应用程序的根目录，以便 javascript 处理路由。但这是托管静态应用程序的最佳方式 - 快速响应、出色的可扩展性，而且您无需为不需要的服务器付费。

标签： node.js angular amazon-web-services amazon-ec2 angular5

【解决方案1】：

假设您的 Angular 应用未设置为服务器端渲染，我可以建议您：

使用ng build --prod --aot 构建每个应用程序
在 S3 中创建您的存储桶（在您的情况下为 2 个）
将每个app的dist/文件夹的内容放到各自的bucket中
设置每个桶的属性：“静态网站托管”选择“使用此桶托管网站”并将索引文档字段设置为您的构建生成的“index.html”（将在dist/的根目录下）文件夹）

将每个存储桶的权限设置为公共，并使用允许的方法设置 CORS 配置（下例）

<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>

您可以使用“静态网站托管”上生成的端点来访问您的应用程序

关于您的后端，需要更多详细信息！

【讨论】：

谢谢。我认为这实际上可能对我有帮助。