我有一个 React + Webpack/Babel + Node/Express 应用程序，我想将它部署在 AWS 上。
我是否必须分别部署 React 和 Node/Express？或者它们可以同时部署在一起吗？
如何将 React + NodeJS Express 应用程序部署到 AWS？
IT技术
javascript
node.js
amazon-web-services
reactjs
deployment
2021-03-29 10:28:56
2个回答
1. 如果你有两个不同的项目
例如一个 React单页应用程序和一个 Node/Express API。
一个。您可以分别部署
S3和CloudFront上的前端（React 应用程序）（教程）
Elastic Beanstalk（推荐）或EC2上的后端（节点 API）
另一种选择是在Elastic Beanstalk或EC2上同时部署这两个部分。但是，您将错过在 S3 和 CloudFront 上托管的好处，即为您的用户提供更快的交付和更便宜的成本。在我看来，单独更新和部署 Web 应用程序的客户端和服务器端也更方便，更不容易出现意外错误。
单独部署的另一个好处是：对于前端和后端具有不同团队的组织，每个团队能够更轻松地独立部署他们自己的应用程序，而无需依赖其他团队。
湾 为什么是 S3 + CloudFront 而不是单独的 S3？
- 使用 CDN 的所有好处
- 一键获取您自己的域名和免费的 SSL 证书
4xx错误重定向（如果您的应用程序使用HTML5 History基于路由器的路由器，则需要）- 缓存系统
http2和http to https重定向
C。如何处理 CORS？
您可以使用不同的子域，例如
api.domain.com用于 Node/Express APIapp.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. 工具
- 官方 AWS S3 CLI - 使用高级
aws s3命令管理 S3 存储桶和对象。 - 官方 AWS Elastic Beanstalk CLI - 使用
eb命令管理和部署您的后端。 - S3-deploy - 用于将文件部署到 S3 的 CLI 实用程序。
5. 如果不限于 AWS
基本概念
要轻松部署您的应用程序，您需要了解三个概念：微服务、容器和流程管理器。我将用更多细节和几个链接来讨论它们，以帮助您入门：
微服务
微服务是一种架构，可让您将应用程序划分为更小的服务。这有多种好处： 1- 服务易于测试。2- 服务是可更换的。3- 服务可以单独扩展。
容器化
几乎每个有用的应用程序都至少有几十个依赖项。您可以在目标机器上安装依赖项，但您肯定会面临一些挑战。Docker 等程序允许您为应用程序创建容器并将该容器部署到云上。（无论云提供商如何）了解更多...
流程经理
流程管理器可确保您的应用程序运行顺畅且所有部件均正常运行。如果您的应用程序崩溃，它可以轻松地重新启动应用程序。
1. 部署无服务器 NodeJS / React 应用程序
注意：如果您使用 ReactJS 进行服务器渲染，则此方法不起作用。转到下一个选项。
您可以简单地构建您的应用程序并将其部署到静态 S3 网站。如果您使用微服务架构将 API 与 React 应用程序分开，则此选项有效。
在 S3 中创建静态网站非常简单：
- 在 S3 中使用网站的确切名称创建一个存储桶。示例：blog.stackoverflow.com。
- 启用静态托管
- 在 Route 53 中创建 A 记录并将其连接到您创建的存储桶。
有关更多信息，请查看 AWS 便捷文档。
2. 将 NodeJS 应用程序部署到 EC2
您可以为每个微服务启动不同的 EC2 实例。（API、React app 等）你需要使用PM2等进程管理器来确保你的 app 运行顺畅。
持续交付（自动化部署）
为了创建自动部署，我更喜欢将Terraform与Ansible结合使用。Terraform 非常具有声明性。您描述了云基础架构应该是什么样子，然后 Terraform 会为您构建它。
另一方面，Ansible 非常程序化，非常适合配置新服务器。
错误处理和报告：Sentry
理想情况下，您应该进行单元测试以防止将错误代码传送到生产环境中。（将Jest与supertest一起使用，Enzyme用于浅层渲染）。但是世界是不完美的，接收客户端发生的任何潜在错误是件好事。进入哨兵