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

Question

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

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

Answer 1

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

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

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

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

• Elastic Beanstalk 上的 后端(Node API) (推荐)或 EC2

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

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

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

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

c。如何处理 CORS？

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

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

然后 enable CORS在 API 中:

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

2。如果你有一个项目

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

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

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

3。在这两种情况下

运行您的Webpack build在部署 React 部分之前。您可以手动(在 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。