如何将React项目部署到AWS s3

Question

我尝试将 React 项目部署到 s3，并且我遵循了此说明的每一步。 https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af

但是，我在 s3 服务器上看不到我的项目，并且总是收到这 2 个错误。

Uncaught SyntaxError: Unexpected token <
Failed to load resource: the server responded with a status of 403 (Forbidden)

谁能告诉我如何解决这个问题？我应该改变什么吗？

这是文件结构

这是生成的前三行

main.js

!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}(function(e){for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t))switch(typeof e[t]){case"function":break;case"object":e[t]=function(t){var n=t.slice(1),r=e[t[0]];return function(e,t,o){r.apply(this,[e,t,o].concat(n))}}(e[t]);break;default:e[t]=e[e[t]]}return e}([function(e,t,n){

Answer 1

您的cloudfront原始访问身份似乎无权访问您的s3存储桶。您必须更新存储桶策略以允许从 Cloudfront 访问或更新 Cloud Front 源设置以创建源身份并自动更新存储桶策略。

您可以从云前端执行此操作，方法是转到源并编辑 s3 源，如以下屏幕截图所示。

如果您想从 s3 存储桶执行此操作，请查看以下 aws 文档中的主题“向 Amazon CloudFront 源身份授予权限”。

http://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-6

Answer 2

有一种便捷的方式将 SPA 部署到 S3 和 CloudFront，并轻松在云上设置基础设施！ 它称为 SWS Console Quick Cloud Architecture Builder 服务。只需几个简单的输入，您就可以控制 AWS 资源。请参阅下面的文档！

使用 SWS 控制台快速云架构构建器使前端部署变得简单

使用 S3 和 CloudFront 将 SPA（React、Vue 等）项目部署到 AWS 时，需要执行一些复杂的任务，例如在 S3 上设置静态 Web 托管并将存储桶链接到 CloudFront。不如使用 Sws Console 服务，它为您的 SPA 项目构建 S3 静态 Web 托管 + CloudFront 的 AWS 云架构，而无需担心这些任务？请参考下面的文档，尝试使用Sws Console Quick Builder工具快速构建AWS架构！

使用 SWS 控制台快速云架构构建器使前端部署变得简单

进入Sws控制台服务页面