如何使用AWS S3 + CloudFront部署Angular代码？

我想要将现有的Angular代码从IIS迁移到AWS，使用S3作为数据存储，使用CloudFront部署网站是否可行？

  1. 尝试使用Static website hosting（静态网站托管）部署前台代码
    因为使用Angular编写的代码打包后可以视作静态文件，所以我将Angular打包上传到S3后，想要使用Static website hosting来进行部署，但是访问文件时（通过bucket 的 URL方式）发现报403错误。
    我在网上查了一下原因，大概是因为没有关闭Block public access，bucket为私有的不可以公开访问导致的，将其关闭后并配置Bucket policy 和 ACL就可以进行访问。
    但是由于我的安全性需要，我不可以将Block public access设置为public，即不可以将bucket进行公开，所以我决定通过使用S3+CloudFront OAI部署前台代码。
  2. 尝试使用S3+CloudFront OAI部署前台代码
    正常使用CloudFront也需要通过Block public access 和 ACL将S3 bucket的Object设置为public，并进行访问权限的控制，但是因为我不可以将bucket公开，所以我尝试通过CloudFront OAI 获取bucket中的Object。
    在我创建CloudFront的时候，有两个权限错误：

在选择AWS WAF web ACL的时候：'xx' is not authorized to perform: waf:ListWebACLs on resource: 'xx' because no identity-based policy allows the waf:ListWebACLs action

在创建OAI的时候：Failed to create OAI：'xx' is not authorized to perform: cloudfront:CreateCloudFrontOriginAccessIdentity because no identity-based policy allows the cloudfront:CreateCloudFrontOriginAccessIdentity action

请问我应该如何使用CloudFront + S3 部署打包后的Angular代码呢？

更新：2021-12-30
现在我已经成功创建CloudFront OAI，但是当我使用CloudFront访问S3中的文件的时候会报这样一个错

img

根据我的判断应该还是S3 bucket权限不足，没有允许CloudFront进行访问的权限，即缺少s3:GetObject"权限，当我尝试编写Bucket Policy基于Allow权限时

img

会报这个错

img

当我将"Principal"指向CloudFront的ARN时，

img

会报这个错误，但是确定我的ARN并没有错误，并已经正确指向"Resource"

img

我的IAM账号具有所有的权限，这会是权限冲突导致的嘛？我应该如何解决？