在没有任何后端的 AWS S3 中托管 React 应用程序

Question

我正在尝试托管一个视图，我已经使用 create react app 构建了应用程序，所以我没有任何应用程序后端。 我只是在消费服务。

我有一个很好的想法，即在 Docker 中使用 Node 和 React，并公开一个端口并通过 Node.js 提供 html 文件。

但是在这个示例应用程序中，我只是在使用服务并呈现 UI。

对于这个示例 UI，我们是否需要使用 Docker，我已经阅读了一些文档并发现它更好地在 s3 中托管这个单个 html 文件，因为 AWS S3 是为文件检索和托管而设计的。

那么如何构建应用程序以及如何托管该应用程序呢？

Answer 1

如果您想在 AWS S3 上托管这个 React 应用程序，您可以使用npm run build或yarn build Building production build编译代码。 它应该创建一个包含所有生产就绪文件的构建文件夹。 然后，您需要将这些文件上传到要托管网站的 S3 存储桶。 此网站应该在与 S3 存储桶关联的 url 上可用

这是S3 托管静态网站的文档

Answer 2

要构建应用程序，请运行命令npm run build ，如果您使用 create-react-app 进行应用程序设置，这将是预配置的。

要进行部署，请转到您的 AWS 控制台，

1. 创建一个新的存储桶
2. 将生成的构建文件夹的内容上传到新存储桶的根目录。
3. 在您的存储桶属性中，将有一个设置静态网站托管的选项，请选择该选项。
4. 确保您的存储桶和文件的权限正确且可访问

我建议在 s3 存储桶顶部使用 cloudfront。

阅读此博客了解更多详情，

Answer 3

我建议你看看 firebase ( https://firebase.google.com/docs/hosting )。 Firebase 非常容易与您的 React 应用程序一起设置。

设置完成后，您可以运行npm run-script build来构建生产环境，然后进行firebase deploy ，就大功告成了！

PS：如果你有 node.js 后端，Firebase 也能很好地工作。