通过AWS CloudFront从单个S3存储桶为SPA多租户提供服务 [英] Serve SPA multi-tenants through AWS CloudFront from a single S3 bucket

问题描述

考虑以下几点:

• 包含静态前端SPA文件的单个S3存储桶.
• Frontend通过CloudFront提供服务，每个租户都有自己的CloudFront分布(tenantA.domain.com，... tenantZ.domain.com).
• 每个租户都有自己的配置(可以从解析域的Configuration Service中获取).
• 每个CloudFront都需要在运行时将这样的配置注入到前端.

我正在考虑一个Lambda函数，该函数将查询配置服务".(可能是缓存响应)，然后设置要使用的SPA的全局范围变量(例如 window.config1 ).通过CloudFront是否可能出现这种情况?有更通用/标准化的方法吗?

I am thinking of a Lambda function, that queries the "Configuration service" (possibly caching the response), and then setting globally scoped variables (e.g. window.config1) for the SPA to use. Is such a scenario possible through CloudFront? Is there a more common/standardized way?

推荐答案

是的，我已经做到了！(本意是撰写有关它的博客.我在一个多租户SAAS平台上工作，在该平台上，租户具有自己的Cognito身份提供商配置.我所做的是我有一个文件 config.js ，看起来像这样，它具有许多Cognito设置:(我正在使用ReactJS)

Yes you can do this, I have done it! (Been meaning to write a blog about it. I work on a multi-tenant SAAS platform, where tenants have their own identity provider configuration for Cognito. What I did was I had a file config.js, looks something like this which had a bunch of Cognito settings: (I'm using 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

This tile is included as a javascript script at the top of my index.html

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

Lambda

您需要在 us-east-1 中使用Lambda函数，该函数将成为Cloudfront发行版中Edge的Lambda.此函数必须只有 128 MB ，并且没有环境变量.您可以参考有关如何创建的此文档Lambda函数.但通常，您需要构造 window.TEN ... .您可以阅读 event.Records [0] .cf.request.headers ['host'] [0] .value 来确定您的呼叫是否来自一个域或另一个域，并构造适当的 config.js 文件.我的Lambda函数实际上是从S3存储桶读取配置的.您的会有所不同.

You need a Lambda function in us-east-1 which will become a Lambda at Edge in your Cloudfront distribution. This function must be only 128 MB and have no environment variables. You can refer to this documentation on how to create the Lambda function. But in general you need to construct the window.TEN.... You can read the event.Records[0].cf.request.headers['host'][0].value to determine wether your call came from one domain or the other, and construct the appropriate config.js file. My Lambda function actually reads configuration from an S3 bucket. Yours will be different.

CloudFront

如果可以生成正确的证书，则实际上只需要一个 CloudFront 域.只要确保您已添加所有不同子域的CName即可.然后，您需要添加行为，其行为方式为: config.js .配置查看器请求的 Lambda函数关联，并指定您的 Lambda函数ARN .而且你很好走！

If you can generate the correct certificate, you only need one CloudFront domain actually. Just make sure you have added the CNames of all the different subdomains. Then you need to add a behaviour with a path pattern of: config.js. Configure a Lambda Function Associations of Viewer Request and Specify your Lambda Function ARN. And you are good to go!

这篇关于通过AWS CloudFront从单个S3存储桶为SPA多租户提供服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！