我有一个 React + Webpack/Babel + Node/Express 应用程序,我想在 AWS 上部署它。
我需要将 React 和 Node/Express 分开部署吗?还是可以一次性部署它们?
我有一个 React + Webpack/Babel + Node/Express 应用程序,我想在 AWS 上部署它。
我需要将 React 和 Node/Express 分开部署吗?还是可以一次性部署它们?
例如,一个 React 单页面应用 和一个 Node/Express API。
前端(React 应用)可以使用 S3 和 CloudFront 进行部署(教程)
后端(Node API)可以使用 Elastic Beanstalk(推荐)或EC2 进行部署
另一种选择是同时将两部分部署到 Elastic Beanstalk 或 EC2 上。但是,您将错过在 S3 和 CloudFront 上托管的好处,即为您的用户提供更快的交付速度和更便宜的成本。在我看来,更新和独立部署 web 应用程序的客户端和服务器端更方便,也更不容易出现意外错误。
分别部署的另一个好处:对于前端和后端有不同团队的组织,每个团队能够自行部署他们的应用程序,而不依赖于其他团队。
4xx
错误时进行重定向(如果您的应用程序使用基于 HTML5 History
的路由器,则必需)http2
和 http to https
重定向您可以使用不同的子域,例如
api.domain.com
用于 Node/Express APIapp.domain.com
用于 React 应用然后在 API 中启用 CORS:
app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)
例如,一个包含一些React视图的Node应用程序。
您需要将整个应用程序部署在 Elastic Beanstalk 或 EC2 上。
注意:如果您的单个项目包括两个子项目(即React应用程序的文件夹和另一个用于Node API的文件夹),并且当它们分开时两个子项目仍然可以正常工作,则可以分别部署子项目(请参见答案的第一部分)。
在部署React部分之前运行您的Webpack构建。您可以手动执行(在部署到AWS之前)或自动执行(在您的CI/CD系统中)。如果您使用create-react-app(CRA)来引导您的应用程序,只需在项目的根目录下运行yarn build
或npm run build
,并将“build”文件夹的内容上传到您的S3存储桶中。
aws s3
命令管理S3存储桶和对象。eb
命令管理和部署后端。我回答了一个相关问题,该问题不限于AWS。
为了轻松部署您的应用程序,您需要了解三个概念:微服务、容器和进程管理器。我将详细讨论它们,并提供一些链接供您开始:
微服务是一种允许您将应用程序分成较小服务的架构。这有多重好处: 1- 服务易于测试。 2- 服务可以相互替换。 3- 服务可以单独扩展。
几乎每个有用的应用程序都至少有数十个依赖项。您可以在目标机器上安装依赖项,但肯定会遇到一些挑战。像 Docker 这样的程序允许您为您的应用程序创建一个容器,并在云端部署该容器(无论云提供商如何)。 了解更多...
进程管理器确保您的应用程序平稳运行,并且所有部分都是健康的。如果您的应用程序崩溃,它可以轻松重新启动应用程序。
注意:如果您正在使用 ReactJS 进行服务器渲染,则此方法不适用。请转到下一个选项。
您只需构建应用程序并将其部署到静态 S3 网站即可。如果您使用微服务架构来将 API 与 React 应用程序分开,则此选项可行。
在 S3 中创建静态网站非常简单:
了解更多,请查看AWS方便的文档。
您可以为每个微服务启动不同的EC2实例。(API,React应用等) 您需要使用进程管理器(如PM2)来确保应用程序顺畅运行。
为了创建自动化部署,我倾向于使用Terraform与Ansible组合。 Terraform非常声明式。您描述云基础架构应该是什么样子的,Terraform会为您构建它。
另一方面,Ansible非常程序化,非常适合为新服务器进行配置。
理想情况下,您应该编写单元测试,以防止将有缺陷的代码发布到生产环境。(使用Jest与supertest,Enzyme进行浅层渲染)。但是世界并不完美,收到在客户端发生的任何潜在错误都是好事。 这时候就需要Sentry。
api.domain.com
用于 nodejs 应用程序,*.domain.com
用于 s3 存储桶),并在这些子域名中为 nodejs 应用程序启用 CORS:cors({ origin: IS_DEV ? true : /^https:\/\/[^.\s]+\.domain\.com$/ })
。 - GG."scripts": { "build": "webpack" }
。它允许您附加选项或其他命令到您的构建过程中,并将其保持简单,只需使用npm run build
即可。 - GG.