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

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

我是否必须分别部署React和Node/Express？或者它们可以同时部署在一起？

1。如果你有两个不同的项目 e、 g.一个React和一个Node/Express API

A.您可以分别部署两者

• 和（）

• 上的后端（节点API）（推荐）或

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

单独部署的另一个好处是：对于前端和后端团队不同的组织，每个团队都可以更轻松地部署自己的应用程序，而无需依赖其他团队

B为什么S3+CloudFront而不是单独的S3？

• 全部
• 您自己的域名和免费SSL证书只需单击一次

• 4xx

  错误重定向（如果您的应用程序使用基于

  HTML5历史记录的路由器，则需要重定向）

• 缓存系统
• 和

  http到https

  重定向

C如何处理CORS？ 您可以使用不同的子域，例如

• api.domain.com

  用于节点/Express api
• React应用程序的

  app.domain.com

然后在API中：

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

2.如果你有一个单一的项目 e、 g.一个包含一些React视图的节点应用程序

您必须在或上部署整个应用程序

注意：如果您有一个包含两个子项目（即React应用程序的文件夹和节点API的另一个文件夹）的单个项目，并且如果两个子项目分开后仍能工作，那么您可以分别部署子项目（请参阅答案的第一部分）

3.在这两种情况下 在部署React部件之前，运行您的。您可以手动（在AWS上部署之前）或自动（在/系统中）执行此操作。如果您使用（CRA）引导应用程序，只需在项目根目录下运行

warn build

或

npm run build

，然后将“build”文件夹的内容上载到S3存储桶

4.工具

• -使用高级

  aws S3

  命令管理S3存储桶和对象
• -使用

  eb

  命令管理和部署后端
• -用于将文件部署到S3的CLI实用程序

5.如果不限于AWS 我的回答并不局限于AWS。

基本概念 要轻松部署应用程序，您需要了解三个概念：微服务、容器和流程管理器。我将用更多的细节和几个链接来讨论它们，让您开始：

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

集装箱化 几乎每个有用的应用程序都至少有几十个依赖项。您可以在目标机器上安装依赖项，但最肯定的是，您不会遇到什么挑战。Docker等程序允许您为应用程序创建一个容器，并将该容器部署到云上。（不考虑云提供商）

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

1.部署无服务器NodeJS/React应用程序 注意：如果使用ReactJS进行服务器渲染，则此方法不起作用。转到下一个选项

您只需构建应用程序并将其部署到静态S3网站。如果您使用microservices体系结构将API与react应用程序分离，则此选项有效

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

在S3中创建一个包含网站确切名称的bucket。示例：blog.stackoverflow.com

启用静态宿主

在Route 53中创建A记录，并将其连接到您创建的bucket

有关更多信息，请查看AWS handy

2.将NodeJS应用程序部署到EC2中 您可以为每个微服务启动不同的EC2实例。（API、React应用程序等）您需要使用流程管理器，例如，以确保您的应用程序顺利运行

连续交付（自动部署） 要创建自动部署，我更喜欢结合使用。Terraform非常具有声明性。您描述了云基础设施的外观，并为您构建了Terraform

另一方面，Ansible非常程序化，非常适合配置新服务器

错误处理和报告：Sentry

---

理想情况下，您应该进行单元测试，以防止将错误代码发送到生产环境。（与一起使用，用于浅层渲染）。但是这个世界是不完美的，接收客户端上发生的任何潜在bug都是好事。进入

感谢您的回复！在我接受答案之前，有几个问题。无法仅在S3上部署React应用程序？只是好奇为什么建议使用CloudFront。您还可以详细说明在部署到S3之前运行webpack/babel生产构建是什么意思吗？最后，NodeJS和ReactJS实际上必须单独部署吗？目前它们只在一个项目下，但在两个不同的子文件夹中。对不起，与React app+节点API相比，带有React部件的节点应用意味着什么？您好！我更新了我的答案，为您的问题添加了一些答案。谢谢您的详细说明。对于在部署之前运行bundle，您的意思是在部署之前构建bundle.js吗？艾尔