一个Angular应用在AWS EC2实例上的部署流程

Question

一个Angular应用在AWS EC2实例上的部署流程

5

我正在尝试找出在亚马逊网络服务上部署angular应用的最佳方法。我的应用程序已经运行良好，我正在使用VPS进行托管。我想将我的应用迁移到AWS，但我无法理解如何进行部署。目前，由于我的应用还有一个lumen后端，我正在使用composer库“deployer”将我的应用部署到服务器上。该脚本基本上登录到远程服务器，通过git pull检索我的代码，编译和安装所有所需的依赖项，然后更改符号链接以使其可以从Web访问。使用这种方法，angular应用在服务器上进行编译，这可能会使用大量RAM进行简单的编译。最近，我不得不升级我的RAM，正是出于这个原因。现在，我的问题是，如何类似地在AWS上部署我的应用程序？理想情况下，我希望利用AWS的负载平衡功能，因此我需要更新后的应用程序的AMI。我知道可以使用Amazon SDK来完成此操作，但我不确定这是否是正确的方法。目前，我的部署流程将是：

将主分支检出到一个新文件夹中
安装依赖项
编译应用程序
使用 dist 文件夹构建 AMI（以某种方式）
在 AWS 上上传该 AMI
通知我的实例使用新的 AMI 而不是当前的 AMI。
然后对 API 进行相同的操作。

我也担心这会带来一些停机时间，因为实例需要重新启动。

我可以使用EC2实例上现在正在使用的相同机制来编译应用程序，但这意味着我需要一个更大的实例来编译我的应用程序，这并不是非常理想。

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

我已经查看了几个答案，但它们似乎不是我正在寻找的。在AWS上部署Angular应用进行练习
将Angular应用部署到AWS Elastic Beanstalk

- Nicolas

2

我认为使用AWS Elastic Beanstalk非常适合自动扩展和避免停机时间，因为它可以自动处理部署。此外，您可能希望使用Docker而不是AMI。要部署AMI或Docker镜像，您可以使用AWS SDK。我的使用方式是：1）构建Docker镜像，2）推送到ECR 3）推送到S3 4）部署到Beanstalk。 - Oron Bendavid

@OronBen-David 这似乎是一个非常好的选择。我不确定如何使用docker进行部署。我认为我仍然需要研究一下这种方式，因为我还有一些问题。比如说，我是否也要部署我的 php-fpm 容器。非常感谢您的建议。 - Nicolas

太棒了！祝你好运 :) - Oron Bendavid

1

作为此帖子的更新，我已经使用render.com静态站点大约两年了。它可以自动构建和部署我的应用程序，效果非常好。 - Nicolas

2个回答

3

按照以下步骤进行操作：

使用以下命令在生产模式下构建Angular应用：ng build --prod
我知道两种在AWS上部署应用的方法：
1) S3 Bucket
2) 使用Nginx的EC2实例

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.conf配置文件。
在server.conf文件中使用此配置。这是一个非常简单的配置，请确保提供正确的生成路径，目录必须具有执行权限。您还可以使用Nginx作为负载均衡器。

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

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

- Saurabh Gangamwar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ronnie · Accepted Answer

最快的解决方案

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

使用默认或任何可用的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

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

构建时间：约5分钟

一旦您准备好生产构建，就可以继续创建带有默认设置的Amazon S3存储桶（当然，随着您的探索，您可以调整设置和安全性）。以下是一个简单的解释，介绍如何开始使用Amazon S3-学习创建存储桶。

创建存储桶之后，您可以配置其托管静态网站。以下是AWS官方文档中另一个链接，用于托管静态网站。

配置Amazon S3所需的时间：约3分钟

一旦您的存储桶准备就绪，您可以简单地将构建代码上传到存储桶中。网站将在URL终端点上提供给您，该终端点在为存储桶配置静态服务器期间提供给您。

在使用Amazon S3时，您可能想考虑的一些配置选项包括：

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

您只需要不到10分钟即可上线！

部署后：

配置Amazon CloudFront，作为静态网站的内容分发网络。

启动指南：这是路径

创建一个分发需要几分钟时间，才能将源存储桶服务器连接到分发中。

除了其他Amazon Web服务（Amazon CloudWatch）之外，使用Amazon CloudFront还可以强制执行HTTPS重定向、为应用程序提供SSL加密，监视流量、请求、资源消耗并在分发上创建警报。

如果您想要重定向域上的流量-请使用Amazon Route53。
如果您的应用程序仍然需要更多灵活性，请使用AWS Lambda函数在运行时引入动态函数。

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

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

祝一切顺利。