S3亚马逊静态网站与React?

时间:2017-08-31 20:16:31

标签: reactjs amazon-s3 amazon-ec2

我使用ReactJs建立了一个网站,为了查看该网站,我通常会在npm开始并通过浏览器转到localhost:3000。

我现在想在S3上托管这个网站,但没有EC2实例。我的理解是,npm是一个进程,因此它是服务器端的,因此,我需要购买计算以实际部署我的网站。

我发现本教程没有提到支付EC2实例计算时间:https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/

然而,他们仍然使用NPM让我感到困惑。

我的问题是:如果我只使用静态S3网站,没有计算机就可以使用React,如果是的话 - 如何绕过NPM流程?

React - component in seperate script does not work

在上面的帖子中,用户试图制作一个hello-world应用程序,但是所有的答案都指向了服务器提供内容的方向。我认为react是一个前端的东西,可以在没有服务器端进程的情况下运行。这是真的?有人可以解释为什么node.js是必要的或者与react配对,以及是否可以在不使用ec2计算的情况下对s3进行反应?

3 个答案:

答案 0 :(得分:4)

完全可以在s3上托管静态反应站点。在这种情况下,您只能将node / npm用作构建工具并运行开发服务器(localhost:3000)。

npm会下载您的依赖项,您可以使用node或gulp或webpack将资源构建到静态文件中。

然后你将文件上传到s3,它将提供静态文件。

如果你有一些后端节点代码,那么你需要使用ec2或其他类型的主机。但如果它是完全静态的javascript,则不需要节点服务器。

以下是一些可能有助于更详细解释的链接:

答案 1 :(得分:1)

试试Gatsby!这里:https://www.gatsbyjs.org/

从Github页面:“用于React的快速静态站点生成器

一旦你生成了静态页面,就可以在S3,Github页面上进行部署......你的选择就是你的!

答案 2 :(得分:0)

您可以根据情况跳过EC2。这是原因:

1)S3存储桶+ CloudFront(CDN)对于静态文件服务而言确实非常快。 React缩小版应用程序是一组静态文件,在这里效果最好。对于构建这些缩小的文件,我建议使用CI / CD流程或在本地构建它们,然后将其上传到S3。

2)EC2需要更多的工作来设置,它消耗资源,对于静态文件或React来说不是必需的(除非您使用ReactDOMServer来提供动态内容服务),并且不建议将Node.js用于静态文件(Node)。 js get被阻塞,因为它是单线程的,因此最好的方法是使静态文件远离它。)

这里有一篇不错的文章,以Angular为例:https://www.quora.com/Should-I-use-AWS-EC2-to-host-an-Angular-web-app-or-AWS-S3