如何将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。

Answer 1

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系统
• http2和http 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 的相关问题 。

Answer 2

基本概念

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

微服务

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

集装箱

几乎每个有用的应用程序至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