将信息注入从 AWS CloudFront 中的 S3 源返回的请求中

Question

我有一个 React SPA，我想为不同的客户部署它，每个客户都有自己独立的后端 API。

为此，我想将后端 api 端点传递给 SPA。

我想做的是，如果用户发送 get 请求https://myapp.mydomain.com ，他会返回一个文档，但是 api 端点已以某种我可以解析和使用的方式添加到请求中在 React 中，例如他的 URL 已被修改为https://myapp.mydomain.com?api=myapi.mydomain.com

我正在使用具有 S3 源的 AWS CloudFront，因此 AWS CloudFront 功能看起来很有希望，但到目前为止我运气不佳。

我愿意接受有关如何以及在何处注入信息以及如何在我的 React SPA 中检索信息的建议，包括完全不同的方法。 我几乎致力于的唯一部分是 CloudFront 并使用单个 S3 存储桶为所有客户提供服务。

Answer 1

我最终实现的解决方案是基于 runtime-env-cra 库。 这基本上从服务器加载了一个附加脚本，其中包含一些在窗口对象中安装环境变量的 javascript 代码。

必要的 javascript 文件由 AWS Lambda 函数生成，该函数又从输入资源为 CloudFormation 模板中的每个客户动态生成。

不幸的是，这无法通过 CloudFront 函数完成，因为您无法访问那里的请求正文。