如何将ReactJS + NodeJS Express应用程序部署到AWS?

我有一个ReactJS + NodeJS / ExpressJS + Webpack / Babel应用程序,并希望将其部署到AWS上。

我的问题是,我必须单独部署ReactJS和NodeJS / ExpressJS? 还是可以将它们一起部署?

另外,我的栈中提到的任何好的指南都提到了? 环顾四周,但似乎都是特定的,无论是只是NodeJS或ReactJS。 最近发现它https://www.youtube.com/watch?v=WxhFq64FQzA ,但我相信它只覆盖NodeJS / ExpressJS而不是ReactJS。

目前该应用程序在一个项目下,包括所有ReactJS + NodeJS / ExpressJS + Webpack / Babel。

       

网上收集的解决方案 "如何将ReactJS + NodeJS Express应用程序部署到AWS?"

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

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

一个。 你可以部署

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

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

否则,您可以在Elastic Beanstalk或EC2上一次部署两个部分。 在这样做的时候,你错过了在S3和CloudFront上托pipe的好处,比如为用户提供更快的交付更便宜的成本 。 在我看来,它更方便,不太容易出现意想不到的错误,更新和部署Web应用程序的客户端和服务器端分开。

为什么selectS3 + CloudFront而不是S3?

  • 使用CDN的所有好处
  • 你自己的域名和一个免费的SSL证书
  • 4xx错误redirect(如果您的应用程序使用基于HTML5 History的路由器,则是必需的)
  • caching系统
  • http2http to httpsredirect

C。 如何处理CORS?

你可以使用不同的子域名,例如

  • api.domain.com为API
  • app.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 / Babel生产版本 。 您可以手动(在AWS上部署之前)或自动(在您的CI / CD系统中)执行此操作。

4.如果不限于AWS

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

基本概念

要免费部署您的应用程序,您需要了解三个概念:微服务,容器和stream程pipe理器。 我会用更多的细节和几个链接来讨论它们,让你开始:

微服务

微服务是一种架构,可让您将您的应用分成更小的服务。 这有多个好处:1-服务很容易testing。 2-服务是可replace的。 3-服务可以分开规模。

Monolith与微服务设计

集装箱

几乎每个有用的应用程序至less有几十个依赖项。 你可以在目标机器上安装依赖项,但是你肯定会遇到一些挑战。 像Docker这样的程序允许您为应用程序创build一个容器,并在云上部署该容器。 (不pipe云提供商) 了解更多…

stream程pipe理员

stream程pipe理者确保您的应用程序运行顺利,所有部分都健康。 如果你的应用程序崩溃,它可以轻松地重新启动应用程序。

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

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

您可以简单地构build您的应用程序并将其部署到静态的S3网站。 如果您使用微服务架构将您的API与您的反应应用程序分离,则此选项可行。

在S3中创build一个静态网站非常简单:

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

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

将NodeJS应用程序部署到EC2中

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

奖励:使用Sentry进行error handling

理想情况下,你应该有unit testing,以防止运输错误的代码到生产。 但是这个世界是不完美的,能够收到客户发生的任何潜在的错误是很好的。 inputSentry