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

Question

I have a React SPA that I would like to deploy for different customers each with their own separate backend API.

To that end, I'd like to pass the backend api endpoint into the SPA.

What I'd like to do is, if the user sends a get request https://myapp.mydomain.com , he gets back a document, but the api endpoint has been added to the request in some way I can parse and use in React, eg his URL has been modified to read https://myapp.mydomain.com?api=myapi.mydomain.com

I'm using AWS CloudFront with an S3 origin, so AWS CloudFront functions look promising, but I've not had much luck so far.

I'm open to suggestions on how and where to inject the information and how to retrieve it in my React SPA, including entirely different approaches. The only parts I'm pretty much committed on is CloudFront and using a single S3 bucket to serve all customers.

Answer 1

The solution I ended up implementing is based on the runtime-env-cra library. That basically loads an additional script from the server containing some javascript code which installs environment variables in the window object.

The necessary javascript file is generated by an AWS Lambda function which in turn is dynamically generated for each customer in the CloudFormation template from the input ressources.

This unfortunately cannot be done with CloudFront functions, as you have no access to the body of the request there.