Hosting multiple React apps from S3 via Cloudfront

Question

We are hosting a react app in an s3 bucket via cloudfront, hosting on mydomain.com/app (s3 origin) and the backend via ELB on mydomain.com/api (elb orgin), with the default path going to the elb origin. We had to override the 403 response to get it to work, returning a 200 status with /app/index.html. We are unclear if there is any other workaround besides the custom error response, but if we want to add another app, say mydomain.com/app2 (another s3 orgin), we cannot because of the 403 custom error going to /app/index.html

Is there any way to get it to work without the custom 403 override or to have multipe 403 pages, one for each origin?

Accepted Answer

Thanks to Paul L... Here is the python solution and a few notes about using python..

1. You can't use a template, you have to create the lambda manually (make sure you don't select arm, only works with x86)
2. Add a trigger for your cloudfront, for me I added it to my /app/* behavior and once I got that working I added to my /app2/* behavior, etc. You need to deploy to both to get them on the same verison.

```
#!/usr/bin/python
# -*- coding: utf-8 -*-
import json
from os.path import splitext

def lambda_handler(event, context):
    request = event['Records'][0]['cf']['request']

#print("Request before ", request)
    ext = splitext(request['uri'])[1]
    #print("extension = ", ext)

#only do this for URI's with no extension!!!
    if (ext == ""):
        if request['uri'].startswith('/app'):
            request['uri'] = '/app/index.html'
        elif request['uri'].startswith('/app2'):
            request['uri'] = '/app2/index.html'
        #print("Request after ", request)
    return request
```

Answer

In order to run multiple apps under the same domain, you'll need to use Lambda@Edge or Cloudfront Functions to implement the functionality you need.

There are two options I can think of - either you examine the *request* and **rewrite** the URI path to /app/index.html, or you examine the *response* where you'd look for error codes and adjust the status code and body accordingly (see example [here](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-examples.html#lambda-examples-custom-error-static-body))

I think the response option is slightly more complex as you'd either need to embed the contents of index.html inside the function, or make a network call from the function to retrieve it from S3.

For the request option, I don't think we have any sample CloudFront functions that do exactly this, but there is one [here](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html) that is close - just adjust the IF statements to suit- eg.

```
    if (uri.startsWith('/app1/')) {
        request.uri = '/app1/index.html';
    }
    else if (uri.startsWith('/app2/')) {
        request.uri = '/app2/index.html';
    }
```

Answer

Hi, have you tested the Path Pattern option [1] ? That will give you a way to use specific origins for specif routes or paths.

[1] https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html?icmpid=docs_cf_help_panel#DownloadDistValuesPathPattern

Hosting multiple React apps from S3 via Cloudfront

Relevant content