javascript-如何将React + NodeJS Express应用程序部署到AWS?

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

我需要分别部署React和Node / Express吗? 还是可以同时部署它们?

2个解决方案
65 votes

1.如果您有两个不同的项目

例如 一个React单页应用程序和一个Node / Express API。

一个。 您可以分别部署

  • S3和CloudFront上的前端(React应用程序)(教程)

  • Elastic Beanstalk(推荐)或EC2上的后端(节点API)

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

单独部署的另一个好处是:对于前端和后端拥有不同团队的组织,每个团队可以更轻松地自行部署应用程序,而不必依赖其他团队。

b。 为什么选择S3 + CloudFront而不是单独使用S3?

  • 使用CDN的所有好处
  • 一键即可获得您自己的域名和免费的SSL证书
  • 重定向到4xx错误(如果您的应用使用基于eb的路由器,则为必需)
  • 缓存系统
  • ebeb重定向

C。 如何处理CORS?

您可以使用其他子域,例如

  • eb用于Node / Express API
  • eb用于React应用

然后在API中启用CORS:

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

2.如果您有一个项目

例如 一个包含一些React视图的Node应用

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

注意:如果您有一个包含两个子项目的项目(即,一个用于React应用程序的文件夹和一个用于Node API的文件夹),并且两个子项目在分离时仍然可以工作,则可以部署该子项目。 单独进行项目(请参阅答案的第一部分)。

3.在两种情况下

在部署React部件之前运行Webpack构建。 您可以手动执行此操作(在AWS上部署之前),也可以自动执行(在CI / CD系统中)。

4.工具

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

5.如果不限于AWS

我回答了一个不仅限于AWS的相关问题。

GG. answered 2020-07-11T20:17:48Z
9 votes

基本概念

要轻松部署应用程序,您需要了解三个概念:微服务,容器和流程管理器。 我将与他们讨论更多细节,并提供一些链接以帮助您入门:

微服务

微服务是一种体系结构,可让您将应用程序划分为较小的服务。 这有多个好处:1-服务易于测试。2-服务是可更换的。3-服务可以单独扩展。

Monolith vs Microservices design

货柜化

几乎每个有用的应用程序都至少具有数十个依赖项。 您可以在目标计算机上安装依赖项,但是最肯定的是,您将面临一些挑战。 诸如Docker之类的程序允许您为应用程序创建一个容器并将该容器部署在云上。 (与云提供商无关)了解更多...

流程经理

流程经理可确保您的应用程序运行顺畅且所有部分均正常运行。 如果您的应用程序崩溃,则可以轻松地重新启动应用程序。

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

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

您只需构建您的应用程序并将其部署到静态S3网站即可。 如果您使用微服务架构将API与React应用分开,则此选项有效。

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

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

有关更多信息,请参阅AWS便捷文档。

2.将NodeJS应用程序部署到EC2中

您可以为每个微服务启动不同的EC2实例。 (API,React应用程序等),您需要使用流程管理器(例如PM2)来确保您的应用程序运行平稳。

连续交付(自动部署)

要创建自动部署,我更喜欢将Terraform与Ansible结合使用。 Terraform非常具有说明性。 您将描述云基础架构的外观,然后Terraform为您构建它。

另一方面,Ansible非常具有过程性,非常适合置备新服务器。

错误处理和报告:哨兵

理想情况下,您应该进行单元测试以防止将错误代码发送到生产环境。 (将Jest与Supertest和Enzyme一起用于浅层渲染)。 但是,这个世界并不完美,因此很高兴收到客户端上发生的任何潜在错误。 输入哨兵

bman answered 2020-07-11T20:19:45Z
translate from https://stackoverflow.com:/questions/41250087/how-to-deploy-a-react-nodejs-express-application-to-aws