AWS Elastic Beakstalk - 将 Angular 项目上传到 S3 存储桶后出现 403 禁止错误(托管为静态网站)

AWS Elastic Beakstalk - Giving 403 Forbidden Error after uploading Angular project into S3 Bucket (Hosting as static website)

完全是 AWS 的新手,但我有一个客户项目,我正尝试在 Elastic Beanstalk 上托管(Angular 应用程序)

目前,我有一个 spring 引导应用程序,我昨天成功部署到 AWS EB,它根据 API 调用为前端提供所需的数据。我现在正在尝试将项目的前端上传到它自己的 S3 存储桶中,并将其作为静态网站托管。据我所知,我已经对存储桶 public 进行了所有访问,但仍然收到 403 Forbidden - Access Denied.

这是我在遵循 AWS 生成的 link 后在浏览器中得到的结果,它显然服务于我的静态站点:

我采取的步骤如下:

我创建了一个名为 three-counties-medical 的新 Bucket,并添加了包含来自 ng build --prod 的构建文件的项目文件夹。这些已成功上传。

桶内容如下:

正确创建存储桶并成功添加所有文件后,我转到“存储桶属性”,向下滚动到最底部 Static Website Hosting 并单击 Edit。然后我启用静态网站托管并将我的 index.html 配置为静态网站的索引页面。静态网站托管的配置如下所示:

但是,当我点击 S3 创建的 link 时,浏览器中显示 403 forbidden。

Permissions 选项卡中,我已将 Block all public access 关闭:

我注意到的另一件事是存储桶策略完全空白,没有 Json。

我不确定这是否正确,但是通过阅读各种在线资源,很明显该站点需要 public 这样任何人都可以看到它(我猜?)

我还尝试通过单击转到 Actions 下拉菜单并选择 - Make Public 来制作每个文件 accessible/public。但是,错误仍然存​​在。

我也试过看这个 post:

Similar Error

如果有人有任何答案,请告诉我。应用程序的部署或某种配置显然存在一些问题。

干杯!

*** 编辑 ***

我现在从这个答案中添加了以下存储桶策略 Answer

  {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": "arn:aws:s3:::three-counties-medical/*"
    }
  ]
}

但现在我得到一个 404 - KeyNotFound index.html:

但是index.html绝对存在于桶中!!

好的,原来问题是我没有创建存储桶策略。然后我通过删除存储桶的内容解决了 404,然后 re-uploading 将文件放入存储桶而不是包含文件的文件夹中。猜猜这就是它找不到 index.html 文件的原因!!

如果有人有任何此类问题,请确保您有存储桶策略。您可以使用此答案中的那个!