通过 AWS CloudFront 从单个 S3 存储桶为 SPA 多租户提供服务

Question

考虑到以下几点：

• 包含静态前端 SPA 文件的单个 S3 存储桶。
• 前端通过 CloudFront 提供服务，每个租户都有自己的 CloudFront 分配（tenantA.domain.com，...tenantZ.domain.com）。
• 每个租户都有自己的配置（可以从解析域的配置服务中获取）。
• 每个 CloudFront 都需要在运行时在前端注入此类配置。

---

我正在考虑一个 Lambda 函数，它查询“配置服务”（可能缓存响应），然后设置全局范围的变量（例如 window.config1）供 SPA 使用。通过 CloudFront 可以实现这样的场景吗？有没有更通用/标准化的方式？

Answer 1

是的，你可以做到，我做到了！ （一直想写一篇关于它的博客。 我在一个多租户 SAAS 平台上工作，其中租户有自己的 Cognito 身份提供者配置。我所做的是我有一个文件config.js，看起来像这样，有一堆 Cognito 设置：（我正在使用 ReactJS）

window.TENANT_CONFIG = {
      REACT_APP_USERPOOL_REDIRECT_SIGNIN : "https://todo.somesite.com/",
      REACT_APP_USERPOOL_REDIRECT_SIGNOUT : "https://todo.somesite.com/",
      REACT_APP_WEB_CLIENT_ID : "todo",
      REACT_APP_TENANT_NAME : "todo" ....
    };

此图块作为 javascript 脚本包含在我的 index.html 顶部

<script type="text/javascript" src="%PUBLIC_URL%/config.js"></script> 

Lambda

您需要us-east-1 中的 Lambda 函数，它将成为 Cloudfront 分发中 Edge 的 Lambda。这个函数必须只有128 MB，并且没有环境变量。您可以参考this 文档了解如何创建 Lambda 函数。但一般来说你需要构造window.TEN...。您可以阅读event.Records[0].cf.request.headers['host'][0].value 以确定您的呼叫是来自一个域还是另一个域，并构建适当的config.js 文件。我的 Lambda 函数实际上是从 S3 存储桶读取配置。你的会不一样。

CloudFront

如果可以生成正确的证书，实际上只需要一个CloudFront 域。只需确保您已添加所有不同子域的 CName。然后你需要添加一个路径模式为：config.js 的行为。配置Lambda Function Associations 的Viewer Request 并指定您的Lambda Function ARN。你很高兴！