带有 React 应用程序的 AWS S3 存储桶：我的 React SPA 可能是部分静态的吗？

Question

我想使用带 S3 存储桶的 AWS CloudFront 托管我的 React 前端。

目前，我的应用程序部署在 EC2 实例中，概要如下：

前端：端口 80 上的 React 应用程序 运行。当用户转到 https://myapp.com 时，请求将定向到 my-ec2-instance:80。

后端：端口 3000 上的 Express JS 运行。当用户在浏览器中加载前端并与网站交互时，http 请求将发送到 https://myapp.com/api/*，然后路由到 my-ec2-instance:3000;

我想将前端从 ec2 实例中取出，并使用带有 S3 存储桶的 AWS CloudFront 进行托管，这样 EC2 实例只托管后端服务。

我了解到 AWS CloudFront / S3 存储桶只能托管静态网站。

在这种情况下，我的 React 前端是静态单页应用程序还是动态的？

我可以做吗？

Answer 1

您的应用程序是动态的，因为您需要 Express。 S3 只能提供静态内容，不能用于托管 node.js 应用程序。您仍然可以在 EC2 实例中从 S3 和托管 Express 提供静态内容，但您的部署策略会更加复杂。

如果您在 EC2 实例中托管静态和动态内容，那么在 CloudFront 中您需要基于路径的路由，对此有很好的解释 。