【问题标题】：Deployment flow of an Angular app over on AWS EC2 instancesAngular 应用程序在 AWS EC2 实例上的部署流程
【发布时间】：2020-05-08 16:34:11
【问题描述】：

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

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

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

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

目前，我的部署流程是：

将主文件签入新文件夹
安装依赖项
编译应用程序
使用dist 文件夹构建和AMI（不知何故）
在 AWS 上上传该 AMI
通知我的实例使用新的 AMI 而不是当前的。
冲洗并重复 API。

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

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

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

我已经检查了一些答案，但它们并没有完全符合我的要求。 Deploying Angular App on AWS for practice
Deploying angular app to AWS Elastic beanstalk

【问题讨论】：

我认为使用 AWS Elastic beanstalk 有利于自动扩展和避免停机，因为它会自动处理部署。此外，您可能希望使用 docker 而不是 AMI。要部署 AMI 或 docker 映像，您可以使用 aws sdk。我使用它的方式是1）。构建泊坞窗图像，2）。推至 ECR 3)。推至 S3 4)。部署到 beantalk
@OronBen-David 这似乎是一个很好的选择。我不确定如何使用 docker 进行部署。我认为我仍然需要以这种方式进行研究，因为我还有一些问题。就像我是否部署我的php-fpm 容器一样。非常感谢您的建议
太棒了！祝你好运:)

标签： angular amazon-web-services

【解决方案1】：

最快的解决方案

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

使用默认的或任何可用的 webpack 编译和捆绑您的应用程序到 /build 或 /dist 目录使用ng build --prod

或者，您可以在 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

上面的 sn-p（虽然运行一个 react 应用程序构建）演示了覆盖默认构建行为 - 它启动本地环境的备份。在启动构建之前覆盖生产变量，然后在原始配置文件中再次恢复本地环境。

构建时间：~5 分钟

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

这里简单解释一下如何开始使用 Amazon S3 -learn to create a bucket

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

配置 Amazon S3 的时间：~3 分钟

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

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

存储桶策略；使用任何现成的样板桶策略并根据您的需要增强安全参数。
您不妨为您的存储桶配置“版本控制”以维护发布历史记录。

不到 10 分钟你就活了！

部署后

配置 Amazon CloudFront，它将作为静态网站的内容交付网络。

启动指南：Here is the pathway

在原始存储桶服务器与分配连接之前，创建分配将需要几分钟。

除了为您的应用程序实施 HTTPS 重定向和 SSL 加密外，您还可以使用 Amazon CloudFront 以及其他 Amazon Web Services (Amazon CloudWatch) 监控流量、请求、资源消耗并在您的分配上创建警报
如果您想重定向域上的流量 - 使用 Amazon Route53
如果您的应用程序仍需要更大的灵活性，请使用 AWS Lambda 函数在运行时引入动态函数。

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

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

所有最好的伙伴。

【讨论】：

这令人印象深刻，非常感谢。我会调查所有这些。
@Nicolas - 你试过了吗？一个小小的补充。您可以使用 AWS 命令行界面轻松地将文件上传到您的存储桶。通过 pip 或使用 Windows 的安装程序下载 AWS CLI。然后你做类似aws s3 cp --recursive ./build s3://your-domain.com --profile admin
我还没试过，没有。我很快就会去看看这个。非常感谢您的补充。

【解决方案2】：

请按照以下步骤操作：-

使用此命令在生产模式下构建 Angular 应用程序 ng build --prod
我知道在 AWS 上部署应用程序的两种方法
1) S3 存储桶
2) EC2 实例 使用 nginx

1) 在 S3 Bucket 上部署应用程序非常简单。跟着这个教程https://medium.com/codefactory/angular2-s3-love-deploy-to-cloud-in-6-steps-3f312647a659

2) 用于在 EC2 实例 上部署应用程序

将您的产品构建（/dist 文件夹内容）复制到 app 或 AWS 的任何其他目录中
在您的服务器上设置 Nginx https://www.nginx.com/blog/setting-up-nginx/
在/etc/nginx/conf.d内创建配置文件server.confconfiguration
在server.conf文件中使用这个配置。这是一个非常简单的配置。确保你提供正确的构建路径并且目录必须有执行权限。你也可以使用Nginx作为负载均衡器。李>

server {
    root /home/ec2-user/app;

    location / {
    try_files $uri $uri/ /index.html;
    }
}

【讨论】：