如何将React + NodeJS Express应用程序部署到AWS？

Question

我有一个React + Webpack / Babel + Node / Express应用程序，我想在AWS上部署它。

我是否必须单独部署React和Node / Express？或者他们可以一次部署在一起吗？

Answer 1

1。如果你有两个不同的项目

e.g。反应single-page app和Node / Express API。

一个。您可以单独部署

• S3上的前端（React应用）和CloudFront（tutorial）

• Elastic Beanstalk上的后端（Node API）（推荐）或EC2

另一种选择是在Elastic Beanstalk或EC2上同时将两个部分一起部署。但是，您将错过托管S3和CloudFront的好处，即为您的用户提供更快的交付和更便宜的成本。在我看来，在Web应用程序的客户端和服务器端单独更新和部署时，它也更方便，更不容易出现意外错误。

单独部署的另一个好处：对于前端和后端具有不同团队的组织，每个团队更容易在自己的部署他们的应用程序一侧取决于其他团队。

湾为什么单独使用S3 + CloudFront而不是S3？

• 所有the benefits of using a CDN
• 您自己的域名和一键式免费SSL证书
• 重定向4xx错误（如果您的应用使用基于HTML5 History的路由器，则必需）
• 缓存系统
• http2和http to https重定向

℃。如何处理CORS？

您可以使用不同的子域名，例如

• api.domain.com用于Node / Express API
• app.domain.com用于React app

然后API中的enable CORS：

app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)

2。如果您有一个项目

e.g。一个Node应用程序，包括一些React视图。

您必须在Elastic Beanstalk或EC2上部署整个应用。

注意：如果您有一个项目包括两个子项目（即React应用程序的文件夹和另一个用于Node API的文件夹），并且如果两个子项目在分离时仍然有用，那么您可以部署子项目分开（见答案的第一部分）。

3。在这两种情况下

在部署React部件之前运行Webpack build。您可以手动（在AWS上部署之前）或自动（在CI / CD系统中）执行此操作。

4。工具

• Official AWS S3 CLI - 使用高级aws s3命令管理S3存储桶和对象。
• Official AWS Elastic Beanstalk CLI - 使用eb命令管理和部署后端。
• S3-deploy - 用于将文件部署到S3的CLI实用程序。

5。如果不限于AWS

我回答a related question不限于AWS。

Answer 2

基本概念

要轻松部署您的应用程序，您需要了解三个概念：微服务，容器和流程管理器。我将通过更多细节和几个链接来讨论它们，以帮助您入门：

微服务

微服务是一种架构，允许您将应用划分为更小的服务。这有很多好处： 1-服务很容易测试。 2-服务是可更换的。 3-服务可以单独扩展。

集装箱化

几乎每个有用的应用程序都至少有几十个依赖项。您可以在目标计算机上安装依赖项，但大多数情况下您肯定不会遇到任何挑战。像Docker这样的程序允许您为应用程序创建容器并在云上部署该容器。 （无论云提供商）Learn more...

流程经理

流程经理确保您的应用程序运行顺畅，所有部分都运行正常。如果您的应用崩溃，可以轻松重启应用。

1。部署无服务器的NodeJS / React应用程序

  

注意：如果使用ReactJS进行服务器渲染，则此方法不起作用。转到下一个选项。

您可以简单地构建应用程序并将其部署到静态S3网站。如果您使用微服务架构将API与反应应用程序分开，则此选项有效。

在S3中创建静态网站非常简单：

1. 在S3中使用网站的确切名称创建一个存储桶。示例：blog.stackoverflow.com。
2. 启用静态托管
3. 在Route 53中创建A记录并将其连接到您创建的存储桶。

有关更多信息，请查看AWS方便documentation。

2。将NodeJS应用程序部署到EC2

您可以为每个微服务启动不同的EC2实例。 （API，React app等）您需要使用PM2等流程管理器来确保您的应用顺利运行。

持续交付（自动部署）

要创建自动部署，我更喜欢将Terraform与Ansible结合使用。 Terraform非常具有说服力。您描述了云基础架构应该是什么样子，Terraform为您构建它。

另一方面，Ansible非常具有程序性，非常适合配置新服务器。

错误处理和报告：Sentry

理想情况下，您应该进行单元测试，以防止将错误代码发送到生产中。 （使用Jest与supertest，Enzyme进行浅层渲染。但世界并不完美，接收客户端可能发生的任何漏洞都是好事。输入Sentry