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

Posted 2023-02-22

【中文标题】如何将 React + NodeJS Express 应用程序部署到 AWS？

【英文标题】：How to deploy a React + NodeJS Express application to AWS?

【发布时间】：2017-05-06 03:04:12

【问题描述】：

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

我需要分别部署 React 和 Node/Express 吗？或者它们可以同时部署在一起吗？

【参考方案1】：

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

例如一个 React single-page app 和一个 Node/Express API。

一个。您可以分别部署两者

S3 和 CloudFront (tutorial) 上的 前端（React 应用程序）

Elastic Beanstalk（推荐）或EC2上的后端（Node API）

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

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

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

全部the benefits of using a CDN 您自己的域名和一键免费 SSL 证书 4xx 错误的重定向（如果您的应用使用基于 html5 History 的路由器，则必须这样做） 缓存系统 http2 和 http to https 重定向

c。如何处理 CORS？

您可以使用不同的子域，例如

api.domain.com 用于 Node/Express API app.domain.com React 应用程序

然后在 API 中enable CORS：

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

2。如果你有一个项目

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

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

注意：如果您有一个项目包括两个子项目（即一个文件夹用于 React 应用程序，另一个文件夹用于 Node API），并且如果两个子项目在它们分开时仍然可以工作，那么您可以部署子项目分开（见答案的第一部分）。

3。在这两种情况下

在部署 React 部分之前运行您的Webpack build。您可以手动（在 AWS 上部署之前）或自动（在您的 CI/CD 系统中）执行此操作。如果您使用 create-react-app (CRA) 引导您的应用，只需在项目的根目录下运行 yarn build 或 npm run build 并将“build”文件夹的内容上传到您的 S3 存储桶。

4。工具

Official AWS S3 CLI - 使用高级 aws s3 命令管理 S3 存储桶和对象。 Official AWS Elastic Beanstalk CLI - 使用 eb 命令管理和部署您的后端。 S3-deploy - 用于将文件部署到 S3 的 CLI 实用程序。

5。如果不限于 AWS

我回答 a related question 不限于 AWS。

【讨论】：

感谢您的回复！在我接受答案之前，有几个问题。 React App 不能只部署在 S3 上吗？只是好奇为什么建议使用 CloudFront。您能否详细说明在部署到 S3 之前运行 webpack/babel 生产构建是什么意思？最后，NodeJS 和 ReactJS 它们实际上必须单独部署吗？目前它们只属于一个项目，但位于两个不同的子文件夹中。

抱歉，与 React 应用 + Node API 相比，带有 React 部件的 Node 应用是什么意思？

您好！我更新了我的答案以包含一些对您问题的答案。

感谢您的详细说明。对于在部署之前运行构建，您的意思是在部署之前构建 bundle.js 吗？另外，是否有关于如何在单个项目中部署的好指南，有两个子文件夹：React 应用程序文件夹和 Node 文件夹？

@ddewaele 您可以使用具有不同子域的相同域（api.domain.com 用于 nodejs 应用程序，*.domain.com 用于 s3 存储桶）和enable CORS 在 nodejs 应用程序中用于这些子域：@987654356 @

【参考方案2】：

基本概念

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

微服务

微服务是一种架构，可让您将应用划分为更小的服务。这有很多好处： 1-服务易于测试。 2-服务是可更换的。 3- 服务可以单独扩展。

容器化

几乎每个有用的应用程序都至少有几十个依赖项。您可以在目标机器上安装依赖项，但您肯定会面临一些挑战。像 Docker 这样的程序允许您为您的应用程序创建一个容器并将该容器部署在云上。 （不考虑云提供商）Learn more...

流程经理

流程管理器可确保您的应用运行顺畅且所有部分都运行良好。如果您的应用崩溃，它可以轻松重启应用。

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

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

您可以简单地构建您的应用并将其部署到静态 S3 网站。如果您使用微服务架构将 API 与 React 应用分开，则此选项有效。

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

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

如需更多信息，请查看 AWS 方便documentation。

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

您可以为每个微服务启动不同的 EC2 实例。 （API、React 应用等）您需要使用PM2 等流程管理器来确保您的应用顺利运行。

持续交付（自动化部署）

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

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

错误处理和报告：Sentry

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

【讨论】：

真的很感激所有的见解！如果您不介意，需要一些澄清。服务器渲染是什么意思，我如何检查我的渲染是什么？什么是服务器更少的 NodeJS/React 应用程序？ NodeJS 不是服务器吗？此外，我的一个项目在两个单独的子文件夹中同时包含 React 和 NodeJS/ExpressJS，因此希望将它们作为一个整体进行部署。

在我接受答案和赞成投票之前，只需检查一下您是否看过我之前的消息。

如何自动部署到 EC2？有什么工具可以做到这一点？

@FrancisRodrigues 我在关于 CD 的回答中添加了一个部分