將信息注入從 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 函數完成，因為您無法訪問那里的請求正文。