部署在AWS Cloudfront上的React + Node.js应用程序的执行流程？

Question

我正在用Node.js后端在React中开发一个Web应用程序。我想将为React应用程序构建的图像和静态文件托管在Cloudfront上。但是，React应用程序依靠Node.js服务器获取一些变化的数据来填充视图。

我需要对应用程序流程有透彻的了解，以便提出合理的设计。我认为是这样的：

1. 用户在浏览器中输入URL
2. 将客户定向到最近的Cloudfront边缘位置
3. Cloudfront将HTML和图像提供给浏览器
4. React应用程序在浏览器中引导
5. 对Node.js服务器进行了API调用，该服务器返回了所需的数据
6. 浏览器呈现React应用程序。

我理解正确吗？有没有更好的方法来构建我的Web应用程序？

我无法在线找到我需要的信息，将不胜感激！

Answer 1

您的架构是正确的。 请明确，CloudFront不会托管您的文件。 CloudFront是一个缓存，它将从Origin（通常是Amazon S3存储桶）中获取文件。

使用React && AWS Amplify，您可以用最少的工作为这种类型的设置创建无服务器架构。您可以按照https://aws-amplify.github.io/docs/

上的说明开始使用

简而言之：

安装方式：

npm install -g @aws-amplify/cli
$ amplify configure

然后在您的项目中：

amplify init 
amplify add api #this will create your API as AWS Lambda functions exposed through Amazon API Gateway)
amplify add hosting #this will create the Amazon S3 bucket for hosting and the cloudfront distribution)
amplify push #to create all this on your AWS account for you

如果您搜索“ aws amplify react”，您将很容易找到十几个博客文章，向您展示如何入门。有太多我不能特别推荐。