logo标签列表

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

javascriptnode.jsamazon-web-servicesreactjsdeployment
66

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

我需要将 React 和 Node/Express 分开部署吗？还是可以一次性部署它们？

3个回答
106

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

例如，一个 React 单页面应用 和一个 Node/Express API。

a. 您可以分别部署它们

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

分别部署的另一个好处：对于前端和后端有不同团队的组织，每个团队能够自行部署他们的应用程序，而不依赖于其他团队。

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

  • 使用 CDN 的所有好处
  • 1 次点击即可获得您自己的域名和免费的 SSL 证书
  • 在 4xx 错误时进行重定向（如果您的应用程序使用基于 HTML5 History 的路由器，则必需）
  • 缓存系统
  • http2 和 http to https 重定向

c. 如何处理 CORS？

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

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

然后在 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系统中）。如果您使用create-react-app（CRA）来引导您的应用程序，只需在项目的根目录下运行yarn build或npm run build，并将“build”文件夹的内容上传到您的S3存储桶中。

4. 工具

5. 如果不限于AWS

我回答了一个相关问题，该问题不限于AWS。

在这种情况下，如何处理CORS？如何从S3提供的网站向运行在不同域上的Node.js应用程序发出API调用？ - ddewaele
1
@ddewaele 您可以使用不同的子域名(api.domain.com 用于 nodejs 应用程序，*.domain.com 用于 s3 存储桶)，并在这些子域名中为 nodejs 应用程序启用 CORS：cors({ origin: IS_DEV ? true : /^https:\/\/[^.\s]+\.domain\.com$/ })。 - GG.
React应用程序在其内部使用Node.js进行包管理和其他操作。如何将其分开处理？它不应该被视为ReactJS Node应用程序吗？我还想部署我的应用程序，但卡在这里了。 - EdG
我需要两个webpack文件吗？一个用于生产环境，另一个用于开发环境。目前我只有一个webpack.config.js文件。并且为了更清晰明确，您是指在shell上运行webpack -w来构建bundle.js，然后再部署到Elastic Beanstalk吗？ - henhen
@henhen 这不是必须的，但建议这样做。建议这样做是因为您想要生产中最优化的构建和开发中最快速的构建过程（因为每次更改文件时都应该重新构建）。因此，拥有一个保证两个条件的单个配置是不可能的。对于第二个问题，您可以在shell中运行webpack，但将一个条目添加到package.json的“scripts”中会更容易，例如 "scripts": { "build": "webpack" }。它允许您附加选项或其他命令到您的构建过程中，并将其保持简单，只需使用 npm run build 即可。 - GG.
显示剩余13条评论
15

基本概念

为了轻松部署您的应用程序，您需要了解三个概念：微服务、容器和进程管理器。我将详细讨论它们，并提供一些链接供您开始：

微服务

微服务是一种允许您将应用程序分成较小服务的架构。这有多重好处： 1- 服务易于测试。 2- 服务可以相互替换。 3- 服务可以单独扩展。

Monolith vs Microservices design

容器化

几乎每个有用的应用程序都至少有数十个依赖项。您可以在目标机器上安装依赖项，但肯定会遇到一些挑战。像 Docker 这样的程序允许您为您的应用程序创建一个容器，并在云端部署该容器（无论云提供商如何）。 了解更多...

进程管理器

进程管理器确保您的应用程序平稳运行，并且所有部分都是健康的。如果您的应用程序崩溃，它可以轻松重新启动应用程序。

1. 部署一个无服务器的 NodeJS / React 应用程序

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

您只需构建应用程序并将其部署到静态 S3 网站即可。如果您使用微服务架构来将 API 与 React 应用程序分开，则此选项可行。

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

  1. 使用网站的确切名称在 S3 中创建存储桶。例如：blog.stackoverflow.com。
  2. 启用静态托管
  3. 在 Route 53 中创建 A 记录，并将其连接到您创建的存储桶。

了解更多，请查看AWS方便的文档。

2. 将NodeJS应用程序部署到EC2

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

持续交付(自动化部署)

为了创建自动化部署，我倾向于使用Terraform与Ansible组合。 Terraform非常声明式。您描述云基础架构应该是什么样子的，Terraform会为您构建它。

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

错误处理和报告：Sentry

理想情况下，您应该编写单元测试，以防止将有缺陷的代码发布到生产环境。(使用Jest与supertest，Enzyme进行浅层渲染)。但是世界并不完美，收到在客户端发生的任何潜在错误都是好事。 这时候就需要Sentry。

非常感谢您提供的所有见解！如果您不介意，我需要澄清一些问题。什么是服务器渲染，我如何检查我的服务器是否支持？什么是无服务器NodeJS/React应用程序？NodeJS不是服务器吗？此外，我的一个项目有React和NodeJS/ExpressJS，在两个单独的子文件夹中，因此希望将它们作为整体部署。 - Dan Me
只是想确认一下，你是否看到了我之前的消息，在我接受答案并点赞之前。 - Dan Me
如何自动化部署到EC2？有什么工具可以做到这一点吗？ - Francis Rodrigues
@FrancisRodrigues 我在我的回答中添加了一个关于CD的部分。 - bman
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接