S3 静态网站 + Cloudfront - 一切正常，但我的 index.html 无法访问其他对象/文件

Question

就标题而言，我使用 S3 和 Cloudfront 作为基础设施创建了一个网站。我只有默认的 Cloudfront 策略，并且不知道如何使 S3 中的对象彼此“交互”。

如何更新此策略，以便我的 index.html 可以通过在 HTML 中引用 CSS 和 JavaScript 文件来访问它们？

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity [porcoddio-REDACTED]"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.redacted.com/*"
        }
    ]
}

提前致谢， 我

我尝试修改策略，但我太愚蠢或懒惰，目前无法阅读所有 AWS 文档，因此失败了。

除非与 Cloudfront 配置有关，否则这也是可能的。不管怎样，请帮助我。

Answer 1

为了确保您的 index.html 可以通过 CloudFront 访问 S3 存储桶中的其他对象（例如 CSS 和 JavaScript 文件），请按照以下步骤操作：

更新您的 S3 存储桶策略以允许从 CloudFront 进行访问。
确保您的 CloudFront 分配正确设置，并将 S3 存储桶作为源。
验证
3. index.html 中 CSS 和 JS

    文件的路径。

更改后使 CloudFront 缓存失效。

按照这些步骤应该可以解决问题并允许您的index.html 访问其他对象/文件。更新您的S3 存储桶策略以允许从CloudFront 进行访问。 确保您的 CloudFront 分配已正确设置，并将 S3 存储桶作为源。 验证 index.html 中 CSS 和 JS 文件的路径。 更改后使 CloudFront 缓存失效。 按照这些步骤应该可以解决问题并允许您的 index.html 访问其他对象/文件。