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

Question

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

我必须分别部署 React 和 Node/Express 吗？还是可以同时部署它们？

原文由 Dan Me 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

_例如 React 单页应用程序 和 Node/Express API。_

一个。您可以单独部署两者

• S3 和 CloudFront 上的 前端（React 应用程序）（ 教程）

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

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

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

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

• 使用 CDN 的所有好处
• 您自己的域名和一键式免费 SSL 证书
• 重定向 4xx 错误（如果您的应用程序使用基于 HTML5 History 的路由器，则必需）
• 缓存系统
• http2 和 http to https 重定向

C。如何处理 CORS？

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

• api.domain.com 用于节点/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.工具

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

5.如果不限于AWS

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

原文由 GG. 发布，翻译遵循 CC BY-SA 4.0 许可协议