如何将React + NodeJS Express应用程序部署到AWS？
Dan*_* Me 45 javascript deployment amazon-web-services node.js reactjs
我有一个React + Webpack/Babel + Node/Express应用程序,我想在AWS上部署它.
我是否必须单独部署React和Node/Express？或者他们可以一起部署？
GG.*_*GG. 65
1.如果你有两个不同的项目
例如,React 单页面应用程序和Node/Express API.
一个.您可以单独部署它们
S3和CloudFront上的前端(React应用程序)(教程)
Elastic Beanstalk(推荐)或EC2上的后端(Node API)
另一种选择是在Elastic Beanstalk或EC2上同时将两个部分一起部署.但是,您将错过托管S3和CloudFront的好处,即为您的用户提供更快的交付和更低的成本.在我看来,单独更新和部署Web应用程序的客户端和服务器端也更方便,更不容易出现意外错误.
湾 为什么单独使用S3 + CloudFront而不是S3？
- 使用CDN的所有好处
- 您只需单击一下即可获得自己的域名和免费的SSL证书
- 重定向
4xx错误(如果您的应用使用HTML5 History基于路由器,则必需) - 缓存系统
http2和http to https重定向
C.如何处理CORS？
您可以使用不同的子域,例如
api.domain.com对于APIapp.domain.com对于应用程序
然后在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 - 使用高级
aws s3命令管理S3存储桶和对象. - 官方AWS Elastic Beanstalk CLI - 使用
eb命令管理和部署后端. - S3-deploy - 用于将文件部署到S3的CLI实用程序.
5.如果不限于AWS
基本概念
要轻松部署您的应用程序,您需要了解三个概念:微服务,容器和流程管理器.我将用更多细节和几个链接来讨论它们,以帮助您入门:
微服务
微服务是一种架构,允许您将应用程序划分为更小的服务.这有许多好处:1-服务很容易测试.2-服务是可更换的.3-服务可以单独扩展.
集装箱
几乎每个有用的应用程序至少有几十个依赖项.您可以在目标计算机上安装依赖项,但大多数情况下您肯定不会遇到任何挑战.像Docker这样的程序允许您为应用程序创建容器并在云上部署该容器.(无论云提供商)了解更多......
流程经理
流程经理确保您的应用程序运行顺畅,所有部分都运行正常.如果您的应用崩溃了,它可以轻松重启应用.
1.部署无服务器的NodeJS/React应用程序
注意:如果使用ReactJS进行服务器渲染,则此方法不起作用.转到下一个选项.
您只需构建应用程序并将其部署到静态S3网站即可.如果您使用微服务架构将API与您的反应应用程序分开,则此选项有效.
在S3中创建静态网站非常简单:
- 在S3中创建一个具有网站名称的存储桶.示例:blog.stackoverflow.com.
- 启用静态托管
- 在Route 53中创建A记录并将其连接到您创建的存储桶.
有关更多信息,请查看AWS便捷文档.
2.将NodeJS应用程序部署到EC2中
您可以为每个微服务启动不同的EC2实例.(API,React应用程序等)您需要使用PM2等流程管理器来确保您的应用程序顺利运行.
持续交付(自动部署)
为了创建自动部署,我更喜欢将Terraform与Ansible结合使用.Terraform非常具有说服力.您描述了云基础架构应该是什么样子,Terraform为您构建它.
另一方面,Ansible非常具有程序性,非常适合配置新服务器.
错误处理和报告:Sentry
理想情况下,您应该进行单元测试,以防止将错误代码发送到生产中.(使用Jest with supertest,Enzyme用于浅层渲染).但世界并不完美,接收客户端可能发生的任何漏洞都是好事.输入Sentry