从 AWS S3 中的 React static 站点访问根兄弟文件

Question

我有一个从 S3/CloudFront 托管的 React (Vite) 应用程序。 它通过 AWS CDK 到达那里。

在 CDK (CloudFormation) 过程中，我生成了一个部署时间为 JSON 的文件`config.json)，我也将其放入与 React 应用程序相同的 S3 存储桶中。 请参阅下图，了解我的存储桶最终的样子：

我想做的是在运行时在我的 React 应用程序中访问此config.json中的值。 在我从 CloudFront 运行的 React 应用程序中，它似乎并不知道config.json文件：

需要明确的是，我想做的是执行以下操作：

// App.tsx

import * as config from "./config.json"

fetch(config.url, ....)

注意： Cloudfront 确实拥有此存储桶中所有文件的权限：

siteBucket.addToResourcePolicy(
      new iam.PolicyStatement({
        actions: ["s3:GetObject"],
        resources: [siteBucket.arnForObjects("*")],
        principals: [
          new iam.CanonicalUserPrincipal(
            cloudfrontOAI.cloudFrontOriginAccessIdentityS3CanonicalUserId
          ),
        ],
      })
    );
    new CfnOutput(this, "Bucket", { value: siteBucket.bucketName });

Answer 1

我发现这篇文章概述了类似的模式。

通过在挂载时获取文件，我可以读取部署时在 React 应用程序顶层生成的适当配置：

// App.tsx

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/config.json")
      .then(function (res) {
        return res.json();
      })
      .then(function (data) {
        setData(data);
      })
      .catch(function (err) {
        console.log(err, " error");
      });
  }, []);

  return (
    <div>{JSON.stringify(data, null, 2)</div>
  );
}