带有 React 的 S3 亚马逊静态网站?

IT技术 reactjs amazon-s3 amazon-ec2
2021-05-03 06:46:09

我用ReactJs建了一个网站,看这个网站一般是npm start,然后通过浏览器访问localhost:3000。

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

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

但是,他们仍然使用 NPM,这让我感到困惑。

我的问题是:如果我只使用静态 S3 网站而不使用计算,是否可以使用 React,如果可以,我该如何绕过 NPM 过程?

React - 单独脚本中的组件不起作用

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

3个回答

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

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

然后您将文件上传到 s3,它将在其中提供静态文件。

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

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

试试盖茨比!在这里:https : //www.gatsbyjs.org/

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

生成静态页面后,您可以部署在 S3、Github 页面上……选择权在您手中!

您可以针对您的情况跳过 EC2。原因如下:

1) S3 Bucket + CloudFront (CDN) 对于静态文件服务来说真的很快。React minified 应用程序是一组在这里效果最好的静态文件。对于这些缩小文件的构建,我建议使用 CI/CD 过程或在本地构建它们,然后将它们上传到 S3。

2)EC2需要更多的工作来设置,它消耗资源,静态文件或React不需要(除非你使用ReactDOMServer进行动态内容服务),并且不建议静态文件使用Node.js(Node.js被阻止因为它是单线程的,所以最好让静态文件远离它)。

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