angular - 在 AWS EC2 实例上部署 Angular 应用程序的流程

Question

我正在尝试找出在 Amazon Web Service 上部署 Angular 应用程序的最佳方法。 我的应用程序已经运行良好，并且我将其托管在 VPS 上。我想将我的应用程序迁移到 AWS 上，但我不知道如何进行部署。

目前，由于我的应用程序也有 lumen 后端，因此我使用 Composer 库deployer 在服务器上部署我的应用程序。该脚本基本上登录远程服务器，通过 git pull 检索我的代码，编译并安装所需的所有依赖项，然后将符号链接(symbolic link)更改为新版本，以便可以从网络访问它。

使用这种方法，Angular App是在服务器上编译的，可以使用大量的RAM来进行简单的编译。由于这个原因，我最近不得不升级我的 RAM。

现在，我的问题是，我如何在 AWS 上类似地部署我的应用程序？理想情况下，我想利用 AWS 的负载平衡功能，因此我需要更新应用程序的 AMI。我知道这可以使用 Amazon SDK 来完成，但我不太确定这是否是正确的方法。

目前，我的部署流程是:

• 将母版 checkout 到新文件夹
• 安装依赖项
• 编译应用
• 使用 dist 文件夹(以某种方式)构建和 AMI
• 将该 AMI 上传到 AWS
• 通知我的实例使用新的 AMI 而不是当前的 AMI。
• 冲洗并重复 API。

我还担心这会因为实例重启而带来一些停机时间。

我可以使用现在使用的相同机制在 EC2 实例上编译应用程序，但这意味着我只需要一个更大的实例来编译我的应用程序，这并不是最佳选择。

我还知道Amplify但我从未使用过它，并且我不确定它是否能满足我的要求，因为我不是在寻找自动部署。

我已经检查了一些答案，但它们似乎并不完全是我正在寻找的。 Deploying Angular App on AWS for practice
Deploying angular app to AWS Elastic beanstalk

Answer 1

最快的解决方案

部署基于 Angular 的应用程序 - 使用 Amazon S3 以及 Amazon CloudFront。

使用默认或任何可用的webpack，使用ng build在/build或/dist目录中编译和捆绑您的应用程序--产品

或者，您可以在 package.json 中编写一个小脚本来覆盖默认的 ng build 行为。例如，在构建过程中添加或更新环境变量。

cp ./src/config.dev.js ./src/config.dev.bak.js &&  cp ./src/config.prod.js ./src/config.dev.js &&  react-app-rewired build &&  mv ./src/config.dev.bak.js ./src/config.dev.js

上面的代码片段(尽管运行 react 应用程序构建)演示了覆盖默认构建行为 - 它启动本地环境的备份。在开始构建之前覆盖生产变量，然后在原始配置文件中再次恢复本地环境。

构建时间:约 5 分钟

准备好生产构建后，您可以继续使用默认设置创建 Amazon S3 存储桶(当然，您可以稍后在探索更多内容时调整设置和安全性)。

以下是如何开始使用 Amazon S3 的简单说明 - learn to create a bucket

创建存储桶后，您可以将其配置为托管静态网站。 以下是 AWS 官方文档中的另一个链接 - static website hosting

配置 Amazon S3 的时间:约 3 分钟

准备好存储桶后，您只需在存储桶中上传构建代码即可。 该网站将在 URL 端点上可用，该端点是在为您的存储桶配置静态服务器期间提供给您的。

使用 Amazon S3 时您可能需要考虑的几个配置选项:

1. 存储桶策略；使用任何现成的样板存储桶策略并根据您的需要增强安全参数。

2. 您不妨为您的存储桶配置“版本控制”，以维护发布历史记录。

您将在不到 10 分钟内上线!

部署后

1. 配置 Amazon CloudFront，它将充当静态网站的内容交付网络。

   启动指南:Here is the pathway

   在源存储桶服务器与分配连接之前，创建分配还需要几分钟时间。

   除了对您的应用程序实现 HTTPS 重定向和 SSL 加密之外，您还可以使用 Amazon CloudFront 以及其他 Amazon Web Services (Amazon CloudWatch) 监控流量、请求、资源消耗并在您的分配上创建警报

2. 如果您想重定向域上的流量 - 使用 Amazon Route53

3. 如果您的应用程序仍需要更大的灵 active ，请使用 AWS Lambda 函数在运行时引入动态函数。

这应该是适合您的用例的最有效、最快的解决方案。最小的学习曲线和快速简化的部署管道。

还有其他可用的选项以及 Amazon Web Services，例如 AWS Elastic Beanstalk，它可以在您的云环境中为您提供 Amazon EC2 实例，以支持你的 PHP 后端。但与提供的解决方案相反，需要更多配置。

所有最好的伙伴。